feat : add group

api.http

@@ -9,14 +9,14 @@ Content-Type: application/json
 // GROUP 
 
 ###
-GET http://localhost:3000/api/group/get?path=list-group&villageId=121212 HTTP/1.1
+GET http://localhost:3000/api/group/get?path=get-all-group&villageId=121212&active=true HTTP/1.1
 
 ###
 POST http://localhost:3000/api/group/post?path=create-group HTTP/1.1
 Content-Type: application/json
 
 {
-    "name": "amalia2",
+    "name": "LPD 3",
     "idVillage": "121212"
 }
 

src/module/_global/bin/api_address.ts

@@ -1,4 +1,29 @@
 export const API_ADDRESS = {
+   // Group
    "apiGetAllGroup": "/api/group/get?path=get-all-group",
+   "apiGetOneGroup": "/api/group/get?path=get-one-group",
+   "apiCreateGroup": "/api/group/post?path=create-group",
+   "apiUpdateGroup": "/api/group/post?path=update-group",
+   "apiDeleteGroup": "/api/group/post?path=delete-group",
 
+   // User
+   "apiGetAllUser": "/api/user/get?path=get-all-users",
+   "apiGetOneUser": "/api/user/get?path=get-one-users",
+   "apiCreateUser": "/api/user/post?path=create-users",
+   "apiUpdateUser": "/api/user/post?path=update-users",
+   "apiDeleteUser": "/api/user/post?path=delete-users",
+
+   // Announcement
+   "apiGetAllAnnouncement": "/api/announcement/get?path=get-all-announcement",
+   "apiGetOneAnnouncement": "/api/announcement/get?path=get-one-announcement",
+   "apiCreateAnnouncement": "/api/announcement/post?path=create-announcement",
+   "apiUpdateAnnouncement": "/api/announcement/post?path=update-announcement",
+   "apiDeleteAnnouncement": "/api/announcement/post?path=delete-announcement",
+
+   // Village
+   "apiGetAllVillage": "/api/village/get?path=get-all-village",
+   "apiGetOneVillage": "/api/village/get?path=get-one-village",
+   "apiCreateVillage": "/api/village/post?path=create-village",
+   "apiUpdateVillage": "/api/village/post?path=update-village",
+   "apiDeleteVillage": "/api/village/post?path=delete-village",
 }

src/module/group/api/api_index.ts

