Merge pull request #2 from SD-Chris/ai-dev

Setup for renaming from Scanned documents to Claims

.gitignore

@@ -1,3 +1,8 @@
 node_modules/
 */node_modules/
 */build/
+
+**/node_modules/
+**/build/
+.DS_Store
+.env

frontend/json/runtimeError.json

@@ -0,0 +1 @@
+{}

frontend/src/components/AsideMenuItem.tsx

@@ -14,6 +14,15 @@ type Props = {
 };
 
 const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
+  // Render section header for System Settings
+  if (item.isSectionHeader) {
+    return (
+      <li className="px-3 py-2 uppercase text-xs font-semibold text-gray-500">
+        {item.label}
+      </li>
+    );
+  }
+
   const [isLinkActive, setIsLinkActive] = useState(false);
   const [isDropdownActive, setIsDropdownActive] = useState(false);
 
@@ -86,7 +95,7 @@ const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
 
   return (
     <li className={'px-3 py-1.5'}>
-      {item.withDevider && <hr className={`${borders} mb-3`} />}
+      {item.withDivider && <hr className={`${borders} mb-3`} />}
       {item.href && (
         <Link href={item.href} target={item.target} className={componentClass}>
           {asideMenuItemInnerContents}

frontend/src/interfaces/index.ts

@@ -11,7 +11,9 @@ export type MenuAsideItem = {
   target?: string;
   color?: ColorButtonKey;
   isLogout?: boolean;
-  withDevider?: boolean;
+  withDivider?: boolean;
+  isSectionHeader?: boolean;
+
   menu?: MenuAsideItem[];
   permissions?: string | string[];
 };

frontend/src/menuAside.ts

@@ -8,14 +8,6 @@ const menuAside: MenuAsideItem[] = [
     label: 'Dashboard',
   },
 
-  {
-    href: '/users/users-list',
-    label: 'Users',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiAccountGroup ?? icon.mdiTable,
-    permissions: 'READ_USERS',
-  },
   {
     href: '/batches/batches-list',
     label: 'Batches',
@@ -49,6 +41,21 @@ const menuAside: MenuAsideItem[] = [
         : icon.mdiTable ?? icon.mdiTable,
     permissions: 'READ_SCANNED_DOCUMENTS',
   },
+  {
+    href: '/profile',
+    label: 'Profile',
+    icon: icon.mdiAccountCircle,
+  },
+
+  { withDivider: true, permissions: 'READ_USERS' },
+  { label: 'System Settings', isSectionHeader: true, permissions: 'READ_USERS' },
+  {
+    href: '/api-docs',
+    target: '_blank',
+    label: 'API Reference',
+    icon: icon.mdiFileCode,
+    permissions: 'READ_API_DOCS',
+  },
   {
     href: '/roles/roles-list',
     label: 'Roles',
@@ -65,19 +72,17 @@ const menuAside: MenuAsideItem[] = [
     icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
     permissions: 'READ_PERMISSIONS',
   },
-  {
+
-    href: '/profile',
-    label: 'Profile',
-    icon: icon.mdiAccountCircle,
-  },
 
   {
-    href: '/api-docs',
+    href: '/users/users-list',
-    target: '_blank',
+    label: 'Users',
-    label: 'Swagger API',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    icon: icon.mdiFileCode,
+    // @ts-ignore
-    permissions: 'READ_API_DOCS',
+    icon: icon.mdiAccountGroup ?? icon.mdiTable,
+    permissions: 'READ_USERS',
   },
+
 ];
 
 export default menuAside;

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;

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;

frontend/src/pages/claims/scanned_documents-list.tsx

@@ -0,0 +1,158 @@
+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='Upload New Claim(s)'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+
+
+          <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;

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;

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;

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;

frontend/src/pages/scanned_documents/scanned_documents-list.tsx

@@ -102,7 +102,7 @@ const Scanned_documentsTablesPage = () => {
               className={'mr-3'}
               href={'/scanned_documents/scanned_documents-new'}
               color='info'
-              label='New Item'
+      label='Upload New Claim(s)'
             />
           )}
 
@@ -112,20 +112,7 @@ const Scanned_documentsTablesPage = () => {
             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>