feat(file): complete uploading and previewing file

src/App.tsx

@@ -3,7 +3,7 @@ import { NavigateFunction, useNavigate, useLocation } from 'react-router-dom';
 import { AppSkeleton } from '@components/common';
 import { MAIN_MENU, SUB_MENU } from '@constants';
 import { AppLayout, AuthLayout } from '@layouts';
-import { AuthPage, HomePage, TestPreviewPage } from '@pages';
+import { AuthPage, HomePage } from '@pages';
 import { useUserStore } from '@states/common';
 
 export default function App() {
@@ -84,12 +84,6 @@ export default function App() {
           name: SUB_MENU.logout,
           onClick() {}
           //onClick: () => authService.logout().then(() => getData())
-        },
-        {
-          type: 'sub-item',
-          path: '/test-preview',
-          name: 'Test Document Preview',
-          element: <TestPreviewPage />
         }
       ]}
     />

src/components/order/UploadDocumentForm.tsx

@@ -1,17 +1,19 @@
 import { Button } from '@material-tailwind/react';
+import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer';
 import { useFileStore } from '@states/home';
 import { useOrderWorkflowStore } from '@states/order';
 
 // Tan's first-task in here.
 export function UploadDocumentForm() {
   const { setOrderStep } = useOrderWorkflowStore();
   const { fileTarget } = useFileStore();
-  console.log(fileTarget);
 
   return (
     <>
       <div>UploadDocumentForm</div>
-      {fileTarget && <img src={fileTarget.url} alt='docs' width='30%' />}
+      {fileTarget && (
+        <DocViewer pluginRenderers={DocViewerRenderers} documents={[{ uri: fileTarget.url }]} />
+      )}
       <Button onClick={() => setOrderStep(2)}>Save</Button>
     </>
   );

src/pages/HomePage.tsx

@@ -29,7 +29,7 @@ export function HomePage() {
           <Slides slides={slideData} />
         </div>
         <div
-          className='flex items-center justify-between bg-blue/1 rounded-lg p-4 mb-16 lg:mb-24 lg:h-[120px] lg:px-6'
+          className='flex items-center justify-between bg-blue/1 rounded-lg p-4 mb-16 lg:mb-24 lg:h-[120px] lg:px-6 cursor-pointer'
           onClick={openChooseFileBox}
         >
           <div className='flex items-center gap-4'>

src/pages/index.ts

@@ -4,4 +4,3 @@
 
 export * from './AuthPage';
 export * from './HomePage';
-export * from './TestPreviewPage';