@@ -6,7 +6,7 @@ import { updateGroup } from "./post/updateGroup";
 
 export const API_INDEX_GROUP = [
   {
-    path: "list-group",
+    path: "get-all-group",
     method: "GET",
     bin: listGroups,
   },

src/module/group/api/get/listGroup.ts

@@ -5,15 +5,17 @@ export async function listGroups(req: NextRequest): Promise<Response> {
 
   try {
     const searchParams = req.nextUrl.searchParams
-    const villaId = searchParams.get('villageId');
+    const villaId = "121212"
+    const active = searchParams.get('active');
     const groups = await prisma.group.findMany({
       where: {
-        isActive: true,
+        isActive: (active == "true" ? true : false),
         idVillage: String(villaId),
       },
       select: {
         id: true,
         name: true,
+        isActive: true
       },
     });
 

src/module/group/api/post/createGroup.ts

@@ -1,9 +1,10 @@
 import { prisma } from "@/module/_global";
+import { revalidatePath } from "next/cache";
 
 export async function createGroup(req: Request) {
   try {
     const data = await req.json();
-
+    const villaId = "121212";
 
     if (!data || !data.name) {
       return Response.json(
@@ -16,17 +17,20 @@ export async function createGroup(req: Request) {
       data: {
         name: data.name,
         isActive: true,
-        idVillage: data.idVillage,
+        idVillage: villaId,
       },
       select: {
         id: true,
         name: true,
       },
     });
-
+    revalidatePath("/group");
     return Response.json(group, { status: 201 });
   } catch (error) {
     console.error(error);
-    return Response.json({ success: false, message: "Internal Server Error" }, { status: 500 });
+    return Response.json(
+      { success: false, message: "Internal Server Error" },
+      { status: 500 }
+    );
   }
 }

src/module/group/api/post/deleteGroup.ts

@@ -1,19 +1,32 @@
 import { prisma } from "@/module/_global";
+import { revalidatePath } from "next/cache";
+import { NextRequest } from "next/server";
 
-export async function deleteGroup(req: Request) {
+export async function deleteGroup(req: NextRequest) {
   try {
     const data = await req.json();
-    const update = await prisma.group.update({
+    const active = data.isActive;
+
+    await prisma.group.update({
       where: {
         id: data.id,
       },
       data: {
-        isActive: false,
+        isActive: !active,
       },
     });
-    return Response.json({ success: true, message: "Sukses Delete Grup" }, { status: 200 });
+
+    revalidatePath("/group");
+
+    return Response.json(
+      { success: true, message: "Sukses update status grup" },
+      { status: 200 }
+    );
   } catch (error) {
     console.error(error);
-    return Response.json({ message: "Internal Server Error", success: false }, { status: 500 });
+    return Response.json(
+      { message: "Internal Server Error", success: false },
+      { status: 500 }
+    );
   }
 }

src/module/group/components/list_group_active.tsx

@@ -1,49 +1,59 @@
-import { LayoutDrawer, WARNA } from '@/module/_global';
+import { API_ADDRESS, LayoutDrawer, WARNA } from "@/module/_global";
-import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import {
-import React, { useState } from 'react';
+  ActionIcon,
-import { HiOutlineOfficeBuilding } from 'react-icons/hi';
+  Box,
-import { HiMagnifyingGlass } from 'react-icons/hi2';
+  Group,
-import EditDrawerGroup from './ui/edit_drawer_group';
+  Skeleton,
-import toast from 'react-hot-toast';
+  Text,
+  TextInput,
+} from "@mantine/core";
+import React, { useEffect, useState } from "react";
+import { HiOutlineOfficeBuilding } from "react-icons/hi";
+import { HiMagnifyingGlass } from "react-icons/hi2";
+import EditDrawerGroup from "./ui/edit_drawer_group";
+import toast from "react-hot-toast";
+import { useShallowEffect } from "@mantine/hooks";
 
-const dataGroup = [
+type dataGroup = {
-  {
+  id: string;
-    id: 1,
+  name: string;
-    name: 'Dinas'
+  isActive: boolean;
-  },
+};
-  {
-    id: 2,
-    name: 'Adat'
-  },
-  {
-    id: 3,
-    name: 'LPD'
-  },
-  {
-    id: 4,
-    name: 'Karang Taruna'
-  },
-  {
-    id: 5,
-    name: 'BPD'
-  },
-  {
-    id: 6,
-    name: 'LPM'
-  },
-  {
-    id: 7,
-    name: 'PKK'
-  },
-  {
-    id: 8,
-    name: 'Pengelolaan Penduduk'
-  },
-]
 
-export default function ListGroupActive() {
+export default function ListGroupActive({ status }: { status: boolean }) {
-  const [openDrawer, setOpenDrawer] = useState(false)
+  const [openDrawer, setOpenDrawer] = useState(false);
-  const [valChoose, setValChoose] = useState("")
+  const [valChoose, setValChoose] = useState("");
+  const [isData, setData] = useState<dataGroup[]>([]);
+  const [selectId, setSelectId] = useState<string | null>(null);
+  const [active, setActive] = useState<boolean | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [isname, setName] = useState<string>("");
+
+  const getData = async () => {
+    try {
+      setData([]);
+      setLoading(true);
+      const res = await fetch(
+        `${API_ADDRESS.apiGetAllGroup}&villageId=121212&active=` + status
+      );
+      const data = await res.json();
+      setData(data);
+      setLoading(false);
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error(error);
+        toast.error("Terjadi kesalahan");
+      } else {
+        console.error("Error tidak diketahui");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+  }, [status]);
 
   return (
     <Box pt={20}>
@@ -60,40 +70,96 @@ export default function ListGroupActive() {
         leftSection={<HiMagnifyingGlass size={20} />}
         placeholder="Pencarian"
       />
-      {dataGroup.map((v, i) => {
+      {loading
-        return (
+        ? Array(6)
-          <Box pt={20} key={i}>
+            .fill(null)
-            <Group align='center'
+            .map((_, i) => (
-              style={{
+              <Box pt={20} key={i}>
-                border: `1px solid ${"#DCEED8"}`,
+                <Group
-                padding: 10,
+                  align="center"
-                borderRadius: 10,
+                  style={{
-                cursor: 'pointer'
+                    border: `1px solid ${"#DCEED8"}`,
-              }}
+                    padding: 10,
-              onClick={() => {
+                    borderRadius: 10,
-                setValChoose(v.name)
+                    cursor: "pointer",
-                setOpenDrawer(true)
+                  }}
-              }}
+                >
-            >
+                  <Box>
-              <Box>
+                    <ActionIcon
-                <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
+                      variant="light"
-                  <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
+                      bg={"#DCEED8"}
-                </ActionIcon>
+                      size={50}
+                      radius={100}
+                      aria-label="icon"
+                    >
+                      <Skeleton height={25} width={25} />
+                    </ActionIcon>
+                  </Box>
+                  <Box>
+                    <Skeleton height={20} width={100} />
+                  </Box>
+                </Group>
               </Box>
-              <Box>
+            ))
-                <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+        : isData.map((v, i) => {
+            return (
+              <Box pt={20} key={i}>
+                <Group
+                  align="center"
+                  style={{
+                    border: `1px solid ${"#DCEED8"}`,
+                    padding: 10,
+                    borderRadius: 10,
+                    cursor: "pointer",
+                  }}
+                  onClick={() => {
+                    setValChoose(v.name);
+                    setOpenDrawer(true);
+                    setSelectId(v.id);
+                    setActive(v.isActive);
+                    setName(v.name)
+                  }}
+                >
+                  <Box>
+                    <ActionIcon
+                      variant="light"
+                      bg={"#DCEED8"}
+                      size={50}
+                      radius={100}
+                      aria-label="icon"
+                    >
+                      <HiOutlineOfficeBuilding
+                        color={WARNA.biruTua}
+                        size={25}
+                      />
+                    </ActionIcon>
+                  </Box>
+                  <Box>
+                    <Text fw={"bold"} c={WARNA.biruTua}>
+                      {v.name}
+                    </Text>
+                  </Box>
+                </Group>
               </Box>
-            </Group>
+            );
-          </Box>
+          })}
-        )
+      <LayoutDrawer
-      })}
+        opened={openDrawer}
-      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={valChoose}>
+        onClose={() => setOpenDrawer(false)}
-        <EditDrawerGroup onUpdated={(val) => {
+        title={valChoose}
-          if (val) {
+      >
-            toast.success('Sukses! data tersimpan')
+        <EditDrawerGroup
-          }
+          id={selectId}
-          setOpenDrawer(false)
+          isActive={active}
-        }} />
+          isName={isname}
+          onUpdated={(val) => {
+            if (val) {
+              toast.success("Sukses! data tersimpan");
+              getData();
+            }
+            setOpenDrawer(false);
+          }}
+        />
       </LayoutDrawer>
     </Box>
   );

src/module/group/components/list_group_non_active.tsx

@@ -1,100 +0,0 @@
-import { LayoutDrawer, WARNA } from '@/module/_global';
-import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
-import React, { useState } from 'react';
-import { HiOutlineOfficeBuilding } from 'react-icons/hi';
-import { HiMagnifyingGlass } from 'react-icons/hi2';
-import EditDrawerGroup from './ui/edit_drawer_group';
-import toast from 'react-hot-toast';
-
-const dataGroup = [
-  {
-    id: 1,
-    name: 'Dinas'
-  },
-  {
-    id: 2,
-    name: 'Adat'
-  },
-  {
-    id: 3,
-    name: 'LPD'
-  },
-  {
-    id: 4,
-    name: 'Karang Taruna'
-  },
-  {
-    id: 5,
-    name: 'BPD'
-  },
-  {
-    id: 6,
-    name: 'LPM'
-  },
-  {
-    id: 7,
-    name: 'PKK'
-  },
-  {
-    id: 8,
-    name: 'Pengelolaan Penduduk'
-  },
-]
-
-export default function ListGroupNonActive() {
-  const [openDrawer, setOpenDrawer] = useState(false)
-  const [valChoose, setValChoose] = useState("")
-
-  return (
-    <Box pt={20}>
-      <TextInput
-        styles={{
-          input: {
-            color: WARNA.biruTua,
-            borderRadius: WARNA.biruTua,
-            borderColor: WARNA.biruTua,
-          },
-        }}
-        size="md"
-        radius={30}
-        leftSection={<HiMagnifyingGlass size={20} />}
-        placeholder="Pencarian"
-      />
-      {dataGroup.map((v, i) => {
-        return (
-          <Box pt={20} key={i}>
-            <Group align='center'
-              style={{
-                border: `1px solid ${"#DCEED8"}`,
-                padding: 10,
-                borderRadius: 10,
-                cursor: 'pointer'
-              }}
-              onClick={() => {
-                setValChoose(v.name)
-                setOpenDrawer(true)
-              }}
-            >
-              <Box>
-                <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
-                  <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
-                </ActionIcon>
-              </Box>
-              <Box>
-                <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
-              </Box>
-            </Group>
-          </Box>
-        )
-      })}
-      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={valChoose}>
-        <EditDrawerGroup onUpdated={(val) => {
-          if (val) {
-            toast.success('Sukses! data tersimpan')
-          }
-          setOpenDrawer(false)
-        }} />
-      </LayoutDrawer>
-    </Box>
-  );
-}

src/module/group/components/tab_list_group.tsx

@@ -1,38 +1,48 @@
-'use client'
+"use client";
-import { Box, Tabs, rem } from '@mantine/core';
+import { Box, Tabs, rem } from "@mantine/core";
-import { IoCloseCircleOutline } from "react-icons/io5"
+import { IoCloseCircleOutline } from "react-icons/io5";
-import { IoMdCheckmarkCircleOutline } from "react-icons/io"
+import { IoMdCheckmarkCircleOutline } from "react-icons/io";
-import ListGroupActive from './list_group_active';
+import ListGroupActive from "./list_group_active";
-import ListGroupNonActive from './list_group_non_active';
 
 export default function TabListGroup() {
   const iconStyle = { width: rem(20), height: rem(20) };
 
   return (
     <Box p={20}>
-      <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="aktif">
+      <Tabs variant="pills" color="#FF9861" radius="xl" defaultValue="aktif">
-        <Tabs.List bg={"white"} style={{
+        <Tabs.List
-          border: `1px solid ${"#EDEDED"}`,
+          bg={"white"}
-          padding: 5,
+          style={{
-          borderRadius: 100
+            border: `1px solid ${"#EDEDED"}`,
-        }}>
+            padding: 5,
-          <Tabs.Tab value="aktif" w={"45%"} leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}>
+            borderRadius: 100,
+          }}
+        >
+          <Tabs.Tab
+            value="aktif"
+            w={"45%"}
+            leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
+          >
             Aktif
           </Tabs.Tab>
-          <Tabs.Tab value="tidak-aktif" w={"53%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
+          <Tabs.Tab
+            value="tidak-aktif"
+            w={"53%"}
+            leftSection={<IoCloseCircleOutline style={iconStyle} />}
+          >
             Tidak Aktif
           </Tabs.Tab>
         </Tabs.List>
 
         <Tabs.Panel value="aktif">
-          <ListGroupActive />
+          <ListGroupActive status={true} />
         </Tabs.Panel>
 
         <Tabs.Panel value="tidak-aktif">
-          <ListGroupNonActive />
+          {/* <ListGroupNonActive /> */}
+          <ListGroupActive status={false} />
         </Tabs.Panel>
       </Tabs>
     </Box>
   );
 }
-

src/module/group/components/ui/drawer_group.tsx

@@ -1,14 +1,44 @@
-import { LayoutDrawer, WARNA } from '@/module/_global';
+import { API_ADDRESS, LayoutDrawer, WARNA } from "@/module/_global";
-import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import {
-import React, { useState } from 'react';
+  Box,
+  Button,
+  Center,
+  Flex,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import React, { useState } from "react";
 import { IoAddCircle } from "react-icons/io5";
 
-export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) => void }) {
+export default function DrawerGroup({
-  const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+  onSuccess,
+}: {
+  onSuccess: (val: boolean) => void;
+}) {
+  const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
+  const [namaGroup, setNamaGroup] = useState("");
 
-  function onCLose() {
+
-    setOpenDrawerGroup(false)
+  async function onCreate() {
-    onSuccess(true)
+    try {
+      const res = await fetch(API_ADDRESS.apiCreateGroup, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: namaGroup,
+        }),
+      });
+      setOpenDrawerGroup(false);
+      onSuccess(true);
+    } catch (error) {
+      console.log(error);
+      onSuccess(false);
+    }
   }
 
   return (
@@ -18,7 +48,7 @@ export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) =
           cols={{ base: 3, sm: 3, lg: 3 }}
           onClick={() => setOpenDrawerGroup(true)}
         >
-          <Flex justify={'center'} align={'center'} direction={'column'} >
+          <Flex justify={"center"} align={"center"} direction={"column"}>
             <Box>
               <IoAddCircle size={30} color={WARNA.biruTua} />
             </Box>
@@ -28,7 +58,11 @@ export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) =
           </Flex>
         </SimpleGrid>
       </Stack>
-      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Grup'}>
+      <LayoutDrawer
+        opened={openDrawerGroup}
+        onClose={() => setOpenDrawerGroup(false)}
+        title={"Tambah Grup"}
+      >
         <Box pt={10}>
           <TextInput
             styles={{
@@ -41,15 +75,16 @@ export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) =
             size="lg"
             radius={10}
             placeholder="Grup"
+            onChange={(e) => setNamaGroup(e.target.value)}
           />
-          <Box mt={'xl'}>
+          <Box mt={"xl"}>
             <Button
               c={"white"}
               bg={WARNA.biruTua}
               size="lg"
               radius={30}
               fullWidth
-              onClick={onCLose}
+              onClick={onCreate}
             >
               Simpan
             </Button>

src/module/group/components/ui/edit_drawer_group.tsx

@@ -1,32 +1,96 @@
-'use client'
+"use client";
-import { LayoutDrawer, WARNA } from '@/module/_global';
+import { API_ADDRESS, LayoutDrawer, WARNA } from "@/module/_global";
-import LayoutModal from '@/module/_global/layout/layout_modal';
+import LayoutModal from "@/module/_global/layout/layout_modal";
-import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import {
-import React, { useState } from 'react';
+  Box,
-import { FaPencil, FaToggleOff } from 'react-icons/fa6';
+  Button,
+  Center,
+  Flex,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import React, { useState } from "react";
+import toast from "react-hot-toast";
+import { FaPencil, FaToggleOff } from "react-icons/fa6";
 import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5";
 
-export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolean) => void }) {
+export default function EditDrawerGroup({
-  const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+  onUpdated,
-  const [isModal, setModal] = useState(false)
+  id,
+  isActive,
+  isName,
+}: {
+  onUpdated: (val: boolean) => void;
+  id: string | null;
+  isActive: boolean | null;
+  isName: string;
+}) {
+  const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
+  const [isModal, setModal] = useState(false);
+  const [name, setName] = useState(isName);
 
-  function onCLose() {
+  async function isUpdate() {
-    setOpenDrawerGroup(false)
+    try {
-    onUpdated(true)
+      const res = await fetch(API_ADDRESS.apiUpdateGroup, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          id: id,
+          name : name
+        }),
+      });
+      setOpenDrawerGroup(false);
+    onUpdated(true);
+    } catch (error) {
+      console.error(error);
+    }
   }
 
-  function onTrue(val: boolean) {
+  async function nonActive(val: boolean) {
-    if (val) {
+    try {
-      onUpdated(true)
+      if (val) {
+        const res = await fetch(API_ADDRESS.apiDeleteGroup, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            id,
+            isActive,
+          }),
+        });
+
+        if (res.status == 200) {
+          onUpdated(true);
+        } else {
+          onUpdated(false);
+        }
+      }
+      setModal(false);
+    } catch (error) {
+      console.log(error);
+      setModal(false);
+      toast.error("Terjadi kesalahan");
+      onUpdated(false);
     }
-    setModal(false)
   }
 
   return (
     <Box>
       <Stack pt={10}>
         <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
-          <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setModal(true)} style={{ cursor: 'pointer' }}>
+          <Flex
+            justify={"center"}
+            align={"center"}
+            direction={"column"}
+            onClick={() => setModal(true)}
+            style={{ cursor: "pointer" }}
+          >
             <Box>
               <FaToggleOff size={30} color={WARNA.biruTua} />
             </Box>
@@ -34,7 +98,13 @@ export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolea
               <Text c={WARNA.biruTua}>Non Aktifkan</Text>
             </Box>
           </Flex>
-          <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setOpenDrawerGroup(true)} style={{ cursor: 'pointer' }}>
+          <Flex
+            justify={"center"}
+            align={"center"}
+            direction={"column"}
+            onClick={() => setOpenDrawerGroup(true)}
+            style={{ cursor: "pointer" }}
+          >
             <Box>
               <FaPencil size={30} color={WARNA.biruTua} />
             </Box>
@@ -44,7 +114,11 @@ export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolea
           </Flex>
         </SimpleGrid>
       </Stack>
-      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Grup'}>
+      <LayoutDrawer
+        opened={openDrawerGroup}
+        onClose={() => setOpenDrawerGroup(false)}
+        title={"Edit Grup"}
+      >
         <Box pt={10}>
           <TextInput
             styles={{
@@ -55,17 +129,19 @@ export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolea
               },
             }}
             size="lg"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
             radius={10}
             placeholder="Grup"
           />
-          <Box mt={'xl'}>
+          <Box mt={"xl"}>
             <Button
               c={"white"}
               bg={WARNA.biruTua}
               size="lg"
               radius={30}
               fullWidth
-              onClick={onCLose}
+              onClick={isUpdate}
             >
               Simpan
             </Button>
@@ -73,10 +149,14 @@ export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolea
         </Box>
       </LayoutDrawer>
 
-      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+      <LayoutModal
+        opened={isModal}
+        onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin mangubah status aktifasi data?"
-        onYes={(val) => { onTrue(val) }} />
+        onYes={(val) => {
+          nonActive(val);
+        }}
+      />
     </Box>
   );
 }
-