From c68cf4eb6d4d2d6ea67d51bb543c6ad08dfb97d0 Mon Sep 17 00:00:00 2001
From: SD-Chris <chris.richmond@sysdrive.net>
Date: Thu, 3 Jul 2025 08:36:49 -0500
Subject: [PATCH] Copied pages from frontend/src/pages/scanned_documents to
 frontend/src/pages/claims to assist with renaming and relabeling all assets

---
 .../pages/claims/[scanned_documentsId].tsx    | 185 ++++++++++++++++++
 .../pages/claims/scanned_documents-edit.tsx   | 183 +++++++++++++++++
 .../pages/claims/scanned_documents-list.tsx   | 171 ++++++++++++++++
 .../pages/claims/scanned_documents-new.tsx    | 140 +++++++++++++
 .../pages/claims/scanned_documents-table.tsx  | 174 ++++++++++++++++
 .../pages/claims/scanned_documents-view.tsx   | 132 +++++++++++++
 6 files changed, 985 insertions(+)
 create mode 100644 frontend/src/pages/claims/[scanned_documentsId].tsx
 create mode 100644 frontend/src/pages/claims/scanned_documents-edit.tsx
 create mode 100644 frontend/src/pages/claims/scanned_documents-list.tsx
 create mode 100644 frontend/src/pages/claims/scanned_documents-new.tsx
 create mode 100644 frontend/src/pages/claims/scanned_documents-table.tsx
 create mode 100644 frontend/src/pages/claims/scanned_documents-view.tsx

