diff --git a/src/app/api/document/more/route.ts b/src/app/api/document/more/route.ts
new file mode 100644
index 0000000..f4a77c7
--- /dev/null
+++ b/src/app/api/document/more/route.ts
@@ -0,0 +1,17 @@
+import { funGetUserByCookies } from "@/module/auth";
+import { NextResponse } from "next/server";
+
+// MOVE ITEM
+export async function POST(request: Request) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+      return NextResponse.json({ success: true, message: "Berhasil memindahkan item" }, { status: 200 });
+   } catch (error) {
+      console.log(error);
+      return NextResponse.json({ success: false, message: "Gagal memindahkan item, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+};
\ No newline at end of file
diff --git a/src/app/api/document/route.ts b/src/app/api/document/route.ts
index 54bfbc6..331595d 100644
--- a/src/app/api/document/route.ts
+++ b/src/app/api/document/route.ts
@@ -29,6 +29,21 @@ export async function GET(request: Request) {
          return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, data tidak ditemukan" }, { status: 404 });
       }
 
+      if (path != "home" && path != "null" && path != "undefined" && path != "") {
+         const cekPath = await prisma.divisionDocumentFolderFile.count({
+            where: {
+               isActive: true,
+               id: String(path)
+            }
+         })
+
+         if (cekPath == 0) {
+            return NextResponse.json({ success: false, message: "Gagal mendapatkan item, data tidak ditemukan" }, { status: 404 });
+         }
+      }
+
+
+
 
       const data = await prisma.divisionDocumentFolderFile.findMany({
          where: {
@@ -63,11 +78,11 @@ export async function GET(request: Request) {
       }))
 
 
-      return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: allData, }, { status: 200 });
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan item", data: allData, }, { status: 200 });
 
    } catch (error) {
       console.log(error);
-      return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan item, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
    }
 }
 
@@ -107,6 +122,22 @@ export async function POST(request: Request) {
          }
       }
 
