From cabc68c932fedfb5a567276bb0387a166d77e629 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 27 Dec 2025 13:45:26 +0000
Subject: [PATCH] Add finance dashboard components and routes

- Introduced FinanceOverview, FinanceSidebar, and Invoices components for the finance dashboard.
- Added InvoiceInfo and NewInvoice components for managing invoices.
- Created SVG icons for finance and invoice.
- Updated routing to include finance-related paths.
- Enhanced DashboardBreadcrumb and DashboardNavigation to support finance navigation.
- Defined Invoice model with actions and properties for invoice management.
---
 assets/icons/financeicon.svg                  |   1 +
 assets/icons/invoiceicon.svg                  |  14 +
 .../Dashboard/Finance/FinanceOverview.jsx     |  61 ++++
 .../Dashboard/Finance/FinanceSidebar.jsx      |  46 +++
 src/components/Dashboard/Finance/Invoices.jsx |  98 +++++
 .../Finance/Invoices/InvoiceInfo.jsx          | 218 ++++++++++++
 .../Dashboard/Finance/Invoices/NewInvoice.jsx | 113 ++++++
 .../Dashboard/common/DashboardBreadcrumb.jsx  |   1 +
 .../Dashboard/common/DashboardNavigation.jsx  |   8 +
 src/components/Icons/InvoiceIcon.jsx          |   9 +
 src/database/models/Invoice.js                | 336 ++++++++++++++++++
 src/routes/FinanceRoutes.jsx                  |  29 ++
 src/routes/index.js                           |   1 +
 13 files changed, 935 insertions(+)
 create mode 100644 assets/icons/financeicon.svg
 create mode 100644 assets/icons/invoiceicon.svg
 create mode 100644 src/components/Dashboard/Finance/FinanceOverview.jsx
 create mode 100644 src/components/Dashboard/Finance/FinanceSidebar.jsx
 create mode 100644 src/components/Dashboard/Finance/Invoices.jsx
 create mode 100644 src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
 create mode 100644 src/components/Dashboard/Finance/Invoices/NewInvoice.jsx
 create mode 100644 src/components/Icons/InvoiceIcon.jsx
 create mode 100644 src/database/models/Invoice.js
 create mode 100644 src/routes/FinanceRoutes.jsx