diff --git a/frontend/src/pages/claims/[scanned_documentsId].tsx b/frontend/src/pages/claims/[scanned_documentsId].tsx
new file mode 100644
index 0000000..401d182
--- /dev/null
+++ b/frontend/src/pages/claims/[scanned_documentsId].tsx
@@ -0,0 +1,185 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import {
+  update,
+  fetch,
+} from '../../stores/scanned_documents/scanned_documentsSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditScanned_documents = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    file_name: '',
+
+    file: [],
+
+    uploaded_at: new Date(),
+
+    uploaded_by: null,
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { scanned_documents } = useAppSelector(
+    (state) => state.scanned_documents,
+  );
+
+  const { scanned_documentsId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: scanned_documentsId }));
+  }, [scanned_documentsId]);
+
+  useEffect(() => {
+    if (typeof scanned_documents === 'object') {
+      setInitialValues(scanned_documents);
+    }
+  }, [scanned_documents]);
+
+  useEffect(() => {
+    if (typeof scanned_documents === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = scanned_documents[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [scanned_documents]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: scanned_documentsId, data }));
+    await router.push('/scanned_documents/scanned_documents-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit scanned_documents')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit scanned_documents'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='FileName'>
+                <Field name='file_name' placeholder='FileName' />
+              </FormField>
+
+              <FormField>
+                <Field
+                  label='File'
+                  color='info'
+                  icon={mdiUpload}
+                  path={'scanned_documents/file'}
+                  name='file'
+                  id='file'
+                  schema={{
+                    size: undefined,
+                    formats: undefined,
+                  }}
+                  component={FormFilePicker}
+                ></Field>
+              </FormField>
+
+              <FormField label='UploadedAt'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.uploaded_at
+                      ? new Date(
+                          dayjs(initialValues.uploaded_at).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, uploaded_at: date })
+                  }
+                />
+              </FormField>
+
+              <FormField label='UploadedBy' labelFor='uploaded_by'>
+                <Field
+                  name='uploaded_by'
+                  id='uploaded_by'
+                  component={SelectField}
+                  options={initialValues.uploaded_by}
+                  itemRef={'users'}
+                  showField={'firstName'}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() =>
+                    router.push('/scanned_documents/scanned_documents-list')
+                  }
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditScanned_documents.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_SCANNED_DOCUMENTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditScanned_documents;
diff --git a/frontend/src/pages/claims/scanned_documents-edit.tsx b/frontend/src/pages/claims/scanned_documents-edit.tsx
new file mode 100644
index 0000000..21caf32
--- /dev/null
+++ b/frontend/src/pages/claims/scanned_documents-edit.tsx
@@ -0,0 +1,183 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import {
+  update,
+  fetch,
+} from '../../stores/scanned_documents/scanned_documentsSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditScanned_documentsPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    file_name: '',
+
+    file: [],
+
+    uploaded_at: new Date(),
+
+    uploaded_by: null,
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { scanned_documents } = useAppSelector(
+    (state) => state.scanned_documents,
+  );
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof scanned_documents === 'object') {
+      setInitialValues(scanned_documents);
+    }
+  }, [scanned_documents]);
+
+  useEffect(() => {
+    if (typeof scanned_documents === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = scanned_documents[el]),
+      );
+      setInitialValues(newInitialVal);
+    }
+  }, [scanned_documents]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/scanned_documents/scanned_documents-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit scanned_documents')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit scanned_documents'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='FileName'>
+                <Field name='file_name' placeholder='FileName' />
+              </FormField>
+
+              <FormField>
+                <Field
+                  label='File'
+                  color='info'
+                  icon={mdiUpload}
+                  path={'scanned_documents/file'}
+                  name='file'
+                  id='file'
+                  schema={{
+                    size: undefined,
+                    formats: undefined,
+                  }}
+                  component={FormFilePicker}
+                ></Field>
+              </FormField>
+
+              <FormField label='UploadedAt'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.uploaded_at
+                      ? new Date(
+                          dayjs(initialValues.uploaded_at).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, uploaded_at: date })
+                  }
+                />
+              </FormField>
+
+              <FormField label='UploadedBy' labelFor='uploaded_by'>
+                <Field
+                  name='uploaded_by'
+                  id='uploaded_by'
+                  component={SelectField}
+                  options={initialValues.uploaded_by}
+                  itemRef={'users'}
+                  showField={'firstName'}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() =>
+                    router.push('/scanned_documents/scanned_documents-list')
+                  }
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditScanned_documentsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_SCANNED_DOCUMENTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditScanned_documentsPage;
diff --git a/frontend/src/pages/claims/scanned_documents-list.tsx b/frontend/src/pages/claims/scanned_documents-list.tsx
new file mode 100644
index 0000000..6a71d32
--- /dev/null
+++ b/frontend/src/pages/claims/scanned_documents-list.tsx
@@ -0,0 +1,171 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableScanned_documents from '../../components/Scanned_documents/TableScanned_documents';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import {
+  setRefetch,
+  uploadCsv,
+} from '../../stores/scanned_documents/scanned_documentsSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const Scanned_documentsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'FileName', title: 'file_name' },
+
+    { label: 'UploadedAt', title: 'uploaded_at', date: 'true' },
+
+    { label: 'UploadedBy', title: 'uploaded_by' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_SCANNED_DOCUMENTS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getScanned_documentsCSV = async () => {
+    const response = await axios({
+      url: '/scanned_documents?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'scanned_documentsCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Scanned_documents')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Scanned_documents'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/scanned_documents/scanned_documents-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getScanned_documentsCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableScanned_documents
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+Scanned_documentsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_SCANNED_DOCUMENTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default Scanned_documentsTablesPage;
diff --git a/frontend/src/pages/claims/scanned_documents-new.tsx b/frontend/src/pages/claims/scanned_documents-new.tsx
new file mode 100644
index 0000000..78b91c8
--- /dev/null
+++ b/frontend/src/pages/claims/scanned_documents-new.tsx
@@ -0,0 +1,140 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/scanned_documents/scanned_documentsSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  file_name: '',
+
+  file: [],
+
+  uploaded_at: '',
+
+  uploaded_by: '',
+};
+
+const Scanned_documentsNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/scanned_documents/scanned_documents-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='FileName'>
+                <Field name='file_name' placeholder='FileName' />
+              </FormField>
+
+              <FormField>
+                <Field
+                  label='File'
+                  color='info'
+                  icon={mdiUpload}
+                  path={'scanned_documents/file'}
+                  name='file'
+                  id='file'
+                  schema={{
+                    size: undefined,
+                    formats: undefined,
+                  }}
+                  component={FormFilePicker}
+                ></Field>
+              </FormField>
+
+              <FormField label='UploadedAt'>
+                <Field
+                  type='datetime-local'
+                  name='uploaded_at'
+                  placeholder='UploadedAt'
+                />
+              </FormField>
+
+              <FormField label='UploadedBy' labelFor='uploaded_by'>
+                <Field
+                  name='uploaded_by'
+                  id='uploaded_by'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'users'}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() =>
+                    router.push('/scanned_documents/scanned_documents-list')
+                  }
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+Scanned_documentsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_SCANNED_DOCUMENTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default Scanned_documentsNew;
diff --git a/frontend/src/pages/claims/scanned_documents-table.tsx b/frontend/src/pages/claims/scanned_documents-table.tsx
new file mode 100644
index 0000000..5dcde83
--- /dev/null
+++ b/frontend/src/pages/claims/scanned_documents-table.tsx
@@ -0,0 +1,174 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableScanned_documents from '../../components/Scanned_documents/TableScanned_documents';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import {
+  setRefetch,
+  uploadCsv,
+} from '../../stores/scanned_documents/scanned_documentsSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const Scanned_documentsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'FileName', title: 'file_name' },
+
+    { label: 'UploadedAt', title: 'uploaded_at', date: 'true' },
+
+    { label: 'UploadedBy', title: 'uploaded_by' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_SCANNED_DOCUMENTS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getScanned_documentsCSV = async () => {
+    const response = await axios({
+      url: '/scanned_documents?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'scanned_documentsCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Scanned_documents')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Scanned_documents'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/scanned_documents/scanned_documents-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getScanned_documentsCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/scanned_documents/scanned_documents-list'}>
+              Back to <span className='capitalize'>table</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableScanned_documents
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+Scanned_documentsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_SCANNED_DOCUMENTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default Scanned_documentsTablesPage;
diff --git a/frontend/src/pages/claims/scanned_documents-view.tsx b/frontend/src/pages/claims/scanned_documents-view.tsx
new file mode 100644
index 0000000..972598b
--- /dev/null
+++ b/frontend/src/pages/claims/scanned_documents-view.tsx
@@ -0,0 +1,132 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/scanned_documents/scanned_documentsSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const Scanned_documentsView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { scanned_documents } = useAppSelector(
+    (state) => state.scanned_documents,
+  );
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View scanned_documents')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View scanned_documents')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/scanned_documents/scanned_documents-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>FileName</p>
+            <p>{scanned_documents?.file_name}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>File</p>
+            {scanned_documents?.file?.length ? (
+              dataFormatter
+                .filesFormatter(scanned_documents.file)
+                .map((link) => (
+                  <button
+                    key={link.publicUrl}
+                    onClick={(e) => saveFile(e, link.publicUrl, link.name)}
+                  >
+                    {link.name}
+                  </button>
+                ))
+            ) : (
+              <p>No File</p>
+            )}
+          </div>
+
+          <FormField label='UploadedAt'>
+            {scanned_documents.uploaded_at ? (
+              <DatePicker
+                dateFormat='yyyy-MM-dd hh:mm'
+                showTimeSelect
+                selected={
+                  scanned_documents.uploaded_at
+                    ? new Date(
+                        dayjs(scanned_documents.uploaded_at).format(
+                          'YYYY-MM-DD hh:mm',
+                        ),
+                      )
+                    : null
+                }
+                disabled
+              />
+            ) : (
+              <p>No UploadedAt</p>
+            )}
+          </FormField>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>UploadedBy</p>
+
+            <p>{scanned_documents?.uploaded_by?.firstName ?? 'No data'}</p>
+          </div>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() =>
+              router.push('/scanned_documents/scanned_documents-list')
+            }
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+Scanned_documentsView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_SCANNED_DOCUMENTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default Scanned_documentsView;