FRONTEND/src/pages/Document/Document.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react'
 import { get } from '@/rtk/helpers/apiService'
 import { deleteDocument, listDocument } from '@/api/Admin'
 import { Xdelete } from '@/rtk/helpers/CRUD'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/rtk/store'
 
 import { Anchor, Box, Button, Dialog, Group, Loader, Text } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
@@ -20,7 +22,6 @@ import ModalFileDocument from './ModalFileDocument'
 import classes from './Document.module.css'
 import ModalAddDocument from './ModalAddDocument'
 import ModalEditDocument from './ModalEditDocument'
-import { checkPermissions } from '@/utils/checkRoles'
 
 interface TDocument {
   id: number
@@ -38,6 +39,8 @@ type RequestPagination = {
 }
 
 const Document = () => {
+  const user = useSelector((state: RootState) => state.authentication)
+
   const [loader, setLoader] = useState<boolean>(false)
   const [rows, setRows] = useState<RequestPagination>({
     data: [],
@@ -91,42 +94,68 @@ const Document = () => {
     }
   }
 
-  const getFileTypeIcon = (uri: string) => {
+  const getFileTypeIcon = (row: TDocument) => {
+    const uri = row?.uri
     if (!uri) return null
 
     const extension = uri.split('.').pop()?.toLowerCase()
 
-    if (['doc', 'docx'].includes(extension!)) {
-      return <IconFileTypeDoc style={{ color: '#1e62c1' }} />
+    if (['doc'].includes(extension!)) {
+      return (
+        <a
+          href={`${import.meta.env.VITE_BACKEND_URL}${uri}`}
+          download="Document Download"
+          target="_self"
+        >
+          <IconFileTypeDoc style={{ color: '#1e62c1' }} />
+        </a>
+      )
     }
 
     if (['xls', 'xlsx'].includes(extension!)) {
-      return <IconFileTypeXls style={{ color: '#0e864b' }} />
+      return (
+        <a
+          href={`${import.meta.env.VITE_BACKEND_URL}${uri}`}
+          download="Document Download"
+          target="_self"
+        >
+          <IconFileTypeXls style={{ color: '#0e864b' }} />
+        </a>
+      )
     }
 
-    return <IconFileTypePdf style={{ color: '#ff1b0e' }} />
+    if (['docx'].includes(extension!)) {
+      return (
+        <IconFileTypeDoc
+          onClick={() => {
+            openModalFile()
+            setSelectDataRow(row)
+          }}
+          style={{ color: '#1e62c1' }}
+        />
+      )
+    }
+
+    return (
+      <IconFileTypePdf
+        onClick={() => {
+          openModalFile()
+          setSelectDataRow(row)
+        }}
+        style={{ color: '#ff1b0e' }}
+      />
+    )
   }
 
   const columns = [
-    {
-      name: 'id',
-      size: '5%',
-      header: 'ID',
-      render: (row: TDocument) => {
-        return <Box>{row?.id ? row.id : ''}</Box>
-      },
-    },
     {
       name: 'title',
       size: '50%',
       header: 'Title',
-      render: (row: TDocument) => {
-        return <Text ta="start">{row?.title}</Text>
-      },
     },
     {
       name: 'uri',
-      size: '40%',
+      size: '45%',
       header: 'URI',
       render: (row: TDocument) => {
         return (
@@ -135,16 +164,12 @@ const Document = () => {
               <Box
                 w="fit-content"
                 style={{ cursor: 'pointer' }}
-                onClick={() => {
-                  setSelectDataRow(row)
-                  openModalFile()
-                }}
-                title={`File ${row?.uri
+                title={`File .${row?.uri
                   .split('.')
                   .pop()
                   ?.toLowerCase()} detail`}
               >
-                {getFileTypeIcon(row?.uri)}
+                {getFileTypeIcon(row)}
               </Box>
             ) : (
               <Anchor
@@ -165,32 +190,32 @@ const Document = () => {
       size: '5%',
       header: 'Action',
       render: (row: TDocument) => {
-        if (checkPermissions('admin')) {
-          return (
-            <Box className={classes.optionIcon}>
-              <IconEdit
-                className={classes.editIcon}
-                onClick={() => {
-                  setSelectDataRow(row)
-                  openModalEdit()
-                }}
-                width={20}
-                height={20}
-              />
-              <IconX
-                className={classes.deleteIcon}
-                onClick={() => {
-                  setOpenedDialogDelete(true)
-                  setSelectDataRow(row)
-                }}
-                width={20}
-                height={20}
-              />
-            </Box>
-          )
+        if (!user.user.user.permission.includes('admin')) {
+          return ''
         }
 
-        return <Box></Box>
+        return (
+          <Box className={classes.optionIcon}>
+            <IconEdit
+              className={classes.editIcon}
+              onClick={() => {
+                setSelectDataRow(row)
+                openModalEdit()
+              }}
+              width={20}
+              height={20}
+            />
+            <IconX
+              className={classes.deleteIcon}
+              onClick={() => {
+                setOpenedDialogDelete(true)
+                setSelectDataRow(row)
+              }}
+              width={20}
+              height={20}
+            />
+          </Box>
+        )
       },
     },
   ]
@@ -203,7 +228,7 @@ const Document = () => {
           Documents
         </h3>
 
-        {checkPermissions('admin') ? (
+        {user.user.user.permission.includes('admin') ? (
           <Button onClick={() => openModalAdd()} disabled={loader}>
             + Add
           </Button>

FRONTEND/src/pages/Document/ModalEditDocument.tsx

@@ -9,6 +9,7 @@ import {
   FileInput,
   Badge,
   TextInput,
+  Group,
 } from '@mantine/core'
 
 import { update } from '@/rtk/helpers/CRUD'
@@ -113,15 +114,51 @@ const ModalEditDocument = ({
 
     const extension = uri.split('.').pop()?.toLowerCase()
 
-    if (['doc', 'docx'].includes(extension!)) {
-      return <IconFileTypeDoc style={{ color: '#1e62c1' }} />
+    if (['doc'].includes(extension!)) {
+      return (
+        <a
+          href={`${import.meta.env.VITE_BACKEND_URL}${uri}`}
+          download="Document Download"
+          target="_self"
+        >
+          <IconFileTypeDoc style={{ color: '#1e62c1' }} />
+        </a>
+      )
     }
 
     if (['xls', 'xlsx'].includes(extension!)) {
-      return <IconFileTypeXls style={{ color: '#0e864b' }} />
+      return (
+        <a
+          href={`${import.meta.env.VITE_BACKEND_URL}${uri}`}
+          download="Document Download"
+          target="_self"
+        >
+          <IconFileTypeXls style={{ color: '#0e864b' }} />
+        </a>
+      )
     }
 
-    return <IconFileTypePdf style={{ color: '#ff1b0e' }} />
+    if (['docx'].includes(extension!)) {
+      return (
+        <IconFileTypeDoc
+          onClick={() => {
+            openModalFile()
+            setSelectDataFileRow(selectDataRow)
+          }}
+          style={{ color: '#1e62c1' }}
+        />
+      )
+    }
+
+    return (
+      <IconFileTypePdf
+        onClick={() => {
+          openModalFile()
+          setSelectDataFileRow(selectDataRow)
+        }}
+        style={{ color: '#ff1b0e' }}
+      />
+    )
   }
 
   const resetForm = () => {
@@ -179,7 +216,7 @@ const ModalEditDocument = ({
             {form.values.file ? (
               ''
             ) : (
-              <Box
+              <Group
                 w="fit-content"
                 style={{ cursor: 'pointer' }}
                 mb={'md'}
@@ -187,13 +224,11 @@ const ModalEditDocument = ({
                   .split('.')
                   .pop()
                   ?.toLowerCase()} detail`}
-                onClick={() => {
-                  openModalFile()
-                  setSelectDataFileRow(selectDataRow)
-                }}
               >
                 {getFileTypeIcon(form.values.uri)}
-              </Box>
+
+                <Text>.{form.values.uri.split('.').pop()?.toLowerCase()}</Text>
+              </Group>
             )}
           </Box>
         ) : (