diff --git a/assets/icons/financeicon.svg b/assets/icons/financeicon.svg
new file mode 100644
index 0000000..565e9cf
--- /dev/null
+++ b/assets/icons/financeicon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><path d="M29.953,40.788l10.342,0c1.761,0 3.18,1.258 3.18,3.055c0,1.788 -1.349,3.03 -3.18,3.03l-18.004,0c-1.785,0 -3.086,-1.234 -3.086,-3.075c0,-1.581 0.953,-2.598 2.336,-3.193l0.024,-0.01c2.054,-0.833 3.153,-2.551 3.153,-4.757c0,-0.425 -0.052,-0.856 -0.133,-1.305l-2.8,0c-1.588,0 -2.701,-1.131 -2.701,-2.591c0,-1.408 1.105,-2.56 2.701,-2.56l1.544,-0c-0.168,-0.87 -0.242,-1.672 -0.242,-2.485c0,-6.288 4.756,-9.887 11.404,-9.887c2.234,0 3.578,0.148 5.274,0.766c1.53,0.469 2.646,1.469 2.646,3.106c0,0.878 -0.321,1.553 -0.828,2.023c-0.48,0.446 -1.159,0.725 -2.011,0.725c-0.479,0 -1.089,-0.115 -1.715,-0.248l-0.045,-0.01c-0.697,-0.176 -1.631,-0.301 -2.775,-0.301c-2.932,0 -5.078,1.33 -5.078,3.98c0,0.734 0.074,1.394 0.272,2.332l7.292,0c1.585,0 2.701,1.163 2.701,2.56c0,1.449 -1.124,2.591 -2.701,2.591l-6.16,0c0.024,0.361 0.034,0.743 0.034,1.147c0,1.832 -0.479,3.671 -1.444,5.108Z"/><path d="M12.892,61l38.215,0c6.616,0 9.892,-3.245 9.892,-9.735l0,-38.499c0,-6.49 -3.276,-9.766 -9.892,-9.766l-38.215,-0c-6.584,0 -9.892,3.276 -9.892,9.766l0,38.499c0,6.49 3.308,9.735 9.892,9.735Zm0.063,-5.072c-3.15,0 -4.883,-1.67 -4.883,-4.946l0,-37.932c0,-3.276 1.733,-4.978 4.883,-4.978l38.089,0c3.119,0 4.883,1.701 4.883,4.978l0,37.932c0,3.276 -1.764,4.946 -4.883,4.946l-38.089,0Z" style="fill-rule:nonzero;"/></g></svg>
\ No newline at end of file
diff --git a/assets/icons/invoiceicon.svg b/assets/icons/invoiceicon.svg
new file mode 100644
index 0000000..77b14a6
--- /dev/null
+++ b/assets/icons/invoiceicon.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.58577,0,0,0.58577,29,29)">
+        <path d="M11.031,59.75L48.719,59.75C55.859,59.75 59.75,55.891 59.75,48.797L59.75,10.969C59.75,3.891 55.859,-0 48.719,-0L11.031,-0C3.906,-0 -0,3.891 -0,10.969L-0,48.797C-0,55.891 3.906,59.75 11.031,59.75ZM11.906,51.688C9.391,51.688 8.063,50.469 8.063,47.813L8.063,11.969C8.063,9.313 9.391,8.078 11.906,8.078L47.844,8.078C50.344,8.078 51.688,9.313 51.688,11.969L51.688,47.813C51.688,50.469 50.344,51.688 47.844,51.688L11.906,51.688Z" style="fill-rule:nonzero;"/>
+        <g transform="matrix(0.664312,0,0,0.664312,5.121464,12.135807)">
+            <path d="M37.594,52.969C39.062,52.969 40.625,52.281 41.875,51L61.844,31.094C62.938,30 63.656,28.188 63.656,26.5C63.656,24.812 62.938,23 61.844,21.906L41.875,1.969C40.625,0.688 39.062,0 37.594,0C33.812,0 31.406,2.562 31.406,5.906C31.406,7.875 32.312,9.25 33.5,10.406L40.5,17.344L50.219,26.5L40.5,35.656L33.5,42.562C32.312,43.688 31.406,45.094 31.406,47.062C31.406,50.406 33.812,52.969 37.594,52.969ZM1.485,32.781L37.75,32.781L51.969,32.094C55.531,31.938 57.906,29.844 57.906,26.5C57.906,23.156 55.531,21.062 51.969,20.906L37.75,20.219L1.485,20.219C-2.515,20.219 -5.14,22.719 -5.14,26.5C-5.14,30.281 -2.515,32.781 1.485,32.781Z" style="fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <g transform="matrix(0.739137,0,0,0.739137,-0,2.611674)">
+        <path d="M35.853,52.047L25.734,52.047C20.578,52.047 17.797,48.969 17.047,43.844L12.484,12.719L3.906,12.719C1.812,12.719 0,10.906 0,8.766C0,6.625 1.812,4.828 3.906,4.828L14.172,4.828C18.125,4.828 19.609,6.437 20.047,9.625L20.402,12.109L69.062,12.109C71.922,12.109 73.438,13.75 73.438,16.031C73.438,16.5 73.344,17.062 73.281,17.516L71.172,31.781C71.146,31.963 71.118,32.143 71.087,32.319L63.084,32.319C63.272,32.028 63.394,31.657 63.453,31.219L65.078,19.094L21.4,19.094L23.397,33.062L43.157,33.063C41.542,33.617 40.191,34.464 39.103,35.547C37.914,36.73 37.007,38.224 36.457,40.031L24.393,40.031L24.844,43.188C25,44.312 25.656,45.094 26.719,45.094L35.853,45.094L35.853,52.047ZM28.422,68.437C25.078,68.437 22.359,65.766 22.359,62.391C22.359,59.063 25.078,56.359 28.422,56.359C31.781,56.359 34.453,59.063 34.453,62.391C34.453,65.766 31.781,68.437 28.422,68.437Z"/>
+    </g>
+</svg>
+
diff --git a/src/components/Dashboard/Finance/FinanceOverview.jsx b/src/components/Dashboard/Finance/FinanceOverview.jsx
new file mode 100644
index 0000000..5df8e4c
--- /dev/null
+++ b/src/components/Dashboard/Finance/FinanceOverview.jsx
@@ -0,0 +1,61 @@
+import { useContext } from 'react'
+import { Flex } from 'antd'
+import useCollapseState from '../hooks/useCollapseState'
+import StatsDisplay from '../common/StatsDisplay'
+import InfoCollapse from '../common/InfoCollapse'
+import ScrollBox from '../common/ScrollBox'
+
+import { ApiServerContext } from '../context/ApiServerContext'
+
+const FinanceOverview = () => {
+  const { connected } = useContext(ApiServerContext)
+
+  const [collapseState, updateCollapseState] = useCollapseState(
+    'FinanceOverview',
+    {
+      invoiceStats: true
+    }
+  )
+
+  if (!connected) {
+    return null
+  }
+
+  return (
+    <Flex
+      gap='large'
+      vertical='true'
+      style={{
+        maxHeight: '100%',
+        minHeight: 0
+      }}
+    >
+      <ScrollBox>
+        <Flex vertical gap={'large'}>
+          <InfoCollapse
+            title='Invoice Statistics'
+            icon={null}
+            active={collapseState.invoiceStats}
+            onToggle={(isActive) =>
+              updateCollapseState('invoiceStats', isActive)
+            }
+            className='no-t-padding-collapse'
+            collapseKey='invoiceStats'
+          >
+            <Flex
+              justify='flex-start'
+              gap='middle'
+              wrap='wrap'
+              align='flex-start'
+            >
+              <StatsDisplay objectType='invoice' />
+            </Flex>
+          </InfoCollapse>
+        </Flex>
+      </ScrollBox>
+    </Flex>
+  )
+}
+
+export default FinanceOverview
+
diff --git a/src/components/Dashboard/Finance/FinanceSidebar.jsx b/src/components/Dashboard/Finance/FinanceSidebar.jsx
new file mode 100644
index 0000000..7f763da
--- /dev/null
+++ b/src/components/Dashboard/Finance/FinanceSidebar.jsx
@@ -0,0 +1,46 @@
+import { useLocation } from 'react-router-dom'
+import DashboardSidebar from '../common/DashboardSidebar'
+import InvoiceIcon from '../../Icons/InvoiceIcon'
+import FinanceIcon from '../../Icons/FinanceIcon'
+
+const items = [
+  {
+    key: 'overview',
+    label: 'Overview',
+    icon: <FinanceIcon />,
+    path: '/dashboard/finance/overview'
+  },
+  { type: 'divider' },
+  {
+    key: 'invoices',
+    label: 'Invoices',
+    icon: <InvoiceIcon />,
+    path: '/dashboard/finance/invoices'
+  }
+]
+
+const routeKeyMap = {
+  '/dashboard/finance/overview': 'overview',
+  '/dashboard/finance/invoices': 'invoices'
+}
+
+const FinanceSidebar = (props) => {
+  const location = useLocation()
+  const selectedKey = (() => {
+    const match = Object.keys(routeKeyMap).find((path) => {
+      const pathSplit = path.split('/')
+      const locationPathSplit = location.pathname.split('/')
+      if (pathSplit.length > locationPathSplit.length) return false
+      for (let i = 0; i < pathSplit.length; i++) {
+        if (pathSplit[i] !== locationPathSplit[i]) return false
+      }
+      return true
+    })
+    return match ? routeKeyMap[match] : 'overview'
+  })()
+
+  return <DashboardSidebar items={items} selectedKey={selectedKey} {...props} />
+}
+
+export default FinanceSidebar
+
diff --git a/src/components/Dashboard/Finance/Invoices.jsx b/src/components/Dashboard/Finance/Invoices.jsx
new file mode 100644
index 0000000..5f59c6e
--- /dev/null
+++ b/src/components/Dashboard/Finance/Invoices.jsx
@@ -0,0 +1,98 @@
+import { useState, useRef } from 'react'
+import { Button, Flex, Space, Dropdown, Modal } from 'antd'
+import NewInvoice from './Invoices/NewInvoice'
+import ObjectTable from '../common/ObjectTable'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
+import useColumnVisibility from '../hooks/useColumnVisibility'
+import GridIcon from '../../Icons/GridIcon'
+import ListIcon from '../../Icons/ListIcon'
+import useViewMode from '../hooks/useViewMode'
+import ColumnViewButton from '../common/ColumnViewButton'
+
+const Invoices = () => {
+  const [newInvoiceOpen, setNewInvoiceOpen] = useState(false)
+  const tableRef = useRef()
+
+  const [viewMode, setViewMode] = useViewMode('invoices')
+
+  const [columnVisibility, setColumnVisibility] =
+    useColumnVisibility('invoices')
+
+  const actionItems = {
+    items: [
+      {
+        label: 'New Invoice',
+        key: 'newInvoice',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newInvoice') {
+        setNewInvoiceOpen(true)
+      }
+    }
+  }
+
+  return (
+    <>
+      <Flex vertical={'true'} gap='large'>
+        <Flex justify={'space-between'}>
+          <Space size='small'>
+            <Dropdown menu={actionItems}>
+              <Button>Actions</Button>
+            </Dropdown>
+            <ColumnViewButton
+              type='invoice'
+              loading={false}
+              visibleState={columnVisibility}
+              updateVisibleState={setColumnVisibility}
+            />
+          </Space>
+          <Space>
+            <Button
+              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              onClick={() =>
+                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+              }
+            />
+          </Space>
+        </Flex>
+        <ObjectTable
+          ref={tableRef}
+          visibleColumns={columnVisibility}
+          type='invoice'
+          cards={viewMode === 'cards'}
+        />
+      </Flex>
+      <Modal
+        open={newInvoiceOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewInvoiceOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewInvoice
+          onOk={() => {
+            setNewInvoiceOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newInvoiceOpen}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export default Invoices
diff --git a/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx b/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
new file mode 100644
index 0000000..01d210e
--- /dev/null
+++ b/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
@@ -0,0 +1,218 @@
+import { useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { Space, Flex, Card } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import loglevel from 'loglevel'
+import config from '../../../../config.js'
+import useCollapseState from '../../hooks/useCollapseState.js'
+import NotesPanel from '../../common/NotesPanel.jsx'
+import InfoCollapse from '../../common/InfoCollapse.jsx'
+import ObjectInfo from '../../common/ObjectInfo.jsx'
+import ViewButton from '../../common/ViewButton.jsx'
+import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
+import NoteIcon from '../../../Icons/NoteIcon.jsx'
+import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
+import ObjectForm from '../../common/ObjectForm.jsx'
+import EditButtons from '../../common/EditButtons.jsx'
+import LockIndicator from '../../common/LockIndicator.jsx'
+import ActionHandler from '../../common/ActionHandler.jsx'
+import ObjectActions from '../../common/ObjectActions.jsx'
+import ObjectTable from '../../common/ObjectTable.jsx'
+import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
+import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
+import { getModelByName } from '../../../../database/ObjectModels.js'
+
+const log = loglevel.getLogger('InvoiceInfo')
+log.setLevel(config.logLevel)
+
+const InvoiceInfo = () => {
+  const location = useLocation()
+  const objectFormRef = useRef(null)
+  const actionHandlerRef = useRef(null)
+  const invoiceId = new URLSearchParams(location.search).get('invoiceId')
+  const [collapseState, updateCollapseState] = useCollapseState(
+    'InvoiceInfo',
+    {
+      info: true,
+      notes: true,
+      auditLogs: true
+    }
+  )
+
+  const [objectFormState, setEditFormState] = useState({
+    isEditing: false,
+    editLoading: false,
+    formValid: false,
+    lock: null,
+    loading: false,
+    objectData: {}
+  })
+
+  const actions = {
+    reload: () => {
+      objectFormRef?.current?.handleFetchObject?.()
+      return true
+    },
+    edit: () => {
+      objectFormRef?.current?.startEditing?.()
+      return false
+    },
+    cancelEdit: () => {
+      objectFormRef?.current?.cancelEditing?.()
+      return true
+    },
+    finishEdit: () => {
+      objectFormRef?.current?.handleUpdate?.()
+      return true
+    },
+    delete: () => {
+      objectFormRef?.current?.handleDelete?.()
+      return true
+    }
+  }
+
+  const editDisabled = getModelByName('invoice')
+    ?.actions?.find((action) => action.name === 'edit')
+    ?.disabled(objectFormState.objectData) ?? false
+
+  return (
+    <>
+      <Flex
+        gap='large'
+        vertical='true'
+        style={{
+          maxHeight: '100%',
+          minHeight: 0
+        }}
+      >
+        <Flex justify={'space-between'}>
+          <Space size='middle'>
+            <Space size='small'>
+              <ObjectActions
+                type='invoice'
+                id={invoiceId}
+                disabled={objectFormState.loading}
+                objectData={objectFormState.objectData}
+              />
+              <ViewButton
+                disabled={objectFormState.loading}
+                items={[
+                  { key: 'info', label: 'Invoice Information' },
+                  { key: 'notes', label: 'Notes' },
+                  { key: 'auditLogs', label: 'Audit Logs' }
+                ]}
+                visibleState={collapseState}
+                updateVisibleState={updateCollapseState}
+              />
+              <DocumentPrintButton
+                type='invoice'
+                objectData={objectFormState.objectData}
+                disabled={objectFormState.loading}
+              />
+            </Space>
+            <LockIndicator lock={objectFormState.lock} />
+          </Space>
+          <Space>
+            <EditButtons
+              isEditing={objectFormState.isEditing}
+              handleUpdate={() => {
+                actionHandlerRef.current.callAction('finishEdit')
+              }}
+              cancelEditing={() => {
+                actionHandlerRef.current.callAction('cancelEdit')
+              }}
+              startEditing={() => {
+                actionHandlerRef.current.callAction('edit')
+              }}
+              editLoading={objectFormState.editLoading}
+              formValid={objectFormState.formValid}
+              disabled={
+                objectFormState.lock?.locked ||
+                objectFormState.loading ||
+                editDisabled
+              }
+              loading={objectFormState.editLoading}
+            />
+          </Space>
+        </Flex>
+
+        <ScrollBox>
+          <Flex vertical gap={'large'}>
+            <ActionHandler
+              actions={actions}
+              loading={objectFormState.loading}
+              ref={actionHandlerRef}
+            >
+              <ObjectForm
+                id={invoiceId}
+                type='invoice'
+                style={{ height: '100%' }}
+                ref={objectFormRef}
+                onStateChange={(state) => {
+                  setEditFormState((prev) => ({ ...prev, ...state }))
+                }}
+              >
+                {({ loading, isEditing, objectData }) => (
+                  <Flex vertical gap={'large'}>
+                    <InfoCollapse
+                      title='Invoice Information'
+                      icon={<InfoCircleIcon />}
+                      active={collapseState.info}
+                      onToggle={(expanded) =>
+                        updateCollapseState('info', expanded)
+                      }
+                      collapseKey='info'
+                    >
+                      <ObjectInfo
+                        loading={loading}
+                        indicator={<LoadingOutlined />}
+                        isEditing={isEditing}
+                        type='invoice'
+                        labelWidth='225px'
+                        objectData={objectData}
+                      />
+                    </InfoCollapse>
+                  </Flex>
+                )}
+              </ObjectForm>
+            </ActionHandler>
+            <InfoCollapse
+              title='Notes'
+              icon={<NoteIcon />}
+              active={collapseState.notes}
+              onToggle={(expanded) => updateCollapseState('notes', expanded)}
+              collapseKey='notes'
+            >
+              <Card>
+                <NotesPanel _id={invoiceId} type='invoice' />
+              </Card>
+            </InfoCollapse>
+            <InfoCollapse
+              title='Audit Logs'
+              icon={<AuditLogIcon />}
+              active={collapseState.auditLogs}
+              onToggle={(expanded) =>
+                updateCollapseState('auditLogs', expanded)
+              }
+              collapseKey='auditLogs'
+            >
+              {objectFormState.loading ? (
+                <InfoCollapsePlaceholder />
+              ) : (
+                <ObjectTable
+                  type='auditLog'
+                  masterFilter={{ 'parent._id': invoiceId }}
+                  visibleColumns={{ _id: false, 'parent._id': false }}
+                />
+              )}
+            </InfoCollapse>
+          </Flex>
+        </ScrollBox>
+      </Flex>
+    </>
+  )
+}
+
+export default InvoiceInfo
+
diff --git a/src/components/Dashboard/Finance/Invoices/NewInvoice.jsx b/src/components/Dashboard/Finance/Invoices/NewInvoice.jsx
new file mode 100644
index 0000000..620cdaf
--- /dev/null
+++ b/src/components/Dashboard/Finance/Invoices/NewInvoice.jsx
@@ -0,0 +1,113 @@
+import PropTypes from 'prop-types'
+import ObjectInfo from '../../common/ObjectInfo'
+import NewObjectForm from '../../common/NewObjectForm'
+import WizardView from '../../common/WizardView'
+
+const NewInvoice = ({ onOk, reset, defaultValues }) => {
+  return (
+    <NewObjectForm
+      type={'invoice'}
+      reset={reset}
+      defaultValues={{
+        state: { type: 'draft' },
+        invoiceType: 'sales',
+        ...defaultValues
+      }}
+    >
+      {({ handleSubmit, submitLoading, objectData, formValid }) => {
+        const steps = [
+          {
+            title: 'Required',
+            key: 'required',
+            content: (
+              <ObjectInfo
+                type='invoice'
+                column={1}
+                bordered={false}
+                isEditing={true}
+                required={true}
+                objectData={objectData}
+                visibleProperties={{
+                  orderType: true,
+                  order: true,
+                  vendor: true,
+                  invoiceDate: true,
+                  dueDate: true
+                }}
+              />
+            )
+          },
+          {
+            title: 'Optional',
+            key: 'optional',
+            content: (
+              <ObjectInfo
+                type='invoice'
+                column={1}
+                bordered={false}
+                isEditing={true}
+                required={false}
+                objectData={objectData}
+                visibleProperties={{
+                  relatedOrderType: true,
+                  relatedOrder: true
+                }}
+              />
+            )
+          },
+          {
+            title: 'Summary',
+            key: 'summary',
+            content: (
+              <ObjectInfo
+                type='invoice'
+                column={1}
+                bordered={false}
+                visibleProperties={{
+                  _id: false,
+                  createdAt: false,
+                  updatedAt: false,
+                  _reference: false,
+                  totalAmount: false,
+                  totalAmountWithTax: false,
+                  totalTaxAmount: false,
+                  shippingAmount: false,
+                  shippingAmountWithTax: false,
+                  grandTotalAmount: false,
+                  sentAt: false,
+                  paidAt: false,
+                  cancelledAt: false,
+                  overdueAt: false
+                }}
+                isEditing={false}
+                objectData={objectData}
+              />
+            )
+          }
+        ]
+        return (
+          <WizardView
+            steps={steps}
+            loading={submitLoading}
+            formValid={formValid}
+            title='New Invoice'
+            onSubmit={async () => {
+              const result = await handleSubmit()
+              if (result) {
+                onOk()
+              }
+            }}
+          />
+        )
+      }}
+    </NewObjectForm>
+  )
+}
+
+NewInvoice.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  reset: PropTypes.bool,
+  defaultValues: PropTypes.object
+}
+
+export default NewInvoice
diff --git a/src/components/Dashboard/common/DashboardBreadcrumb.jsx b/src/components/Dashboard/common/DashboardBreadcrumb.jsx
index 776a472..5a62ca9 100644
--- a/src/components/Dashboard/common/DashboardBreadcrumb.jsx
+++ b/src/components/Dashboard/common/DashboardBreadcrumb.jsx
@@ -10,6 +10,7 @@ const breadcrumbNameMap = {
   inventory: 'Inventory',
   management: 'Management',
   developer: 'Developer',
+  finance: 'Finance',
   overview: 'Overview',
   info: 'Info',
   design: 'Design',
diff --git a/src/components/Dashboard/common/DashboardNavigation.jsx b/src/components/Dashboard/common/DashboardNavigation.jsx
index 5672f7d..79799b2 100644
--- a/src/components/Dashboard/common/DashboardNavigation.jsx
+++ b/src/components/Dashboard/common/DashboardNavigation.jsx
@@ -30,6 +30,7 @@ import FarmControlLogoSmall from '../../Logos/FarmControlLogoSmall'
 import MenuIcon from '../../Icons/MenuIcon'
 import ProductionIcon from '../../Icons/ProductionIcon'
 import InventoryIcon from '../../Icons/InventoryIcon'
+import FinanceIcon from '../../Icons/FinanceIcon'
 import PersonIcon from '../../Icons/PersonIcon'
 import CloudIcon from '../../Icons/CloudIcon'
 import BellIcon from '../../Icons/BellIcon'
@@ -69,6 +70,11 @@ const DashboardNavigation = () => {
       label: 'Inventory',
       icon: <InventoryIcon />
     },
+    {
+      key: 'finance',
+      label: 'Finance',
+      icon: <FinanceIcon />
+    },
     {
       key: 'management',
       label: 'Management',
@@ -130,6 +136,8 @@ const DashboardNavigation = () => {
       navigate('/dashboard/production/overview')
     } else if (key === 'inventory') {
       navigate('/dashboard/inventory/overview')
+    } else if (key === 'finance') {
+      navigate('/dashboard/finance/overview')
     } else if (key === 'management') {
       navigate('/dashboard/management/filaments')
     }
diff --git a/src/components/Icons/InvoiceIcon.jsx b/src/components/Icons/InvoiceIcon.jsx
new file mode 100644
index 0000000..ac7e6f9
--- /dev/null
+++ b/src/components/Icons/InvoiceIcon.jsx
@@ -0,0 +1,9 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/invoiceicon.svg?react'
+
+const InvoiceIcon = (props) => (
+  <Icon component={CustomIconSvg} {...props} />
+)
+
+export default InvoiceIcon
+
diff --git a/src/database/models/Invoice.js b/src/database/models/Invoice.js
new file mode 100644
index 0000000..8aa8e52
--- /dev/null
+++ b/src/database/models/Invoice.js
@@ -0,0 +1,336 @@
+import InvoiceIcon from '../../components/Icons/InvoiceIcon'
+import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
+import CheckIcon from '../../components/Icons/CheckIcon'
+import EditIcon from '../../components/Icons/EditIcon'
+import XMarkIcon from '../../components/Icons/XMarkIcon'
+import BinIcon from '../../components/Icons/BinIcon'
+
+export const Invoice = {
+  name: 'invoice',
+  label: 'Invoice',
+  prefix: 'INV',
+  icon: InvoiceIcon,
+  actions: [
+    {
+      name: 'info',
+      label: 'Info',
+      default: true,
+      row: true,
+      icon: InfoCircleIcon,
+      url: (_id) => `/dashboard/finance/invoices/info?invoiceId=${_id}`
+    },
+    {
+      name: 'edit',
+      label: 'Edit',
+      type: 'button',
+      icon: EditIcon,
+      url: (_id) =>
+        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=edit`,
+      visible: (objectData) => {
+        return !(objectData?._isEditing && objectData?._isEditing == true)
+      },
+      disabled: (objectData) => {
+        return objectData?.state?.type != 'draft'
+      }
+    },
+    {
+      name: 'cancelEdit',
+      label: 'Cancel Edit',
+      type: 'button',
+      icon: XMarkIcon,
+      url: (_id) =>
+        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=cancelEdit`,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
+    },
+    {
+      name: 'finishEdit',
+      label: 'Finish Edit',
+      type: 'button',
+      icon: CheckIcon,
+      url: (_id) =>
+        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=finishEdit`,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
+    },
+    {
+      name: 'delete',
+      label: 'Delete',
+      type: 'button',
+      icon: BinIcon,
+      danger: true,
+      url: (_id) =>
+        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=delete`,
+      visible: (objectData) => {
+        return !(objectData?._isEditing && objectData?._isEditing == true)
+      },
+      disabled: (objectData) => {
+        return objectData?.state?.type != 'draft'
+      }
+    },
+    { type: 'divider' },
+    {
+      name: 'send',
+      label: 'Send',
+      type: 'button',
+      icon: CheckIcon,
+      url: (_id) =>
+        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=send`,
+      visible: (objectData) => {
+        return objectData?.state?.type == 'draft'
+      }
+    },
+    {
+      name: 'markPaid',
+      label: 'Mark Paid',
+      type: 'button',
+      icon: CheckIcon,
+      url: (_id) =>
+        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=markPaid`,
+      visible: (objectData) => {
+        return (
+          objectData?.state?.type == 'sent' ||
+          objectData?.state?.type == 'partiallyPaid'
+        )
+      }
+    },
+    {
+      name: 'cancel',
+      label: 'Cancel',
+      type: 'button',
+      icon: XMarkIcon,
+      danger: true,
+      url: (_id) =>
+        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=cancel`,
+      disabled: (objectData) => {
+        return (
+          objectData?.state?.type == 'cancelled' ||
+          objectData?.state?.type == 'paid'
+        )
+      },
+      visible: (objectData) => {
+        return (
+          objectData?.state?.type == 'draft' ||
+          objectData?.state?.type == 'sent'
+        )
+      }
+    }
+  ],
+  group: ['vendor', 'customer', 'invoiceType'],
+  filters: ['vendor', 'customer', 'invoiceType'],
+  sorters: ['createdAt', 'state', 'updatedAt', 'invoiceDate', 'dueDate'],
+  columns: [
+    '_id',
+    '_reference',
+    'state',
+    'invoiceType',
+    'vendor',
+    'customer',
+    'invoiceDate',
+    'dueDate',
+    'totalAmount',
+    'totalAmountWithTax',
+    'totalTaxAmount',
+    'shippingAmount',
+    'shippingAmountWithTax',
+    'grandTotalAmount',
+    'createdAt',
+    'updatedAt'
+  ],
+  properties: [
+    {
+      name: '_id',
+      label: 'ID',
+      type: 'id',
+      columnFixed: 'left',
+      objectType: 'invoice',
+      columnWidth: 140,
+      showCopy: true
+    },
+    {
+      name: 'createdAt',
+      label: 'Created At',
+      type: 'dateTime',
+      readOnly: true
+    },
+    {
+      name: '_reference',
+      label: 'Reference',
+      type: 'reference',
+      required: true,
+      objectType: 'invoice',
+      showCopy: true,
+      readOnly: true
+    },
+    {
+      name: 'updatedAt',
+      label: 'Updated At',
+      type: 'dateTime',
+      readOnly: true
+    },
+    { name: 'state', label: 'State', type: 'state', readOnly: true },
+    {
+      name: 'invoiceDate',
+      label: 'Invoice Date',
+      type: 'date',
+      readOnly: false
+    },
+    {
+      name: 'dueDate',
+      label: 'Due Date',
+      type: 'date',
+      readOnly: false
+    },
+    {
+      name: 'vendor',
+      label: 'Vendor',
+      required: true,
+      type: 'object',
+      objectType: 'vendor',
+      showHyperlink: true,
+      visible: (objectData) => {
+        return objectData?.invoiceType === 'purchase' || objectData?.vendor
+      }
+    },
+    {
+      name: 'orderType',
+      label: 'Order Type',
+      type: 'objectType',
+      masterFilter: ['purchaseOrder', 'salesOrder'],
+      required: true
+    },
+    {
+      name: 'order',
+      label: 'Order',
+      type: 'object',
+      objectType: (objectData) => {
+        return objectData?.orderType
+      },
+      masterFilter: (objectData) => {
+        return {
+          vendor: objectData?.vendor?._id
+        }
+      },
+      required: true,
+      showHyperlink: true
+    },
+    {
+      name: 'sentAt',
+      label: 'Sent At',
+      type: 'dateTime',
+      readOnly: true
+    },
+    {
+      name: 'paidAt',
+      label: 'Paid At',
+      type: 'dateTime',
+      readOnly: true
+    },
+    {
+      name: 'cancelledAt',
+      label: 'Cancelled At',
+      type: 'dateTime',
+      readOnly: true
+    },
+    {
+      name: 'overdueAt',
+      label: 'Overdue At',
+      type: 'dateTime',
+      readOnly: true
+    },
+    {
+      name: 'totalTaxAmount',
+      label: 'Total Tax Amount',
+      type: 'number',
+      prefix: '£',
+      roundNumber: 2,
+      readOnly: true,
+      columnWidth: 175
+    },
+    {
+      name: 'totalAmountWithTax',
+      label: 'Total Amount w/ Tax',
+      type: 'number',
+      prefix: '£',
+      readOnly: true,
+      columnWidth: 175,
+      roundNumber: 2
+    },
+    {
+      name: 'shippingAmount',
+      label: 'Shipping Amount',
+      type: 'number',
+      prefix: '£',
+      roundNumber: 2,
+      readOnly: true,
+      columnWidth: 150
+    },
+    {
+      name: 'shippingAmountWithTax',
+      label: 'Shipping Amount w/ Tax',
+      type: 'number',
+      prefix: '£',
+      readOnly: true,
+      roundNumber: 2,
+      columnWidth: 200
+    },
+    {
+      name: 'totalAmount',
+      label: 'Total Amount',
+      type: 'number',
+      prefix: '£',
+      roundNumber: 2,
+      readOnly: true,
+      columnWidth: 150
+    },
+    {
+      name: 'grandTotalAmount',
+      label: 'Grand Total Amount',
+      type: 'number',
+      prefix: '£',
+      roundNumber: 2,
+      columnWidth: 175,
+      readOnly: true
+    }
+  ],
+  stats: [
+    {
+      name: 'draft.count',
+      label: 'Draft',
+      type: 'number',
+      color: 'default'
+    },
+    {
+      name: 'sent.count',
+      label: 'Sent',
+      type: 'number',
+      color: 'cyan'
+    },
+    {
+      name: 'partiallyPaid.count',
+      label: 'Partially Paid',
+      type: 'number',
+      color: 'processing'
+    },
+    {
+      name: 'paid.count',
+      label: 'Paid',
+      type: 'number',
+      color: 'success'
+    },
+    {
+      name: 'overdue.count',
+      label: 'Overdue',
+      type: 'number',
+      color: 'error'
+    },
+    {
+      name: 'cancelled.count',
+      label: 'Cancelled',
+      type: 'number',
+      color: 'default'
+    }
+  ]
+}
diff --git a/src/routes/FinanceRoutes.jsx b/src/routes/FinanceRoutes.jsx
new file mode 100644
index 0000000..35f975a
--- /dev/null
+++ b/src/routes/FinanceRoutes.jsx
@@ -0,0 +1,29 @@
+import { lazy } from 'react'
+import { Route } from 'react-router-dom'
+
+const Invoices = lazy(
+  () => import('../components/Dashboard/Finance/Invoices.jsx')
+)
+const InvoiceInfo = lazy(
+  () => import('../components/Dashboard/Finance/Invoices/InvoiceInfo.jsx')
+)
+const FinanceOverview = lazy(
+  () => import('../components/Dashboard/Finance/FinanceOverview.jsx')
+)
+
+const FinanceRoutes = [
+  <Route
+    key='overview'
+    path='finance/overview'
+    element={<FinanceOverview />}
+  />,
+  <Route key='invoices' path='finance/invoices' element={<Invoices />} />,
+  <Route
+    key='invoices-info'
+    path='finance/invoices/info'
+    element={<InvoiceInfo />}
+  />
+]
+
+export default FinanceRoutes
+
diff --git a/src/routes/index.js b/src/routes/index.js
index a99b9ef..57c46ab 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -1,4 +1,5 @@
 export { default as ProductionRoutes } from './ProductionRoutes'
 export { default as InventoryRoutes } from './InventoryRoutes'
+export { default as FinanceRoutes } from './FinanceRoutes'
 export { default as ManagementRoutes } from './ManagementRoutes'
 export { default as DeveloperRoutes } from './DeveloperRoutes'