fix: pdf viewer

Deskripsi:
- tampilan modal viewer

No Issues

src/module/_global/layout/layout_modal_view_file.tsx

@@ -7,7 +7,7 @@ import toast from 'react-hot-toast';
 import { funReadPdf } from '../fun/read_pdf';
 const PdfToImage = dynamic(() => import('./../components/pdf_viewer').then((mod) => mod.default), { ssr: false });
 
-export default function LayoutModal({ opened, onClose, extension, fitur, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, file: string }) {
+export default function LayoutModal({ opened, onClose, extension, fitur, name, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, name?: string, file: string }) {
    const [zoom, setZoom] = useState(1)
    const [loadingPdf, setLoadingPdf] = useState(true)
    const [dataPdf, setDataPdf] = useState([])
@@ -46,17 +46,28 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
    }, [file, extension])
 
    return (
-      <Modal styles={{
+      <>
+         <Modal.Root styles={{
             content: {
                maxWidth: 550,
             }
-      }} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen>
+         }} opened={opened} onClose={onClose} centered closeOnClickOutside={false} fullScreen>
+            <Modal.Overlay />
+            <Modal.Content>
+               <Modal.Header py={0}>
+                  <Modal.Title>
+                     <Text lineClamp={1}>{name}</Text>
+                  </Modal.Title>
+                  <Modal.CloseButton />
+               </Modal.Header>
+               <Modal.Body pl={0} pr={0}>
                   <Box
                      pos="sticky"
                      top={60}
-            right={10}
+                     right={0}
                      w={"100%"}
                      pb={10}
+                     px={10}
 
                      style={{
                         background: 'white',
@@ -84,6 +95,8 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
                      transform: `scale(${zoom})`,
                      transformOrigin: 'center',
                      maxWidth: rem(550),
+                     paddingLeft: 10,
+                     paddingRight: 10
                   }}>
                      <div style={{ transform: `scale(${zoom})`, transformOrigin: 'center' }}>
                         {
@@ -119,7 +132,10 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
                         }
                      </div>
                   </Box>
-      </Modal>
+               </Modal.Body>
+            </Modal.Content>
+         </Modal.Root>
+      </>
    );
 }
 

src/module/banner/ui/list_banner.tsx

@@ -21,6 +21,7 @@ function ListBanner() {
   const [openDrawer, setOpenDrawer] = useState(false);
   const [idDataStorage, setIdDataStorage] = useState('')
   const [isExtension, setExtension] = useState('')
+  const [isName, setName] = useState('')
   const [loading, setLoading] = useState(true)
   const [isData, setData] = useState<IDataBanner[]>([])
   const [idData, setIdData] = useState('')
@@ -109,6 +110,7 @@ function ListBanner() {
                       setIdDataStorage(v.image);
                       setExtension(v.extension);
                       setOpenDrawer(true)
+                      setName(v.title)
                     }
                     }
                       style={{
@@ -194,7 +196,7 @@ function ListBanner() {
           }
         }} />
 
-      <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />
+      <LayoutModalViewFile name={isName} opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />
     </Box>
   );
 }

src/module/document/ui/navbar_document_division.tsx

@@ -923,6 +923,7 @@ export default function NavbarDocumentDivision() {
         file={idStorage}
         extension={isExtension}
         fitur="dokumen"
+        name={nameFileFull}
       />
     </Box>
   );

src/module/project/ui/list_file_detail_project.tsx

@@ -279,7 +279,7 @@ export default function ListFileDetailProject() {
             }
           }} />
 
-        <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idStorage} extension={isExtension} fitur='project' />
+        <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} name={nameData} file={idStorage} extension={isExtension} fitur='project' />
       </Box>
     </>
   );

src/module/task/ui/detail_list_file_task.tsx

@@ -259,7 +259,7 @@ export default function ListFileDetailTask() {
                }
             }} />
 
-         <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
+         <LayoutModalViewFile name={nameData} opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
       </Box>
    )
 }