+      const nameFile = await prisma.divisionDocumentFolderFile.count({
+         where: {
+            name,
+            idDivision,
+            path,
+            extension: "folder",
+            category: "FOLDER",
+            isActive: true
+         }
+      })
+
+
+      if (nameFile > 0) {
+         return NextResponse.json({ success: false, message: "Gagal membuat folder baru, folder sudah ada" }, { status: 400 });
+      }
+
       const data = await prisma.divisionDocumentFolderFile.create({
          data: {
             name,
@@ -123,4 +154,92 @@ export async function POST(request: Request) {
       console.log(error);
       return NextResponse.json({ success: false, message: "Gagal membuat folder, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
    }
+};
+
+
+// RENAME ITEM
+export async function PUT(request: Request) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+      const { name, id, path, idDivision, extension } = (await request.json());
+      const cekFile = await prisma.divisionDocumentFolderFile.count({
+         where: {
+            id: id,
+            isActive: true
+         }
+      })
+
+      if (cekFile == 0) {
+         return NextResponse.json({ success: false, message: "Gagal mendapatkan item, data tidak ditemukan" }, { status: 404 });
+      }
+
+      const nameFile = await prisma.divisionDocumentFolderFile.count({
+         where: {
+            name,
+            idDivision,
+            path,
+            extension,
+            isActive: true,
+            NOT: {
+               id: id
+            },
+         }
+      })
+
+
+      if (nameFile > 0) {
+         return NextResponse.json({ success: false, message: "Gagal mengubah nama item, item sudah ada" }, { status: 400 });
+      }
+
+      const update = await prisma.divisionDocumentFolderFile.update({
+         where: {
+            id: id
+         },
+         data: {
+            name,
+         }
+      })
+
+
+
+      return NextResponse.json({ success: true, message: "Berhasil mengubah nama item" }, { status: 200 });
+   } catch (error) {
+      console.log(error);
+      return NextResponse.json({ success: false, message: "Gagal mengubah nama item, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+};
+
+
+// DELETE ITEM
+export async function DELETE(request: Request) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+      const data = await request.json()
+
+      for (let i = 0; i < data.length; i++) {
+         const id = data[i].id;
+         const cekFile = await prisma.divisionDocumentFolderFile.update({
+            where: {
+               id: id
+            },
+            data: {
+               isActive: false
+            }
+         })
+      }
+
+
+      return NextResponse.json({ success: true, message: "Berhasil menghapus item" }, { status: 200 });
+   } catch (error) {
+      console.log(error);
+      return NextResponse.json({ success: false, message: "Gagal menghapus item, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
 };
\ No newline at end of file
diff --git a/src/module/document/lib/api_document.ts b/src/module/document/lib/api_document.ts
index d58e308..afc3e86 100644
--- a/src/module/document/lib/api_document.ts
+++ b/src/module/document/lib/api_document.ts
@@ -1,4 +1,4 @@
-import { IFormFolder } from "./type_document";
+import { IFormEditItem, IFormFolder } from "./type_document";
 
 export const funGetAllDocument = async (path?: string) => {
    const response = await fetch(`/api/document${(path) ? path : ''}`, { next: { tags: ['document'] } });
@@ -18,4 +18,29 @@ export const funCreateFolder = async (data: IFormFolder) => {
       body: JSON.stringify(data),
    });
    return await response.json().catch(() => null);
+};
+
+export const funRenameDocument = async (data: IFormEditItem) => {
+   if (data.name == "")
+      return { success: false, message: 'Nama item tidak boleh kosong' }
+
+   const response = await fetch("/api/document", {
+      method: "PUT",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};
+
+export const funDeleteDocument = async (data: []) => {
+   const response = await fetch("/api/document", {
+      method: "DELETE",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
 };
\ No newline at end of file
diff --git a/src/module/document/lib/type_document.ts b/src/module/document/lib/type_document.ts
index a798709..9f2dbb0 100644
--- a/src/module/document/lib/type_document.ts
+++ b/src/module/document/lib/type_document.ts
@@ -14,4 +14,13 @@ export interface IFormFolder {
    name: string;
    path: string;
    idDivision: string
+}
+
+
+export interface IFormEditItem {
+   id: string
+   name: string
+   path: string
+   idDivision: string
+   extension: string
 }
\ No newline at end of file
diff --git a/src/module/document/ui/drawer_cut_documents.tsx b/src/module/document/ui/drawer_cut_documents.tsx
index 96c0728..7677160 100644
--- a/src/module/document/ui/drawer_cut_documents.tsx
+++ b/src/module/document/ui/drawer_cut_documents.tsx
@@ -2,39 +2,63 @@ import { WARNA } from '@/module/_global';
 import { Box, Button, Divider, Flex, Grid, Group, Modal, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
-import { FcFolder } from 'react-icons/fc';
-const dataDocuments = [
-  {
-    id: 1,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={40} />
-  },
-  {
-    id: 2,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={40} />
-  },
-  {
-    id: 3,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={40} />
-  },
-]
+import { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc';
+import { funCreateFolder, funGetAllDocument } from '../lib/api_document';
+import { useParams } from 'next/navigation';
+import { IDataDocument } from '../lib/type_document';
+import { useShallowEffect } from '@mantine/hooks';
 
 export default function DrawerCutDocuments() {
   const [opened, setOpened] = useState(false);
-  function onCreate(val: boolean) {
-    if (val) {
-      toast.success("Sukses! Membuat Folder");
+  const param = useParams<{ id: string }>()
+  const [path, setPath] = useState('home')
+  const [dataDocument, setDataDocument] = useState<IDataDocument[]>([])
+  const [valName, setValName] = useState('')
+
+
+  async function onCreateFolder() {
+    try {
+      const res = await funCreateFolder({
+        name: valName,
+        path: path,
+        idDivision: param.id
+      })
+      if (res.success) {
+        getOneData()
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal membuat folder baru, coba lagi nanti");
     }
+
     setOpened(false)
   }
+
+
+  async function getOneData() {
+    try {
+      const respon = await funGetAllDocument("?division=" + param.id + "&path=" + path);
+      if (respon.success) {
+        setDataDocument(respon.data);
+      } else {
+        toast.error(respon.message);
+      }
+
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan item, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneData()
+  }, [param.id, path])
+
   return (
     <Box>
-      <Box h={60} pos={"fixed"} bottom={0} w={{base: "92%", md: "94%"}} style={{
+      <Box h={60} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{
         zIndex: 999
       }}>
         <Grid justify='center'>
@@ -42,34 +66,42 @@ export default function DrawerCutDocuments() {
             <Button variant="subtle" fullWidth color={WARNA.biruTua} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button>
           </Grid.Col>
           <Grid.Col span={6}>
-            <Button variant="filled" fullWidth  color={WARNA.biruTua} radius={"xl"}>PIDAH</Button>
+            <Button variant="filled" fullWidth color={WARNA.biruTua} radius={"xl"}>PINDAH</Button>
           </Grid.Col>
         </Grid>
       </Box>
       <Box p={10} pb={60}>
-          {dataDocuments.map((v, i) => {
-            return (
-              <Box key={i}>
-                <Box mt={10} mb={10}>
-                  <Grid align='center'>
-                    <Grid.Col span={12}>
-                      <Group gap={20}>
-                        <Box>
-                          {v.icon}
-                        </Box>
-                        <Flex direction={'column'}>
-                          <Text>{v.name}</Text>
-                          <Text fz={10}>{v.date}</Text>
-                        </Flex>
-                      </Group>
-                    </Grid.Col>
-                  </Grid>
-                </Box>
-                <Divider size="xs" />
+        {dataDocument.map((v, i) => {
+          return (
+            <Box key={i}>
+              <Box mt={10} mb={10} onClick={() => setPath(v.id)}>
+                <Grid align='center'>
+                  <Grid.Col span={12}>
+                    <Group gap={20}>
+                      <Box>
+                        {
+                          (v.category == "FOLDER") ?
+                            <FcFolder size={60} /> :
+                            (v.extension == "pdf" || v.extension == "csv") ?
+                              <FcDocument size={60} /> :
+                              <FcImageFile size={60} />
+                        }
+                      </Box>
+                      <Flex direction={'column'}>
+                        <Text>{(v.category == "FOLDER") ? v.name : v.name + '.' + v.extension}</Text>
+                      </Flex>
+                    </Group>
+                  </Grid.Col>
+                </Grid>
               </Box>
-            )
-          })}
+              <Divider size="xs" />
+            </Box>
+          )
+        })}
       </Box>
+
+
+
       <Modal styles={{
         body: {
           borderRadius: 20
@@ -92,7 +124,9 @@ export default function DrawerCutDocuments() {
               }}
               size="md"
               radius={10}
-              placeholder="Buat Folder Baru"
+              placeholder="Nama folder"
+              value={valName}
+              onChange={(e) => setValName(e.target.value)}
             />
           </Box>
           <Grid mt={40}>
@@ -100,7 +134,7 @@ export default function DrawerCutDocuments() {
               <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpened(false)}>Batalkan</Button>
             </Grid.Col>
             <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onCreate(true)}>Membuat</Button>
+              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={() => onCreateFolder()}>Membuat</Button>
             </Grid.Col>
           </Grid>
         </Box>
diff --git a/src/module/document/ui/drawer_menu_document_division.tsx b/src/module/document/ui/drawer_menu_document_division.tsx
index 4befdac..01165c0 100644
--- a/src/module/document/ui/drawer_menu_document_division.tsx
+++ b/src/module/document/ui/drawer_menu_document_division.tsx
@@ -29,17 +29,17 @@ export default function DrawerMenuDocumentDivision() {
   async function onCreateFolder() {
     try {
       const res = await funCreateFolder(bodyFolder)
-      if (res.success) {
-        refresh.set(true)
-        setOpenModal(false)
-        setOpenDrawerDocument(false)
-      } else {
-        toast.error(res.message);
+      if (!res.success) {
+        toast.error(res.message)
       }
     } catch (error) {
       console.error(error);
       toast.error("Gagal membuat folder baru, coba lagi nanti");
     }
+
+    refresh.set(true)
+    setOpenModal(false)
+    setOpenDrawerDocument(false)
   }
 
   return (
diff --git a/src/module/document/ui/drawer_more.tsx b/src/module/document/ui/drawer_more.tsx
index 67a02e5..9db2302 100644
--- a/src/module/document/ui/drawer_more.tsx
+++ b/src/module/document/ui/drawer_more.tsx
@@ -32,9 +32,14 @@ export default function DrawerMore() {
           </Flex>
         </SimpleGrid>
       </Stack>
+
+
       <LayoutDrawer opened={isCut} onClose={() => setIsCut(false)} title={'Pilih Lokasi Pemindahan'} size="lg">
         <DrawerCutDocuments />
       </LayoutDrawer>
+
+
+      
       <LayoutDrawer opened={isCopy} onClose={() => setIsCopy(false)} title={'Pilih Lokasi Salin'} size="lg">
         <DrawerCopyDocuments />
       </LayoutDrawer>
diff --git a/src/module/document/ui/navbar_document_division.tsx b/src/module/document/ui/navbar_document_division.tsx
index a40d36e..0f0a319 100644
--- a/src/module/document/ui/navbar_document_division.tsx
+++ b/src/module/document/ui/navbar_document_division.tsx
@@ -4,11 +4,11 @@ import { ActionIcon, Box, Button, Checkbox, Divider, Flex, Grid, Group, Modal, S
 import React, { useState } from 'react';
 import { HiMenu } from 'react-icons/hi';
 import { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc';
-import { BsDownload } from 'react-icons/bs';
+import { BsDownload, BsListCheck } from 'react-icons/bs';
 import { AiOutlineDelete } from 'react-icons/ai';
 import { CgRename } from "react-icons/cg";
 import { LuShare2 } from 'react-icons/lu';
-import { MdOutlineMoreHoriz } from 'react-icons/md';
+import { MdClose, MdOutlineMoreHoriz } from 'react-icons/md';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import toast from 'react-hot-toast';
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
@@ -16,13 +16,13 @@ import DrawerMenuDocumentDivision from './drawer_menu_document_division';
 import DrawerMore from './drawer_more';
 import { funGetDivisionById } from '@/module/division_new';
 import { useShallowEffect } from '@mantine/hooks';
-import { funGetAllDocument } from '../lib/api_document';
+import { funDeleteDocument, funGetAllDocument, funRenameDocument } from '../lib/api_document';
 import { IDataDocument } from '../lib/type_document';
 import { useHookstate } from '@hookstate/core';
 import { globalRefreshDocument } from '../lib/val_document';
+import { RiListCheck } from 'react-icons/ri';
 
 export default function NavbarDocumentDivision() {
-  const [isChecked, setIsChecked] = useState(false);
   const router = useRouter()
   const param = useParams<{ id: string }>()
   const [name, setName] = useState('')
@@ -35,22 +35,109 @@ export default function NavbarDocumentDivision() {
   const path = searchParams.get('path')
   const [dataDocument, setDataDocument] = useState<IDataDocument[]>([])
   const refresh = useHookstate(globalRefreshDocument)
+  const [selectedFiles, setSelectedFiles] = useState<any>([])
+  const [selectAll, setSelectAll] = useState(false)
+  const [dariSelectAll, setDariSelectAll] = useState(false)
+  const [bodyRename, setBodyRename] = useState({
+    id: '',
+    name: '',
+    path: '',
+    idDivision: param.id,
+    extension: ''
+  })
+
+  const handleCheckboxChange = (index: number) => {
+    setDariSelectAll(false)
+    if (selectedFiles.some((i: any) => i.id == dataDocument[index].id)) {
+      setSelectedFiles(selectedFiles.filter((i: any) => i.id != dataDocument[index].id))
+    } else {
+      setSelectedFiles([
+        ...selectedFiles,
+        {
+          id: dataDocument[index].id,
+          name: dataDocument[index].name,
+          path: dataDocument[index].path,
+          extension: dataDocument[index].extension
+        }
+      ])
+    }
 
-  const handleCheckboxChange = () => {
-    setIsChecked(!isChecked);
   };
 
-
-  function onTrue(val: boolean) {
-    if (val) {
-      toast.success("Sukses! Data dihapus");
+  function cek() {
+    if (selectedFiles.length == dataDocument.length) {
+      setSelectAll(true)
+    } else {
+      setSelectAll(false)
     }
+  }
+
+  const handleSelectAll = () => {
+    if (!selectAll) {
+      setDariSelectAll(false)
+      for (let index = 0; index < dataDocument.length; index++) {
+        if (!selectedFiles.some((i: any) => i.id == dataDocument[index].id)) {
+          const newArr = {
+            id: dataDocument[index].id,
+            name: dataDocument[index].name,
+            path: dataDocument[index].path,
+            extension: dataDocument[index].extension
+          }
+          setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr])
+        }
+      }
+    } else {
+      setDariSelectAll(true)
+      setSelectedFiles([]);
+    }
+
+  };
+
+  const handleBatal = () => {
+    setSelectedFiles([])
+    setSelectAll(false)
+    setDariSelectAll(false)
+  }
+
+
+  async function onConfirmDelete(val: boolean) {
+    if (val) {
+      try {
+        const respon = await funDeleteDocument(selectedFiles)
+        if (respon.success) {
+          getOneData()
+        } else {
+          toast.error(respon.message)
+        }
+      } catch (error) {
+        console.log(error)
+        toast.error("Gagal menghapus item, coba lagi nanti")
+      }
+
+      handleBatal()
+    }
+
     setIsDelete(false)
   }
-  function onEdit(val: boolean) {
-    if (val) {
-      toast.success("Sukses! Edit Data");
+
+
+
+  async function onRenameSubmit() {
+    try {
+      const res = await funRenameDocument(bodyRename)
+      if (res.success) {
+        getOneData()
+
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.log(error)
+      toast.error("Gagal mengganti nama item, coba lagi nanti")
     }
+
+    setSelectedFiles([])
+    setDariSelectAll(false)
     setRename(false)
   }
 
@@ -72,7 +159,7 @@ export default function NavbarDocumentDivision() {
 
     } catch (error) {
       console.error(error);
-      toast.error("Gagal mendapatkan divisi, coba lagi nanti");
+      toast.error("Gagal mendapatkan item, coba lagi nanti");
     }
   }
 
@@ -81,21 +168,48 @@ export default function NavbarDocumentDivision() {
     setOpen(false)
   }
 
+  useShallowEffect(() => {
+    cek()
+  }, [selectedFiles])
+
   useShallowEffect(() => {
     getOneData()
     resetRefresh()
   }, [param.id, path, refresh.get()])
 
+
+  function onChooseRename() {
+    setBodyRename({
+      ...bodyRename,
+      id: selectedFiles[0].id,
+      name: selectedFiles[0].name,
+      path: selectedFiles[0].path,
+      extension: selectedFiles[0].extension,
+
+    })
+    setRename(true)
+  }
+
   return (
     <Box>
-      {isChecked && (
+      {(selectedFiles.length > 0 || dariSelectAll) && (
         <>
           <Box h={90} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} top={0} style={{
             zIndex: 999,
           }}>
             <Flex justify={'space-between'} ml={30} mr={30} align={'center'} h={"100%"}>
-              <Text c={'white'}>Dibatalkan</Text>
-              <Text c={'white'}>Pilih Semua</Text>
+              <ActionIcon variant="transparent" aria-label="Settings" onClick={() => handleBatal()}>
+                <MdClose size={25} color='white' />
+              </ActionIcon>
+              <Text fz={15} c={'white'}>{(selectedFiles.length > 0) ? selectedFiles.length + " item terpilih" : "Pilih Item"}</Text>
+              <ActionIcon variant="transparent" aria-label="Settings" onClick={() => handleSelectAll()}>
+                {
+                  (selectAll) ?
+                    <RiListCheck size={25} color='white' /> :
+                    <BsListCheck size={25} color='white' />
+                }
+
+              </ActionIcon>
             </Flex>
           </Box>
           <Box h={70} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} bottom={0} style={{
@@ -104,24 +218,28 @@ export default function NavbarDocumentDivision() {
             <Flex justify={"center"} align={"center"} h={"100%"} w={"100%"}>
               <SimpleGrid cols={{ base: 5, sm: 5, lg: 5 }}>
                 <Flex justify={'center'} align={'center'} direction={'column'}>
-                  <BsDownload size={20} color='white' />
-                  <Text fz={12} c={'white'}>Unduh</Text>
+                  <BsDownload size={20} color={(selectedFiles.length > 0) ? 'white' : 'grey'} />
+                  <Text fz={12} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Unduh</Text>
                 </Flex>
                 <Flex onClick={() => setIsDelete(true)} justify={'center'} align={'center'} direction={'column'}>
-                  <AiOutlineDelete size={20} color='white' />
-                  <Text fz={12} c={'white'}>Hapus</Text>
+                  <AiOutlineDelete size={20} color={(selectedFiles.length > 0) ? 'white' : 'grey'} />
+                  <Text fz={12} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Hapus</Text>
                 </Flex>
-                <Flex onClick={() => setRename(true)} justify={'center'} align={'center'} direction={'column'}>
-                  <CgRename size={20} color='white' />
-                  <Text fz={12} c={'white'}>Ganti Name</Text>
+                <Flex onClick={() => {
+                  if (selectedFiles.length == 1) {
+                    onChooseRename()
+                  }
+                }} justify={'center'} align={'center'} direction={'column'}>
+                  <CgRename size={20} color={(selectedFiles.length == 1) ? 'white' : 'grey'} />
+                  <Text fz={12} c={(selectedFiles.length == 1) ? 'white' : 'grey'}>Ganti Nama</Text>
                 </Flex>
                 <Flex onClick={() => setShare(true)} justify={'center'} align={'center'} direction={'column'}>
-                  <LuShare2 size={20} color='white' />
-                  <Text fz={12} c={'white'}>Bagikan</Text>
+                  <LuShare2 size={20} color={(selectedFiles.length > 0) ? 'white' : 'grey'} />
+                  <Text fz={12} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Bagikan</Text>
                 </Flex>
                 <Flex onClick={() => setMore(true)} justify={'center'} align={'center'} direction={'column'}>
-                  <MdOutlineMoreHoriz size={20} color='white' />
-                  <Text fz={12} c={'white'}>Lainnya</Text>
+                  <MdOutlineMoreHoriz size={20} color={(selectedFiles.length > 0) ? 'white' : 'grey'} />
+                  <Text fz={12} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Lainnya</Text>
                 </Flex>
               </SimpleGrid>
             </Flex>
@@ -136,9 +254,12 @@ export default function NavbarDocumentDivision() {
           </ActionIcon>
         }
       />
+
+
       <Box>
         <Box p={20} pb={60}>
           {dataDocument.map((v, i) => {
+            const isSelected = selectedFiles.some((i: any) => i?.id == v.id);
             return (
               <Box key={i}>
                 <Box mt={10} mb={10}>
@@ -171,8 +292,8 @@ export default function NavbarDocumentDivision() {
                           color="teal"
                           radius="lg"
                           size="md"
-                          checked={isChecked}
-                          onChange={handleCheckboxChange}
+                          checked={isSelected}
+                          onChange={() => handleCheckboxChange(i)}
                         />
                       </Group>
                     </Grid.Col>
@@ -192,9 +313,18 @@ export default function NavbarDocumentDivision() {
       </LayoutDrawer>
 
 
+
+      {/* MODAL KONFIRMASI DELETE */}
       <LayoutModal opened={isDelete} onClose={() => setIsDelete(false)}
-        description="Apakah Anda yakin ingin menghapus data?"
-        onYes={(val) => { onTrue(val) }} />
+        description="Apakah Anda yakin ingin menghapus item?"
+        onYes={(val) => {
+          onConfirmDelete(val)
+        }} />
+
+
+
+
+      {/* MODAL RENAME */}
       <Modal styles={{
         body: {
           borderRadius: 20
@@ -205,7 +335,7 @@ export default function NavbarDocumentDivision() {
         }
       }} opened={rename} onClose={() => setRename(false)} centered withCloseButton={false}>
         <Box p={20}>
-          <Text ta={"center"} fw={"bold"}>Edit Folder</Text>
+          <Text ta={"center"} fw={"bold"}>Ganti Nama Item</Text>
           <Box mt={20} mb={20}>
             <TextInput
               styles={{
@@ -217,7 +347,9 @@ export default function NavbarDocumentDivision() {
               }}
               size="md"
               radius={10}
-              placeholder="Buat Folder Baru"
+              placeholder="Nama item"
+              value={bodyRename.name}
+              onChange={(e) => setBodyRename({ ...bodyRename, name: e.target.value })}
             />
           </Box>
           <Grid mt={40}>
@@ -225,11 +357,14 @@ export default function NavbarDocumentDivision() {
               <Button variant="subtle" fullWidth color='#969494' onClick={() => setRename(false)}>Batalkan</Button>
             </Grid.Col>
             <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onEdit(true)}>Edit</Button>
+              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onRenameSubmit()}>Simpan</Button>
             </Grid.Col>
           </Grid>
         </Box>
       </Modal>
+
+
+
       <LayoutDrawer opened={share} title={'Bagikan'} onClose={() => setShare(false)} size='lg'>
         <Box pt={10}>
           <Select