rollback prior to upload changes

Merge pull request #12 from SD-Chris/main

SECURITY.md

@@ -0,0 +1,11 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| MVP.1.x | :white_check_mark: |
+
+## Reporting a Vulnerability
+
+Report any issues with the "Issues" section here in the GitHub repository, and be sure to mark it with a "Security" label in addition to any other labels that may help categorieze (bug, enhancement etc.)

frontend/src/config.ts

@@ -14,7 +14,7 @@ export const localStorageStyleKey = 'style';
 
 export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20';
 
-export const appTitle = 'created by Flatlogic generator!';
+export const appTitle = '';
 
 export const getPageTitle = (currentPageTitle: string) =>
   `${currentPageTitle} — ${appTitle}`;

frontend/src/menuAside.ts

@@ -8,6 +8,18 @@ const menuAside: MenuAsideItem[] = [
     label: 'Dashboard',
   },
 
+  {
+    href: '/scanned_documents/scanned_documents-list',
+    label: 'Claims',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon:
+      'mdiFileDocument' in icon
+        ? icon['mdiFileDocument' as keyof typeof icon]
+        : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_SCANNED_DOCUMENTS',
+  },
+
   {
     href: '/batches/batches-list',
     label: 'Batches',
@@ -19,6 +31,7 @@ const menuAside: MenuAsideItem[] = [
         : icon.mdiTable ?? icon.mdiTable,
     permissions: 'READ_BATCHES',
   },
+
   {
     href: '/logs/logs-list',
     label: 'Logs',
@@ -30,22 +43,6 @@ const menuAside: MenuAsideItem[] = [
         : icon.mdiTable ?? icon.mdiTable,
     permissions: 'READ_LOGS',
   },
-  {
-    href: '/scanned_documents/scanned_documents-list',
-    label: 'Scanned documents',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon:
-      'mdiFileDocument' in icon
-        ? icon['mdiFileDocument' as keyof typeof icon]
-        : 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' },

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

@@ -12,21 +12,13 @@ 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/batches/batchesSlice';
-
 import { hasPermission } from '../../helpers/userPermissions';
-
 const BatchesTablesPage = () => {
   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 currentUser = useAppSelector((state) => state.auth.currentUser);
 
   const [filters] = useState([
     { label: 'BatchNumber', title: 'batch_number' },
@@ -75,18 +67,6 @@ const BatchesTablesPage = () => {
     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 (
     <>
@@ -124,13 +104,6 @@ const BatchesTablesPage = () => {
             onClick={getBatchesCSV}
           />
 
-          {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>
@@ -148,21 +121,6 @@ const BatchesTablesPage = () => {
           showGrid={false}
         />
       </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>
     </>
   );
 };

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/dashboard.tsx

@@ -288,7 +288,7 @@ const Dashboard = () => {
                 <div className='flex justify-between align-center'>
                   <div>
                     <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
-                      Scanned documents
+                      Claims
                     </div>
                     <div className='text-3xl leading-tight font-semibold'>
                       {scanned_documents}

frontend/src/pages/index.tsx

@@ -26,7 +26,7 @@ export default function Starter() {
   const [contentPosition, setContentPosition] = useState('right');
   const textColor = useAppSelector((state) => state.style.linkColor);
 
-  const title = 'PaperClaimsai';
+  const title = 'PaperClaims.ai';
 
   // Fetch Pexels image/video
   useEffect(() => {
@@ -129,27 +129,20 @@ export default function Starter() {
             : null}
           <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
             <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-              <CardBoxComponentTitle title='Welcome to your PaperClaimsai app!' />
+              <CardBoxComponentTitle title='PaperClaims.ai | Turn paper into payments' />
 
               <div className='space-y-3'>
                 <p className='text-center text-gray-500'>
-                  This is a React.js/Node.js app generated by the{' '}
+                  This is a temporary landing page for the main app portal.
-                  <a
-                    className={`${textColor}`}
-                    href='https://flatlogic.com/generator'
-                  >
-                    Flatlogic Web App Generator
-                  </a>
                 </p>
                 <p className='text-center text-gray-500'>
-                  For guides and documentation please check your local README.md
+                  Use the Login button below to access the portal, or visit the {' '}
-                  and the{' '}
                   <a
                     className={`${textColor}`}
-                    href='https://flatlogic.com/documentation'
+                    href='https://www.paperclaims.ai'
                   >
-                    Flatlogic documentation
+                    PaperClaims.ai public website
-                  </a>
+                  </a>.
                 </p>
               </div>
 
@@ -161,6 +154,7 @@ export default function Starter() {
                   className='w-full'
                 />
               </BaseButtons>
+              {/*
               <div className='grid grid-cols-1 gap-2 lg:grid-cols-4 mt-2'>
                 <div className='text-center'>
                   <a className={`${textColor}`} href='https://react.dev/'>
@@ -187,13 +181,14 @@ export default function Starter() {
                   </a>
                 </div>
               </div>
+              */}
             </CardBox>
           </div>
         </div>
       </SectionFullScreen>
       <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
         <p className='py-6 text-sm'>
-          © 2024 <span>{title}</span>. All rights reserved
+          © 2025 <span>{title}</span>. All rights reserved
         </p>
         <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
           Privacy Policy

frontend/src/pages/login.tsx

@@ -52,7 +52,7 @@ export default function Login() {
     remember: true,
   });
 
-  const title = 'PaperClaimsai';
+  const title = 'PaperClaims.ai | Login ';
 
   // Fetch Pexels image/video
   useEffect(() => {
@@ -204,32 +204,7 @@ export default function Login() {
               <div className='flex flex-row text-gray-500 justify-between'>
                 <div>
                   <p className='mb-2'>
-                    Use{' '}
+                    Login below to access your account.
-                    <code
-                      className={`cursor-pointer ${textColor} `}
-                      data-password='c8f96137'
-                      onClick={(e) => setLogin(e.target)}
-                    >
-                      admin@flatlogic.com
-                    </code>
-                    {' / '}
-                    <code className={`${textColor}`}>c8f96137</code>
-                    {' / '}
-                    to login as Admin
-                  </p>
-                  <p>
-                    Use{' '}
-                    <code
-                      className={`cursor-pointer ${textColor} `}
-                      data-password='57fd86e330a1'
-                      onClick={(e) => setLogin(e.target)}
-                    >
-                      client@hello.com
-                    </code>
-                    {' / '}
-                    <code className={`${textColor}`}>57fd86e330a1</code>
-                    {' / '}
-                    to login as User
                   </p>
                 </div>
                 <div>

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

@@ -83,12 +83,12 @@ const EditScanned_documentsPage = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('Edit scanned_documents')}</title>
+        <title>{getPageTitle('Edit Claim')}</title>
       </Head>
       <SectionMain>
         <SectionTitleLineWithButton
           icon={mdiChartTimelineVariant}
-          title={'Edit scanned_documents'}
+          title='Edit Claim'
           main
         >
           {''}

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

@@ -86,12 +86,12 @@ const Scanned_documentsTablesPage = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('Scanned_documents')}</title>
+        <title>{getPageTitle('Claims')}</title>
       </Head>
       <SectionMain>
         <SectionTitleLineWithButton
           icon={mdiChartTimelineVariant}
-          title='Scanned_documents'
+          title='Claims'
           main
         >
           {''}

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

@@ -53,12 +53,12 @@ const Scanned_documentsNew = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('New Item')}</title>
+        <title>{getPageTitle('New Claim')}</title>
       </Head>
       <SectionMain>
         <SectionTitleLineWithButton
           icon={mdiChartTimelineVariant}
-          title='New Item'
+          title='New Claim'
           main
         >
           {''}

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

@@ -86,12 +86,12 @@ const Scanned_documentsTablesPage = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('Scanned_documents')}</title>
+        <title>{getPageTitle('Claims')}</title>
       </Head>
       <SectionMain>
         <SectionTitleLineWithButton
           icon={mdiChartTimelineVariant}
-          title='Scanned_documents'
+          title='Claims'
           main
         >
           {''}
@@ -102,7 +102,7 @@ const Scanned_documentsTablesPage = () => {
               className={'mr-3'}
               href={'/scanned_documents/scanned_documents-new'}
               color='info'
-              label='New Item'
+              label='New Claim'
             />
           )}
 

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

@@ -29,10 +29,6 @@ const Scanned_documentsView = () => {
 
   const { id } = router.query;
 
-  function removeLastCharacter(str) {
-    console.log(str, `str`);
-    return str.slice(0, -1);
-  }
 
   useEffect(() => {
     dispatch(fetch({ id }));
@@ -41,7 +37,7 @@ const Scanned_documentsView = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('View scanned_documents')}</title>
+        <title>{getPageTitle('Claim Details')}</title>
       </Head>
       <SectionMain>
         <SectionTitleLineWithButton
@@ -50,7 +46,7 @@ const Scanned_documentsView = () => {
           main
         >
           <BaseButton
-            color='info'
+          title='Claim Details'
             label='Edit'
             href={`/scanned_documents/scanned_documents-edit/?id=${id}`}
           />

frontend/src/pages/scanned_documents/uploaded_claims/temp.text

@@ -0,0 +1 @@
+temp file to save folder