Refactor SimpleDateTimePropertyFilter styles for improved layout and alignment

- Adjusted margins and alignment properties for the SimpleDateTimePropertyFilter component to enhance visual consistency.
- Updated styles for tree nodes and switchers to ensure better alignment and spacing within the component.

assets/icons/sortcirclefilledicon.svg

@@ -0,0 +1,7 @@
+<?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.889696,0,0,0.887145,3,3.004404)">
+        <path d="M65.191,32.59C65.191,50.56 50.592,65.181 32.59,65.181C14.621,65.181 0,50.56 0,32.59C0,14.599 14.621,0 32.59,0C50.592,0 65.191,14.599 65.191,32.59ZM21.127,17.509L13.242,25.633C12.808,26.079 12.495,26.691 12.495,27.302C12.495,28.65 13.45,29.624 14.829,29.624C15.43,29.624 16.052,29.406 16.465,28.928L20.404,24.868L20.501,24.753L20.475,26.04L20.475,46.139C20.475,47.465 21.491,48.481 22.828,48.481C24.175,48.481 25.191,47.465 25.191,46.139L25.191,26.019L25.16,24.683L25.324,24.868L29.274,28.928C29.72,29.406 30.279,29.624 30.921,29.624C32.259,29.624 33.191,28.65 33.191,27.302C33.191,26.713 32.954,26.079 32.528,25.633L24.631,17.509C23.69,16.537 22.049,16.547 21.127,17.509ZM39.936,19.053L39.936,39.173L39.958,40.423L39.866,40.315L35.937,36.243C35.534,35.808 34.912,35.579 34.258,35.579C32.932,35.579 31.967,36.532 31.967,37.89C31.967,38.501 32.268,39.113 32.714,39.571L40.579,47.673C41.511,48.636 43.13,48.646 44.093,47.673L52,39.571C52.414,39.113 52.663,38.48 52.663,37.89C52.663,36.532 51.751,35.579 50.372,35.579C49.751,35.579 49.18,35.808 48.724,36.243L44.786,40.315L44.629,40.493L44.651,39.195L44.651,19.053C44.651,17.727 43.626,16.733 42.299,16.733C40.942,16.733 39.936,17.727 39.936,19.053Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

assets/icons/sortcircleicon.svg

@@ -0,0 +1,9 @@
+<?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.887145,0,0,0.887145,3,3.004404)">
+        <rect x="0" y="0" width="65.378" height="65.212" style="fill-opacity:0;"/>
+        <path d="M32.59,65.181C50.592,65.181 65.191,50.582 65.191,32.59C65.191,14.599 50.592,0 32.59,0C14.599,0 0,14.599 0,32.59C0,50.582 14.599,65.181 32.59,65.181ZM32.59,58.02C18.529,58.02 7.161,46.652 7.161,32.59C7.161,18.529 18.529,7.161 32.59,7.161C46.652,7.161 58.03,18.529 58.03,32.59C58.03,46.652 46.652,58.02 32.59,58.02Z" style="fill-rule:nonzero;"/>
+        <path d="M23.228,47.784C24.494,47.784 25.468,46.819 25.468,45.554L25.468,26.266L25.404,22.761C25.383,21.569 24.42,20.585 23.228,20.585C22.046,20.585 21.083,21.569 21.062,22.761L20.988,26.288L20.988,45.554C20.988,46.819 21.953,47.784 23.228,47.784ZM33.14,27.518C33.14,26.97 32.893,26.346 32.498,25.941L24.94,18.166C24.039,17.234 22.491,17.244 21.61,18.166L14.063,25.941C13.639,26.346 13.357,26.948 13.357,27.518C13.357,28.815 14.271,29.738 15.577,29.738C16.148,29.738 16.739,29.519 17.133,29.073L20.878,25.194L23.207,22.452L25.65,25.194L29.417,29.073C29.822,29.519 30.362,29.738 30.962,29.738C32.249,29.738 33.14,28.815 33.14,27.518ZM41.856,17.43C40.581,17.43 39.616,18.363 39.616,19.629L39.616,38.916L39.69,42.422C39.712,43.623 40.675,44.608 41.856,44.608C43.048,44.608 44.011,43.623 44.032,42.422L44.096,38.938L44.096,19.629C44.096,18.363 43.122,17.43 41.856,17.43ZM51.748,37.674C51.748,36.378 50.878,35.466 49.581,35.466C48.99,35.466 48.45,35.694 48.014,36.109L44.269,39.998L41.835,42.74L39.496,39.998L35.751,36.109C35.367,35.694 34.787,35.466 34.174,35.466C32.899,35.466 31.976,36.378 31.976,37.674C31.976,38.244 32.277,38.836 32.692,39.272L40.229,47.027C41.109,47.938 42.636,47.958 43.558,47.027L51.126,39.272C51.541,38.836 51.748,38.223 51.748,37.674Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

assets/stylesheets/App.css

@@ -344,7 +344,8 @@ body {
   overflow: hidden;
 }
 
-.ant-modal-mask {
+.ant-modal-mask,
+.ant-drawer-mask {
   backdrop-filter: blur(3px);
 }
 
@@ -512,6 +513,24 @@ body {
   height: 8px !important;
 }
 
+.scrollbox-inner .simplebar-track.simplebar-vertical {
+  right: var(--scrollbox-vertical-right-padding);
+}
+
+.scrollbox-inner .simplebar-track.simplebar-horizontal {
+  bottom: var(--scrollbox-horizontal-bottom-padding);
+}
+
+.scrollbox-inner-small-padding .simplebar-track.simplebar-vertical {
+  right: 8px;
+  bottom: 8px;
+  top: 8px;
+}
+
+.scrollbox-inner-small-padding .simplebar-track.simplebar-horizontal {
+  bottom: 8px;
+}
+
 .simplebar-scrollbar:before {
   background: #78787854 !important;
 }
@@ -967,7 +986,8 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 }
 
 .electron-body .ant-modal-wrap,
-.electron-body .ant-modal-mask {
+.electron-body .ant-modal-mask,
+.electron-body .ant-drawer {
   top: 41px;
 }
 
@@ -1086,3 +1106,27 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   margin-inline-start: 0;
   margin-top: 4px;
 }
+
+.simple-date-time-property-filter {
+  margin: -6px 0;
+}
+
+.simple-date-time-property-filter.ant-tree .ant-tree-treenode {
+  margin-bottom: 0;
+  height: 40px;
+  align-items: center;
+}
+
+.simple-date-time-property-filter.ant-tree .ant-tree-switcher {
+  align-self: center;
+}
+
+.simple-date-time-property-filter.ant-tree .ant-tree-switcher-leaf-line:after {
+  height: 0;
+  top: -5px;
+}
+
+.simple-date-time-property-filter.ant-tree .ant-tree-switcher-leaf-line:before {
+  top: -16px;
+  bottom: -24px;
+}

src/components/Dashboard/Finance/Invoices.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const Invoices = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Invoices')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Invoices')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const Invoices = () => {
             <ExportListButton objectType='invoice' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const Invoices = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const Invoices = () => {
           type='invoice'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx

@@ -26,10 +26,7 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import {
-  getModelByName,
-  getModelProperty
-} from '../../../../database/ObjectModels.js'
+import { getModelProperty } from '../../../../database/ObjectModels.js'
 import OrderItemIcon from '../../../Icons/OrderItemIcon.jsx'
 import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
 
@@ -65,6 +62,7 @@ const InvoiceInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -87,11 +85,6 @@ const InvoiceInfo = () => {
     },
   }
 
-  const editDisabled =
-    getModelByName('invoice')
-      ?.actions?.find((action) => action.name === 'edit')
-      ?.disabled(objectFormState.objectData) ?? false
-
   return (
       <Flex
         gap='large'
@@ -156,7 +149,7 @@ const InvoiceInfo = () => {
               disabled={
                 objectFormState.beingEditedByOther ||
                 objectFormState.loading ||
-                editDisabled
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Finance/Payments.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const Payments = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Payments')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Payments')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const Payments = () => {
             <ExportListButton objectType='payment' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const Payments = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const Payments = () => {
           type='payment'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Finance/Payments/PaymentInfo.jsx

@@ -24,7 +24,6 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import { getModelByName } from '../../../../database/ObjectModels.js'
 
 const log = loglevel.getLogger('PaymentInfo')
 log.setLevel(config.logLevel)
@@ -55,6 +54,7 @@ const PaymentInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -77,11 +77,6 @@ const PaymentInfo = () => {
     },
   }
 
-  const editDisabled =
-    getModelByName('payment')
-      ?.actions?.find((action) => action.name === 'edit')
-      ?.disabled(objectFormState.objectData) ?? false
-
   return (
       <Flex
         gap='large'
@@ -143,7 +138,7 @@ const PaymentInfo = () => {
               disabled={
                 objectFormState.beingEditedByOther ||
                 objectFormState.loading ||
-                editDisabled
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Finance/TaxRecords.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const TaxRecords = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('TaxRecords')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('TaxRecords')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const TaxRecords = () => {
             <ExportListButton objectType='taxRecord' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const TaxRecords = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const TaxRecords = () => {
           type='taxRecord'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx

@@ -45,6 +45,7 @@ const TaxRecordInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -124,7 +125,9 @@ const TaxRecordInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Inventory/FilamentStocks.jsx

@@ -11,8 +11,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -29,6 +31,9 @@ const FilamentStocks = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('FilamentStocks')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('FilamentStocks')
+
   const actionItems = {
     items: [
       {
@@ -69,6 +74,10 @@ const FilamentStocks = () => {
             <ExportListButton objectType='filamentStock' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -76,6 +85,7 @@ const FilamentStocks = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -86,6 +96,7 @@ const FilamentStocks = () => {
           type='filamentStock'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx

@@ -47,6 +47,7 @@ const FilamentStockInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -123,7 +124,11 @@ const FilamentStockInfo = () => {
               }}
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
-              disabled={true}
+              disabled={
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
+              }
               loading={objectFormState.editLoading}
             />
             <ObjectTableNavigationButtons

src/components/Dashboard/Inventory/OrderItems.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const OrderItems = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('OrderItems')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('OrderItems')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const OrderItems = () => {
             <ExportListButton objectType='orderItem' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const OrderItems = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const OrderItems = () => {
           type='orderItem'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx

@@ -46,6 +46,7 @@ const OrderItemInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -123,7 +124,9 @@ const OrderItemInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Inventory/PartStocks.jsx

@@ -11,8 +11,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -29,6 +31,9 @@ const PartStocks = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('PartStocks')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('PartStocks')
+
   const actionItems = {
     items: [
       {
@@ -69,6 +74,10 @@ const PartStocks = () => {
             <ExportListButton objectType='partStock' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -76,6 +85,7 @@ const PartStocks = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -86,6 +96,7 @@ const PartStocks = () => {
           type='partStock'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx

@@ -52,6 +52,7 @@ const PartStockInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -132,7 +133,9 @@ const PartStockInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Inventory/ProductStocks.jsx

@@ -12,8 +12,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -30,6 +32,9 @@ const ProductStocks = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('ProductStocks')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('ProductStocks')
+
   const actionItems = {
     items: [
       {
@@ -70,6 +75,10 @@ const ProductStocks = () => {
             <ExportListButton objectType='productStock' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -77,6 +86,7 @@ const ProductStocks = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -87,6 +97,7 @@ const ProductStocks = () => {
           type='productStock'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx

@@ -10,10 +10,7 @@ import InfoCollapse from '../../common/InfoCollapse.jsx'
 import ObjectInfo from '../../common/ObjectInfo.jsx'
 import ObjectProperty from '../../common/ObjectProperty.jsx'
 import ViewButton from '../../common/ViewButton.jsx'
-import {
-  getModelProperty,
-  getModelByName
-} from '../../../../database/ObjectModels.js'
+import { getModelProperty } from '../../../../database/ObjectModels.js'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
@@ -71,6 +68,7 @@ const ProductStockInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -93,11 +91,6 @@ const ProductStockInfo = () => {
     },
   }
 
-  const editDisabled =
-    getModelByName('productStock')
-      ?.actions?.find((action) => action.name === 'edit')
-      ?.disabled(objectFormState.objectData) ?? false
-
   return (
       <Flex
         gap='large'
@@ -162,7 +155,7 @@ const ProductStockInfo = () => {
               disabled={
                 objectFormState.beingEditedByOther ||
                 objectFormState.loading ||
-                editDisabled
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Inventory/PurchaseOrders.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const PurchaseOrders = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('PurchaseOrders')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('PurchaseOrders')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const PurchaseOrders = () => {
             <ExportListButton objectType='purchaseOrder' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const PurchaseOrders = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const PurchaseOrders = () => {
           type='purchaseOrder'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx

@@ -28,7 +28,6 @@ import OrderItemsIcon from '../../../Icons/OrderItemIcon.jsx'
 import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
 import InvoiceIcon from '../../../Icons/InvoiceIcon.jsx'
 import StockEventIcon from '../../../Icons/StockEventIcon.jsx'
-import { getModelByName } from '../../../../database/ObjectModels.js'
 
 const log = loglevel.getLogger('PurchaseOrderInfo')
 log.setLevel(config.logLevel)
@@ -70,6 +69,7 @@ const PurchaseOrderInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -95,10 +95,6 @@ const PurchaseOrderInfo = () => {
     },
   }
 
-  const editDisabled = getModelByName('purchaseOrder')
-    .actions.find((action) => action.name === 'edit')
-    .disabled(objectFormState.objectData)
-
   return (
       <Flex
         gap='large'
@@ -164,7 +160,7 @@ const PurchaseOrderInfo = () => {
               disabled={
                 objectFormState.beingEditedByOther ||
                 objectFormState.loading ||
-                editDisabled
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Inventory/Shipments.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const Shipments = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Shipments')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Shipments')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const Shipments = () => {
             <ExportListButton objectType='shipment' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const Shipments = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const Shipments = () => {
           type='shipment'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx

@@ -61,6 +61,7 @@ const PurchaseOrderInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -159,7 +160,9 @@ const PurchaseOrderInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx

@@ -58,6 +58,7 @@ const ShipmentInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
   const actions = {
@@ -138,7 +139,9 @@ const ShipmentInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Inventory/StockAudits.jsx

@@ -11,8 +11,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -29,6 +31,9 @@ const StockAudits = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('StockAudits')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('StockAudits')
+
   const actionItems = {
     items: [
       {
@@ -69,6 +74,10 @@ const StockAudits = () => {
             <ExportListButton objectType='stockAudit' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -76,6 +85,7 @@ const StockAudits = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -86,6 +96,7 @@ const StockAudits = () => {
           type='stockAudit'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx

@@ -48,6 +48,7 @@ const StockAuditInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -126,7 +127,9 @@ const StockAuditInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Inventory/StockEvents.jsx

@@ -4,8 +4,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 import ReloadIcon from '../../Icons/ReloadIcon'
@@ -20,6 +22,9 @@ const StockEvents = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('StockEvents')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('StockEvents')
+
   const actionItems = {
     items: [
       {
@@ -52,6 +57,10 @@ const StockEvents = () => {
             <ExportListButton objectType='stockEvent' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -59,6 +68,7 @@ const StockEvents = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -69,6 +79,7 @@ const StockEvents = () => {
           type='stockEvent'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Inventory/StockLocations.jsx

@@ -9,8 +9,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -27,6 +29,9 @@ const StockLocations = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('StockLocations')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('StockLocations')
+
   const actionItems = {
     items: [
       {
@@ -67,6 +72,10 @@ const StockLocations = () => {
             <ExportListButton objectType='stockLocation' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -74,6 +83,7 @@ const StockLocations = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -84,6 +94,7 @@ const StockLocations = () => {
           type='stockLocation'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx

@@ -49,6 +49,7 @@ const StockLocationInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -127,7 +128,9 @@ const StockLocationInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Inventory/StockTransfers.jsx

@@ -9,8 +9,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -27,6 +29,9 @@ const StockTransfers = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('StockTransfers')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('StockTransfers')
+
   const actionItems = {
     items: [
       {
@@ -67,6 +72,10 @@ const StockTransfers = () => {
             <ExportListButton objectType='stockTransfer' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -74,6 +83,7 @@ const StockTransfers = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -84,6 +94,7 @@ const StockTransfers = () => {
           type='stockTransfer'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx

@@ -8,10 +8,7 @@ import InfoCollapse from '../../common/InfoCollapse.jsx'
 import ObjectInfo from '../../common/ObjectInfo.jsx'
 import ObjectProperty from '../../common/ObjectProperty.jsx'
 import ViewButton from '../../common/ViewButton.jsx'
-import {
-  getModelProperty,
-  getModelByName
-} from '../../../../database/ObjectModels.js'
+import { getModelProperty } from '../../../../database/ObjectModels.js'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
@@ -61,6 +58,7 @@ const StockTransferInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -83,11 +81,6 @@ const StockTransferInfo = () => {
     },
   }
 
-  const editDisabled =
-    getModelByName('stockTransfer')
-      ?.actions?.find((action) => action.name === 'edit')
-      ?.disabled(objectFormState.objectData) ?? false
-
   return (
       <Flex
         gap='large'
@@ -150,7 +143,7 @@ const StockTransferInfo = () => {
               disabled={
                 objectFormState.beingEditedByOther ||
                 objectFormState.loading ||
-                editDisabled
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/AppPasswords.jsx

@@ -8,8 +8,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
 
 const AppPasswords = () => {
@@ -23,6 +25,9 @@ const AppPasswords = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('AppPasswords')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('AppPasswords')
+
   const actionItems = {
     items: [
       {
@@ -63,6 +68,10 @@ const AppPasswords = () => {
             <ExportListButton objectType='appPassword' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -70,6 +79,7 @@ const AppPasswords = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const AppPasswords = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/AppPasswords/AppPasswordInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useContext } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -20,8 +20,6 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import { getModelByName } from '../../../../database/ObjectModels.js'
-import { AuthContext } from '../../context/AuthContext.jsx'
 
 const AppPasswordInfo = () => {
   const location = useLocation()
@@ -36,7 +34,6 @@ const AppPasswordInfo = () => {
     })
     return () => setOnModalOk(null)
   }, [setOnModalOk])
-  const { userProfile } = useContext(AuthContext)
   const appPasswordId = new URLSearchParams(location.search).get(
     'appPasswordId'
   )
@@ -53,6 +50,7 @@ const AppPasswordInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -71,10 +69,6 @@ const AppPasswordInfo = () => {
     }
   }
 
-  const editDisabled = getModelByName('appPassword')
-    .actions.find((action) => action.name === 'edit')
-    .disabled({ ...objectFormState.objectData, _user: userProfile })
-
   return (
       <Flex
         gap='large'
@@ -132,7 +126,7 @@ const AppPasswordInfo = () => {
               disabled={
                 objectFormState.beingEditedByOther ||
                 objectFormState.loading ||
-                editDisabled
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/AuditLogs.jsx

@@ -4,8 +4,10 @@ import { Button, Flex, Space, Dropdown } from 'antd'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ObjectTable from '../common/ObjectTable'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -18,6 +20,9 @@ const AuditLogs = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('AuditLogs')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('AuditLogs')
+
   const actionItems = {
     items: [
       {
@@ -50,6 +55,10 @@ const AuditLogs = () => {
             <ExportListButton objectType='auditLog' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -62,6 +71,7 @@ const AuditLogs = () => {
           visibleColumns={columnVisibility}
           type='auditLog'
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/CourierServices.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const CourierServices = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('CourierServices')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('CourierServices')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const CourierServices = () => {
             <ExportListButton objectType='courierService' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const CourierServices = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const CourierServices = () => {
           type='courierService'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx

@@ -47,6 +47,7 @@ const CourierServiceInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -126,7 +127,9 @@ const CourierServiceInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/Couriers.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -23,6 +25,9 @@ const Couriers = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Couriers')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Couriers')
+
   const actionItems = {
     items: [
       {
@@ -63,6 +68,10 @@ const Couriers = () => {
             <ExportListButton objectType='courier' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -70,6 +79,7 @@ const Couriers = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -79,6 +89,7 @@ const Couriers = () => {
           type='courier'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/Couriers/CourierInfo.jsx

@@ -43,6 +43,7 @@ const CourierInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -122,7 +123,9 @@ const CourierInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/DocumentJobs.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const DocumentJobs = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('DocumentJobs')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('DocumentJobs')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const DocumentJobs = () => {
             <ExportListButton objectType='documentJob' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const DocumentJobs = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const DocumentJobs = () => {
           type='documentJob'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx

@@ -48,6 +48,7 @@ const DocumentJobInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -123,7 +124,9 @@ const DocumentJobInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/DocumentPrinters.jsx

@@ -6,8 +6,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 import NewDocumentPrinter from './DocumentPrinters/NewDocumentPrinter'
@@ -23,6 +25,9 @@ const DocumentPrinters = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('DocumentPrinters')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('DocumentPrinters')
+
   const actionItems = {
     items: [
       {
@@ -63,6 +68,10 @@ const DocumentPrinters = () => {
             <ExportListButton objectType='documentPrinter' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -70,6 +79,7 @@ const DocumentPrinters = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -79,6 +89,7 @@ const DocumentPrinters = () => {
           type='documentPrinter'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx

@@ -50,6 +50,7 @@ const DocumentPrinterInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -131,7 +132,9 @@ const DocumentPrinterInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/DocumentSizes.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -22,6 +24,9 @@ const DocumentSizes = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('DocumentSizes')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('DocumentSizes')
+
   const actionItems = {
     items: [
       {
@@ -62,6 +67,10 @@ const DocumentSizes = () => {
             <ExportListButton objectType='documentSize' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -69,6 +78,7 @@ const DocumentSizes = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -78,6 +88,7 @@ const DocumentSizes = () => {
           type='documentSize'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx

@@ -48,6 +48,7 @@ const DocumentSizeInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -123,7 +124,9 @@ const DocumentSizeInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/DocumentTemplates.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const DocumentTemplates = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('DocumentTemplates')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('DocumentTemplates')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const DocumentTemplates = () => {
             <ExportListButton objectType='documentTemplate' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const DocumentTemplates = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const DocumentTemplates = () => {
           type='documentTemplate'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx

@@ -50,6 +50,7 @@ const DocumentTemplateInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -128,7 +129,9 @@ const DocumentTemplateInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/FilamentSkus.jsx

@@ -9,8 +9,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -27,6 +29,9 @@ const FilamentSkus = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('FilamentSkus')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('FilamentSkus')
+
   const actionItems = {
     items: [
       {
@@ -67,6 +72,10 @@ const FilamentSkus = () => {
             <ExportListButton objectType='filamentSku' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -74,6 +83,7 @@ const FilamentSkus = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -84,6 +94,7 @@ const FilamentSkus = () => {
           type='filamentSku'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx

@@ -42,6 +42,7 @@ const FilamentSkuInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -121,7 +122,9 @@ const FilamentSkuInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/Filaments.jsx

@@ -13,8 +13,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useViewMode from '../hooks/useViewMode'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import ExportListButton from '../common/ExportListButton'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 
 const Filaments = () => {
   const [newFilamentOpen, setNewFilamentOpen] = useState(false)
@@ -29,6 +31,9 @@ const Filaments = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Filaments')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Filaments')
+
   const actionItems = {
     items: [
       {
@@ -69,6 +74,10 @@ const Filaments = () => {
             <ExportListButton objectType='filament' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -76,6 +85,7 @@ const Filaments = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -86,6 +96,7 @@ const Filaments = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/Filaments/FilamentInfo.jsx

@@ -61,6 +61,7 @@ const FilamentInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -144,7 +145,9 @@ const FilamentInfo = () => {
             editLoading={objectFormState.editLoading}
             formValid={objectFormState.formValid}
             disabled={
-              objectFormState.beingEditedByOther || objectFormState.loading
+              objectFormState.beingEditedByOther ||
+              objectFormState.loading ||
+              objectFormState.editDisabled
             }
             loading={objectFormState.editLoading}
           />

src/components/Dashboard/Management/Files.jsx

@@ -5,8 +5,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +22,9 @@ const Files = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Files')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Files')
+
   const actionItems = {
     items: [
       {
@@ -52,6 +57,10 @@ const Files = () => {
             <ExportListButton objectType='file' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -59,6 +68,7 @@ const Files = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -68,6 +78,7 @@ const Files = () => {
           type='file'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/Files/FileInfo.jsx

@@ -49,6 +49,7 @@ const FileInfo = () => {
     formValid: false,
     lock: null,
     loading: true,
+    editDisabled: false,
     objectData: {
       _id: fileId
     }
@@ -137,7 +138,9 @@ const FileInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/Hosts.jsx

@@ -14,7 +14,9 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useViewMode from '../hooks/useViewMode'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 
 const Hosts = () => {
   const [newHostOpen, setNewHostOpen] = useState(false)
@@ -28,6 +30,9 @@ const Hosts = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Hosts')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Hosts')
+
   const actionItems = {
     items: [
       {
@@ -68,6 +73,10 @@ const Hosts = () => {
             <ExportListButton objectType='host' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -75,6 +84,7 @@ const Hosts = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -85,6 +95,7 @@ const Hosts = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/Hosts/HostInfo.jsx

@@ -57,6 +57,7 @@ const HostInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -140,7 +141,9 @@ const HostInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/Materials.jsx

@@ -10,8 +10,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
 
 const Materials = () => {
@@ -26,6 +28,9 @@ const Materials = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Materials')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Materials')
+
   const actionItems = {
     items: [
       {
@@ -66,6 +71,10 @@ const Materials = () => {
             <ExportListButton objectType='material' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -73,6 +82,7 @@ const Materials = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -83,6 +93,7 @@ const Materials = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/Materials/MaterialInfo.jsx

@@ -45,6 +45,7 @@ const MaterialInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -124,7 +125,9 @@ const MaterialInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/NoteTypes.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const NoteTypes = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('NoteTypes')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('NoteTypes')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const NoteTypes = () => {
             <ExportListButton objectType='noteType' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const NoteTypes = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const NoteTypes = () => {
           type='noteType'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx

@@ -38,6 +38,7 @@ const NoteTypeInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -112,7 +113,9 @@ const NoteTypeInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/Notes/NoteInfo.jsx

@@ -47,6 +47,7 @@ const NoteInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -127,7 +128,9 @@ const NoteInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/PartSkus.jsx

@@ -9,8 +9,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -26,6 +28,9 @@ const PartSkus = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('PartSkus')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('PartSkus')
+
   const actionItems = {
     items: [
       {
@@ -66,6 +71,10 @@ const PartSkus = () => {
             <ExportListButton objectType='partSku' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -73,6 +82,7 @@ const PartSkus = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -83,6 +93,7 @@ const PartSkus = () => {
           type='partSku'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx

@@ -37,6 +37,7 @@ const PartSkuInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -116,7 +117,9 @@ const PartSkuInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/Parts.jsx

@@ -14,7 +14,9 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import useViewMode from '../hooks/useViewMode'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
@@ -28,6 +30,9 @@ const Parts = (filter) => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Parts')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Parts')
+
   const actionItems = {
     items: [
       {
@@ -68,6 +73,10 @@ const Parts = (filter) => {
             <ExportListButton objectType='part' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -75,6 +84,7 @@ const Parts = (filter) => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -85,6 +95,7 @@ const Parts = (filter) => {
           cards={viewMode === 'cards'}
           filter={filter}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/Parts/PartInfo.jsx

@@ -50,6 +50,7 @@ const PartInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -125,7 +126,9 @@ const PartInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/ProductCategories.jsx

@@ -10,8 +10,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
 
 const ProductCategories = () => {
@@ -26,6 +28,9 @@ const ProductCategories = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('ProductCategories')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('ProductCategories')
+
   const actionItems = {
     items: [
       {
@@ -66,6 +71,10 @@ const ProductCategories = () => {
             <ExportListButton objectType='productCategory' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -73,6 +82,7 @@ const ProductCategories = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -83,6 +93,7 @@ const ProductCategories = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx

@@ -42,6 +42,7 @@ const ProductCategoryInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -121,7 +122,9 @@ const ProductCategoryInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/ProductSkus.jsx

@@ -9,8 +9,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -27,6 +29,9 @@ const ProductSkus = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('ProductSkus')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('ProductSkus')
+
   const actionItems = {
     items: [
       {
@@ -67,6 +72,10 @@ const ProductSkus = () => {
             <ExportListButton objectType='productSku' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -74,6 +83,7 @@ const ProductSkus = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -84,6 +94,7 @@ const ProductSkus = () => {
           type='productSku'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx

@@ -44,6 +44,7 @@ const ProductSkuInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -124,7 +125,9 @@ const ProductSkuInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/Products.jsx

@@ -27,8 +27,10 @@ import CheckIcon from '../../Icons/CheckIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
 
 const Products = () => {
@@ -239,6 +241,9 @@ const Products = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Products')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Products')
+
   const actionItems = {
     items: [
       {
@@ -340,6 +345,10 @@ const Products = () => {
             </Popover>
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -347,6 +356,7 @@ const Products = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -355,6 +365,7 @@ const Products = () => {
           type={'product'}
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/Products/ProductInfo.jsx

@@ -50,6 +50,7 @@ const ProductInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -125,7 +126,9 @@ const ProductInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/TaxRates.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -23,6 +25,9 @@ const TaxRates = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('TaxRates')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('TaxRates')
+
   const actionItems = {
     items: [
       {
@@ -63,6 +68,10 @@ const TaxRates = () => {
             <ExportListButton objectType='taxRate' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -70,6 +79,7 @@ const TaxRates = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -79,6 +89,7 @@ const TaxRates = () => {
           type='taxRate'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx

@@ -42,6 +42,7 @@ const TaxRateInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -121,7 +122,9 @@ const TaxRateInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Management/Users.jsx

@@ -5,8 +5,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +22,9 @@ const Users = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Users')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Users')
+
   const actionItems = {
     items: [
       {
@@ -51,6 +56,10 @@ const Users = () => {
           <ExportListButton objectType='user' />
         </Space>
         <Space>
+          <SortSidebarButton
+            active={showSortSidebar}
+            onClick={() => setShowSortSidebar(!showSortSidebar)}
+          />
           <FilterSidebarButton
             active={showFilterSidebar}
             onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -67,6 +76,7 @@ const Users = () => {
         visibleColumns={columnVisibility}
         cards={viewMode === 'cards'}
         showFilterSidebar={showFilterSidebar}
+        showSortSidebar={showSortSidebar}
         expandHeight={true}
         saveFilterInSession={true}
         saveFilterInUrl={true}

src/components/Dashboard/Management/Users/UserInfo.jsx

@@ -44,6 +44,7 @@ const UserInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
   const isMobile = useMediaQuery({ maxWidth: 768 })
@@ -120,7 +121,9 @@ const UserInfo = () => {
             editLoading={objectFormState.editLoading}
             formValid={objectFormState.formValid}
             disabled={
-              objectFormState.beingEditedByOther || objectFormState.loading
+              objectFormState.beingEditedByOther ||
+              objectFormState.loading ||
+              objectFormState.editDisabled
             }
             loading={objectFormState.editLoading}
           />

src/components/Dashboard/Management/Vendors.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -23,6 +25,9 @@ const Vendors = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Vendors')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Vendors')
+
   const actionItems = {
     items: [
       {
@@ -63,6 +68,10 @@ const Vendors = () => {
             <ExportListButton objectType='vendor' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -70,6 +79,7 @@ const Vendors = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -79,6 +89,7 @@ const Vendors = () => {
           type='vendor'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Management/Vendors/VendorInfo.jsx

@@ -42,6 +42,7 @@ const VendorInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -121,7 +122,9 @@ const VendorInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Production/FilamentProfiles.jsx

@@ -4,12 +4,14 @@ import NewFilamentProfile from './FilamentProfiles/NewFilamentProfile'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import useViewMode from '../hooks/useViewMode'
 
 const FilamentProfiles = () => {
@@ -21,6 +23,9 @@ const FilamentProfiles = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('FilamentProfiles')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('FilamentProfiles')
+
   const actionItems = {
     items: [
       {
@@ -60,6 +65,10 @@ const FilamentProfiles = () => {
             <ExportListButton objectType='filamentProfile' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -67,6 +76,7 @@ const FilamentProfiles = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -77,6 +87,7 @@ const FilamentProfiles = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx

@@ -80,6 +80,7 @@ const FilamentProfileInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -166,7 +167,11 @@ const FilamentProfileInfo = () => {
             startEditing={() => actionHandlerRef.current.callAction('edit')}
             editLoading={objectFormState.editLoading}
             formValid={objectFormState.formValid}
-            disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+            disabled={
+              objectFormState.beingEditedByOther ||
+              objectFormState.loading ||
+              objectFormState.editDisabled
+            }
             loading={objectFormState.editLoading}
           />
           <ObjectTableNavigationButtons

src/components/Dashboard/Production/GCodeFiles.jsx

@@ -9,8 +9,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
@@ -26,6 +28,9 @@ const GCodeFiles = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('GCodeFiles')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('GCodeFiles')
+
   const actionItems = {
     items: [
       {
@@ -66,6 +71,10 @@ const GCodeFiles = () => {
             <ExportListButton objectType='gcodeFile' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -73,6 +82,7 @@ const GCodeFiles = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -82,6 +92,7 @@ const GCodeFiles = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx

@@ -51,6 +51,7 @@ const GCodeFileInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -130,7 +131,9 @@ const GCodeFileInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Production/Jobs.jsx

@@ -10,8 +10,10 @@ import ObjectTable from '../common/ObjectTable.jsx'
 import useViewMode from '../hooks/useViewMode.jsx'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import ColumnViewButton from '../common/ColumnViewButton.jsx'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility.jsx'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton.jsx'
 
 const Jobs = () => {
@@ -24,6 +26,8 @@ const Jobs = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Jobs')
 
+  const [showSortSidebar, setShowSortSidebar] = useSortSidebarVisibility('Jobs')
+
   const actionItems = {
     items: [
       {
@@ -69,6 +73,10 @@ const Jobs = () => {
           </Space>
 
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -76,6 +84,7 @@ const Jobs = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -86,6 +95,7 @@ const Jobs = () => {
           visibleColumns={columnVisibility}
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Production/Jobs/JobInfo.jsx

@@ -25,7 +25,6 @@ import JobIcon from '../../../Icons/JobIcon.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import { getModelByName } from '../../../../database/ObjectModels.js'
 
 const log = loglevel.getLogger('JobInfo')
 log.setLevel(config.logLevel)
@@ -57,16 +56,12 @@ const JobInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {
       _id: jobId
     }
   })
 
-  const editDisabled =
-    getModelByName('job')
-      ?.actions?.find((action) => action.name === 'edit')
-      ?.disabled(objectFormState.objectData) ?? false
-
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -144,7 +139,7 @@ const JobInfo = () => {
               disabled={
                 objectFormState.beingEditedByOther ||
                 objectFormState.loading ||
-                editDisabled
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Production/PrinterProfiles.jsx

@@ -4,12 +4,14 @@ import NewPrinterProfile from './PrinterProfiles/NewPrinterProfile'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import ObjectTable from '../common/ObjectTable'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import useViewMode from '../hooks/useViewMode'
 const PrinterProfiles = () => {
   const [newProfileOpen, setNewProfileOpen] = useState(false)
@@ -20,6 +22,9 @@ const PrinterProfiles = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('PrinterProfiles')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('PrinterProfiles')
+
   const actionItems = {
     items: [
       {
@@ -59,6 +64,10 @@ const PrinterProfiles = () => {
             <ExportListButton objectType='printerProfile' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -66,6 +75,7 @@ const PrinterProfiles = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -76,6 +86,7 @@ const PrinterProfiles = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx

@@ -59,6 +59,7 @@ const PrinterProfileInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -139,7 +140,11 @@ const PrinterProfileInfo = () => {
             startEditing={() => actionHandlerRef.current.callAction('edit')}
             editLoading={objectFormState.editLoading}
             formValid={objectFormState.formValid}
-            disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+            disabled={
+              objectFormState.beingEditedByOther ||
+              objectFormState.loading ||
+              objectFormState.editDisabled
+            }
             loading={objectFormState.editLoading}
           />
           <ObjectTableNavigationButtons

src/components/Dashboard/Production/Printers.jsx

@@ -11,9 +11,11 @@ import ExportListButton from '../common/ExportListButton'
 
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 
 const Printers = () => {
   const [newPrinterOpen, setNewPrinterOpen] = useState(false)
@@ -29,6 +31,9 @@ const Printers = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Printers')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Printers')
+
   const actionItems = {
     items: [
       {
@@ -69,6 +74,10 @@ const Printers = () => {
             <ExportListButton objectType='printer' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -76,6 +85,7 @@ const Printers = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -84,6 +94,7 @@ const Printers = () => {
           ref={tableRef}
           type='printer'
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           expandHeight={true}

src/components/Dashboard/Production/Printers/PrinterInfo.jsx

@@ -51,6 +51,7 @@ const PrinterInfo = () => {
     formValid: false,
     activities: [],
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -137,7 +138,9 @@ const PrinterInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Production/SubJobs.jsx

@@ -8,8 +8,10 @@ import ObjectTable from '../common/ObjectTable.jsx'
 import useViewMode from '../hooks/useViewMode.jsx'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import ColumnViewButton from '../common/ColumnViewButton.jsx'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility.jsx'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton.jsx'
 
 const SubJobs = () => {
@@ -21,6 +23,9 @@ const SubJobs = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('SubJobs')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('SubJobs')
+
   const actionItems = {
     items: [
       {
@@ -54,6 +59,10 @@ const SubJobs = () => {
           </Space>
 
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -61,6 +70,7 @@ const SubJobs = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -71,6 +81,7 @@ const SubJobs = () => {
           visibleColumns={columnVisibility}
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Sales/Clients.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -23,6 +25,9 @@ const Clients = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Clients')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Clients')
+
   const actionItems = {
     items: [
       {
@@ -63,6 +68,10 @@ const Clients = () => {
             <ExportListButton objectType='client' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -70,6 +79,7 @@ const Clients = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -79,6 +89,7 @@ const Clients = () => {
           type='client'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Sales/Clients/ClientInfo.jsx

@@ -42,6 +42,7 @@ const ClientInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -121,7 +122,9 @@ const ClientInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx

@@ -57,6 +57,7 @@ const ListingVarientInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -135,7 +136,9 @@ const ListingVarientInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Sales/Listings.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const Listings = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Listings')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Listings')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const Listings = () => {
             <ExportListButton objectType='listing' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const Listings = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const Listings = () => {
           type='listing'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Sales/Listings/ListingInfo.jsx

@@ -55,6 +55,7 @@ const ListingInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -134,7 +135,9 @@ const ListingInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Sales/Marketplaces.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const Marketplaces = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Marketplaces')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Marketplaces')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const Marketplaces = () => {
             <ExportListButton objectType='marketplace' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const Marketplaces = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const Marketplaces = () => {
           type='marketplace'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx

@@ -66,6 +66,7 @@ const MarketplaceInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -202,7 +203,9 @@ const MarketplaceInfo = () => {
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
               disabled={
-                objectFormState.beingEditedByOther || objectFormState.loading
+                objectFormState.beingEditedByOther ||
+                objectFormState.loading ||
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/Sales/SalesOrders.jsx

@@ -7,8 +7,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -24,6 +26,9 @@ const SalesOrders = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('SalesOrders')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('SalesOrders')
+
   const actionItems = {
     items: [
       {
@@ -64,6 +69,10 @@ const SalesOrders = () => {
             <ExportListButton objectType='salesOrder' />
           </Space>
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -71,6 +80,7 @@ const SalesOrders = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>
@@ -80,6 +90,7 @@ const SalesOrders = () => {
           type='salesOrder'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx

@@ -28,7 +28,6 @@ import OrderItemsIcon from '../../../Icons/OrderItemIcon.jsx'
 import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
 import InvoiceIcon from '../../../Icons/InvoiceIcon.jsx'
 import StockEventIcon from '../../../Icons/StockEventIcon.jsx'
-import { getModelByName } from '../../../../database/ObjectModels.js'
 
 const log = loglevel.getLogger('SalesOrderInfo')
 log.setLevel(config.logLevel)
@@ -68,6 +67,7 @@ const SalesOrderInfo = () => {
     formValid: false,
     lock: null,
     loading: false,
+    editDisabled: false,
     objectData: {}
   })
 
@@ -93,10 +93,6 @@ const SalesOrderInfo = () => {
     },
   }
 
-  const editDisabled = getModelByName('salesOrder')
-    .actions.find((action) => action.name === 'edit')
-    .disabled(objectFormState.objectData)
-
   return (
       <Flex
         gap='large'
@@ -162,7 +158,7 @@ const SalesOrderInfo = () => {
               disabled={
                 objectFormState.beingEditedByOther ||
                 objectFormState.loading ||
-                editDisabled
+                objectFormState.editDisabled
               }
               loading={objectFormState.editLoading}
             />

src/components/Dashboard/common/FilterSidebar.jsx

@@ -136,7 +136,7 @@ const FilterSidebar = ({
   }
 
   return (
-    <Card style={{ flexShrink: 0, height: '100%' }}>
+    <Card style={{ flex: 1, minHeight: 0, width: '100%', height: '100%' }}>
       <Flex vertical gap='middle'>
         <Flex justify='space-between'>
           <Dropdown menu={menuItems} trigger={['hover']} placement='bottomLeft'>

src/components/Dashboard/common/NotesPanel.jsx

@@ -25,12 +25,14 @@ const { Text } = Typography
 const NotesPanel = ({ _id, type }) => {
   const [newNoteOpen, setNewNoteOpen] = useState(false)
   const [loading, setLoading] = useState(true)
-  const [initialized, setInitialized] = useState(false)
   const [error, setError] = useState(null)
   const [notes, setNotes] = useState(null)
   const [expandedNotes, setExpandedNotes] = useState({})
   const subscribeToObjectTypeUpdatesRef = useRef(null)
 
+  const notesIdRef = useRef(null)
+  const notesTypeRef = useRef(null)
+
   const { token } = useContext(AuthContext)
   const { fetchNotes, connected, subscribeToObjectTypeUpdates } =
     useContext(ApiServerContext)
@@ -50,6 +52,7 @@ const NotesPanel = ({ _id, type }) => {
 
   const generateNotes = useCallback(
     async (id) => {
+      setLoading(true)
       const notesData = await fetchData(id)
       setLoading(false)
 
@@ -108,11 +111,16 @@ const NotesPanel = ({ _id, type }) => {
   }, [_id, subscribeToObjectTypeUpdates, connected, handleReloadData])
 
   useEffect(() => {
-    if (connected == true && token != null && !initialized) {
+    if (
+      connected == true &&
+      token != null &&
+      (_id != notesIdRef.current || type != notesTypeRef.current)
+    ) {
       handleReloadData()
-      setInitialized(true)
+      notesIdRef.current = _id
+      notesTypeRef.current = type
     }
-  }, [token, handleReloadData, initialized, connected])
+  }, [token, handleReloadData, connected, _id, type])
 
   const actionItems = {
     items: [

src/components/Dashboard/common/ObjectActions.jsx

@@ -6,7 +6,10 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import { useActionsModal } from '../context/ActionsModalContext'
 import KeyboardShortcut from './KeyboardShortcut'
 import { AuthContext } from '../context/AuthContext'
-import { buildActionUrl, stripPageActionParams } from '../../../utils/modelActions'
+import {
+  buildActionUrl,
+  stripPageActionParams
+} from '../../../utils/modelActions'
 
 // Recursively filter actions based on visibleActions
 function filterActionsByVisibility(actions, visibleActions) {
@@ -74,12 +77,12 @@ function isSameActionUrl(action, actionUrl, currentUrl, pathname, search) {
   if (action.type === 'modal') {
     return actionUrl === currentUrl
   }
-  return (
-    stripPageActionParams(
-      actionUrl.split('?')[0],
-      actionUrl.includes('?') ? actionUrl.split('?')[1] : ''
-    ) === stripPageActionParams(pathname, search)
-  )
+  // Compare the action URL to the current location with its action param
+  // stripped. Default page actions (e.g. Info) match and stay hidden when
+  // already on that page. Actions that set their own action param (edit,
+  // cancelEdit, finishEdit, etc.) do not match and remain available —
+  // visibility is controlled by action.visible (e.g. _isEditing).
+  return actionUrl === stripPageActionParams(pathname, search)
 }
 
 // Recursively map actions to AntD Dropdown items
@@ -238,7 +241,7 @@ const ObjectActions = ({
       <Dropdown menu={menu} {...dropdownProps}>
         <Button
           {...buttonProps}
-          disabled={disabled}
+          disabled={disabled || filteredActions.length === 0}
           onClick={() => showActionsModal(id, type, objectData)}
         >
           Actions

src/components/Dashboard/common/ObjectForm.jsx

@@ -76,6 +76,23 @@ const buildObjectFromEntries = (entries = []) => {
   }, {})
 }
 
+const getEditDisabled = (model, objectData, userProfile) => {
+  if (model?.readOnly === true) {
+    return true
+  }
+
+  const editAction = model?.actions?.find((action) => action.name === 'edit')
+  if (!editAction?.disabled) {
+    return false
+  }
+  if (typeof editAction.disabled === 'function') {
+    return (
+      editAction.disabled({ ...objectData, _user: userProfile }) ?? false
+    )
+  }
+  return !!editAction.disabled
+}
+
 /**
  * ObjectForm is a reusable form component for editing any object type.
  * It handles fetching, updating, locking, unlocking, and validation logic.
@@ -85,9 +102,10 @@ const buildObjectFromEntries = (entries = []) => {
  * - type: string (required)
  * - formItems: array (for ObjectInfo/ObjectProperty items)
  * - children: function({
- *     loading, isEditing, startEditing, cancelEditing, handleUpdate, form, formValid, objectData, setIsEditing, setObjectData
+ *     loading, isEditing, startEditing, cancelEditing, handleUpdate, form, formValid, objectData, setIsEditing, setObjectData, editDisabled
  *   }) => ReactNode
  * - setCurrentObject: boolean (sync object data to ActionsContext)
+ * - onStateChange: receives form state including editDisabled (from model edit action)
  */
 const ObjectForm = forwardRef(
   (
@@ -388,20 +406,22 @@ const ObjectForm = forwardRef(
             setFormValid(true)
             onStateChangeRef.current({
               formValid: true,
-              objectData: mergedObjectData
+              objectData: mergedObjectData,
+              editDisabled: getEditDisabled(model, mergedObjectData, userProfile)
             })
           })
           .catch(() => {
             setFormValid(false)
             onStateChangeRef.current({
               formValid: false,
-              objectData: mergedObjectData
+              objectData: mergedObjectData,
+              editDisabled: getEditDisabled(model, mergedObjectData, userProfile)
             })
           })
       }, 150)
 
       return () => clearTimeout(timeoutId)
-    }, [form, formUpdateValues])
+    }, [form, formUpdateValues, model, userProfile])
 
     // Cleanup on unmount
     useEffect(() => {
@@ -592,10 +612,13 @@ const ObjectForm = forwardRef(
     // Debounce objectData updates sent to parent to limit re-renders
     useEffect(() => {
       const timeoutId = setTimeout(() => {
-        onStateChangeRef.current({ objectData })
+        onStateChangeRef.current({
+          objectData,
+          editDisabled: getEditDisabled(model, objectData, userProfile)
+        })
       }, 150)
       return () => clearTimeout(timeoutId)
-    }, [objectData])
+    }, [objectData, model, userProfile])
 
     useEffect(() => {
       if (!setCurrentObject) {
@@ -651,13 +674,15 @@ const ObjectForm = forwardRef(
           ...computedValuesObject,
           _isEditing: true
         }))
-        onStateChangeRef.current({
-          isEditing: true,
-          objectData: {
+        const nextObjectData = {
           ...objectData,
           ...computedValuesObject,
           _isEditing: true
         }
+        onStateChangeRef.current({
+          isEditing: true,
+          objectData: nextObjectData,
+          editDisabled: getEditDisabled(model, nextObjectData, userProfile)
         })
       } catch (err) {
         console.error(err)
@@ -831,6 +856,7 @@ const ObjectForm = forwardRef(
             setIsEditing,
             setObjectData,
             editLoading,
+            editDisabled: getEditDisabled(model, objectData, userProfile),
             activities,
             handleFetchObject,
             handleDelete

src/components/Dashboard/common/ObjectTable.jsx

@@ -9,6 +9,7 @@ import {
   useMemo,
   createElement
 } from 'react'
+import { flushSync } from 'react-dom'
 import {
   Table,
   Skeleton,
@@ -21,7 +22,8 @@ import {
   Space,
   Tooltip,
   Form,
-  Splitter
+  Splitter,
+  Card
 } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import PropTypes from 'prop-types'
@@ -37,6 +39,7 @@ import {
 import ObjectProperty from './ObjectProperty'
 import ObjectCard from './ObjectCard'
 import FilterSidebar from './FilterSidebar'
+import SortSidebar from './SortSidebar'
 import XMarkIcon from '../../Icons/XMarkIcon'
 import CheckIcon from '../../Icons/CheckIcon'
 import { useLocation } from 'react-router-dom'
@@ -47,6 +50,7 @@ import { useActions } from '../context/ActionsContext'
 import ActionsIcon from '../../Icons/ActionsIcon'
 import FilterIcon from '../../Icons/FilterIcon'
 import ScrollBox from './ScrollBox'
+import SimplePropertyFilter from './SimplePropertyFilter'
 import {
   getActiveFilterValues,
   useTableStatePersistence
@@ -66,6 +70,120 @@ const getCardColSpan = (containerWidth) => {
   return 24
 }
 
+const toFilterExpression = (values) => {
+  if (!values?.length) return undefined
+  const parts = values.map((value) => {
+    if (value && typeof value === 'object') {
+      return String(value._id ?? value.type ?? JSON.stringify(value))
+    }
+    return String(value)
+  })
+  return parts.length === 1 ? parts[0] : parts.join('|')
+}
+
+const fromFilterExpression = (expr) => {
+  if (expr === undefined || expr === null || expr === '') return null
+  if (typeof expr === 'string' && expr.includes('|')) {
+    return expr.split('|').filter((part) => part !== '')
+  }
+  return [expr]
+}
+
+const ColumnFilterDropdown = ({
+  setSelectedKeys,
+  selectedKeys,
+  confirm,
+  clearFilters,
+  visible,
+  propertyName,
+  propertyLabel,
+  modelType
+}) => {
+  const [expression, setExpression] = useState('')
+  const [draft, setDraft] = useState(selectedKeys || [])
+  const selectedKeysRef = useRef(selectedKeys)
+  selectedKeysRef.current = selectedKeys
+
+  // Re-sync from the applied sidebar/column filter each time the dropdown opens
+  useEffect(() => {
+    if (!visible) return
+    const keys = selectedKeysRef.current || []
+    setDraft(keys)
+    setExpression(toFilterExpression(keys) ?? '')
+  }, [visible])
+
+  const handleDraftChange = (next) => {
+    setDraft(next)
+    setExpression(toFilterExpression(next) ?? '')
+  }
+
+  const handleExpressionChange = (e) => {
+    const text = e.target.value
+    setExpression(text)
+    setDraft(fromFilterExpression(text) || [])
+  }
+
+  const applyFilter = () => {
+    const trimmed = expression.trim()
+    if (!trimmed) {
+      clearFilters()
+    } else if (draft?.length) {
+      setSelectedKeys(draft)
+    } else {
+      setSelectedKeys([trimmed])
+    }
+    confirm()
+  }
+
+  const resetFilter = () => {
+    setExpression('')
+    setDraft([])
+    clearFilters()
+    confirm()
+  }
+
+  return (
+    <div style={{ padding: 8 }}>
+      <Flex vertical gap='small'>
+        <Space.Compact>
+          <Input
+            placeholder={'Filter ' + propertyLabel}
+            value={expression}
+            onChange={handleExpressionChange}
+            onPressEnter={applyFilter}
+            style={{ width: 200, display: 'block' }}
+          />
+          <Button onClick={resetFilter} icon={<XMarkIcon />} />
+          <Button type='primary' onClick={applyFilter} icon={<CheckIcon />} />
+        </Space.Compact>
+        <Card size='small' styles={{ body: { padding: 0, height: 200 } }}>
+          <ScrollBox inner={true} smallPadding={true}>
+            <div style={{ padding: '18px 20px', minWidth: 0 }}>
+              <SimplePropertyFilter
+                modelType={modelType}
+                propertyName={propertyName}
+                value={draft}
+                onChange={handleDraftChange}
+              />
+            </div>
+          </ScrollBox>
+        </Card>
+      </Flex>
+    </div>
+  )
+}
+
+ColumnFilterDropdown.propTypes = {
+  setSelectedKeys: PropTypes.func,
+  selectedKeys: PropTypes.array,
+  confirm: PropTypes.func,
+  clearFilters: PropTypes.func,
+  visible: PropTypes.bool,
+  propertyName: PropTypes.string,
+  propertyLabel: PropTypes.string,
+  modelType: PropTypes.string
+}
+
 const RowForm = ({ record, isEditing, onRegister, children }) => {
   const [form] = Form.useForm()
   useEffect(() => {
@@ -120,6 +238,7 @@ const ObjectTable = forwardRef(
       size = 'middle',
       onStateChange,
       showFilterSidebar = false,
+      showSortSidebar = false,
       expandHeight = false,
       showActions = true,
       saveFilterInSession = false,
@@ -156,6 +275,7 @@ const ObjectTable = forwardRef(
       getPersistedFilter,
       getPersistedSorter,
       persistFilter,
+      persistSort,
       persistTableState,
       registerPageFilter
     } = useTableStatePersistence({
@@ -197,10 +317,20 @@ const ObjectTable = forwardRef(
     // Table state
     const [pages, setPages] = useState([])
     const pagesRef = useRef(pages)
-    const tableData = useMemo(
-      () => pages.flatMap((page) => page.items),
-      [pages]
-    )
+    const tableData = useMemo(() => {
+      const items = pages.flatMap((page) => page.items)
+      const seen = new Set()
+      return items.filter((item) => {
+        const id = item?._id
+        if (id == null) return true
+        if (seen.has(id)) {
+          logger.warn('Duplicate table row omitted:', id)
+          return false
+        }
+        seen.add(id)
+        return true
+      })
+    }, [pages])
     const [loading, setLoading] = useState(true)
     const [lazyLoading, setLazyLoading] = useState(false)
 
@@ -258,6 +388,46 @@ const ObjectTable = forwardRef(
 
     const loadingPagesRef = useRef(new Set())
     const pendingScrollAnchorRef = useRef(null)
+    const dataLoadGenerationRef = useRef(0)
+    const [tableListKey, setTableListKey] = useState(0)
+    const isInternalSortUpdateRef = useRef(false)
+
+    const beginDataReload = useCallback(() => {
+      dataLoadGenerationRef.current += 1
+      loadingPagesRef.current.clear()
+      pendingScrollAnchorRef.current = null
+      pagesRef.current = []
+      setTableListKey((key) => key + 1)
+      return dataLoadGenerationRef.current
+    }, [])
+
+    const isStaleDataLoad = useCallback((generation) => {
+      return generation !== dataLoadGenerationRef.current
+    }, [])
+
+    const clearTablePages = useCallback(() => {
+      pagesRef.current = []
+      flushSync(() => {
+        setPages([])
+      })
+    }, [])
+
+    const setTablePages = useCallback((nextPages) => {
+      pagesRef.current = nextPages
+      setPages(nextPages)
+    }, [])
+
+    const mergeLoadedPage = useCallback((currentPages, loadedPage) => {
+      const withoutSkeletons = currentPages.filter(
+        (page) => !page.isSkeletonPage
+      )
+      const withoutDuplicate = withoutSkeletons.filter(
+        (page) => page.pageNum !== loadedPage.pageNum
+      )
+      return [...withoutDuplicate, loadedPage].sort(
+        (a, b) => a.pageNum - b.pageNum
+      )
+    }, [])
 
     const renderActions = (objectData) => {
       return (
@@ -355,7 +525,11 @@ const ObjectTable = forwardRef(
 
     const createPageWindow = useCallback(
       (loadedPages, direction) => {
-        const sortedPages = [...loadedPages].sort(
+        const dedupedByPageNum = new Map()
+        loadedPages.forEach((page) => {
+          dedupedByPageNum.set(page.pageNum, page)
+        })
+        const sortedPages = [...dedupedByPageNum.values()].sort(
           (a, b) => a.pageNum - b.pageNum
         )
         const visiblePages =
@@ -381,8 +555,10 @@ const ObjectTable = forwardRef(
 
     const fetchData = useCallback(
       async (pageNum = 1, filter = null, sorter = null) => {
+        const generation = dataLoadGenerationRef.current
         try {
           const result = await fetchPage(pageNum, filter, sorter)
+          if (isStaleDataLoad(generation)) return []
           const loadedPage = {
             pageNum,
             items: result.data || [],
@@ -394,11 +570,13 @@ const ObjectTable = forwardRef(
           setLoading(false)
           return result.data || []
         } catch (error) {
+          if (!isStaleDataLoad(generation)) {
             setLoading(false)
+          }
           throw error
         }
       },
-      [fetchPage]
+      [fetchPage, isStaleDataLoad]
     )
 
     const findRenderedRow = useCallback((scrollTarget, id) => {
@@ -493,12 +671,14 @@ const ObjectTable = forwardRef(
           currentPages
         )
 
+        const generation = dataLoadGenerationRef.current
         loadingPagesRef.current.add(pageNum)
         setLazyLoading(true)
         logger.debug(`Loading ${direction} page...`)
 
         try {
           const result = await fetchPage(pageNum)
+          if (isStaleDataLoad(generation)) return
           const loadedPage = {
             pageNum,
             items: result.data || [],
@@ -519,21 +699,28 @@ const ObjectTable = forwardRef(
               return prev
             }
 
-            const loadedPages = prev
-              .filter((page) => !page.isSkeletonPage)
-              .concat(loadedPage)
+            const loadedPages = mergeLoadedPage(prev, loadedPage)
             return createPageWindow(loadedPages, direction)
           })
         } catch (error) {
           logger.error(`Error loading page ${pageNum}:`, error)
         } finally {
           loadingPagesRef.current.delete(pageNum)
-          if (loadingPagesRef.current.size === 0) {
+          if (
+            !isStaleDataLoad(generation) &&
+            loadingPagesRef.current.size === 0
+          ) {
             setLazyLoading(false)
           }
         }
       },
-      [captureScrollAnchor, createPageWindow, fetchPage]
+      [
+        captureScrollAnchor,
+        createPageWindow,
+        fetchPage,
+        isStaleDataLoad,
+        mergeLoadedPage
+      ]
     )
 
     const loadNextPage = useCallback(
@@ -780,11 +967,20 @@ const ObjectTable = forwardRef(
 
     const loadPage = useCallback(
       async (pageNum, filter = null, sorter = null) => {
-        setPages([createSkeletonPage(pageNum)])
+        const generation = beginDataReload()
+        clearTablePages()
+        if (isStaleDataLoad(generation)) return
+
+        const skeletonPage = createSkeletonPage(pageNum)
+        flushSync(() => {
+          setTablePages([skeletonPage])
           setLoading(true)
+        })
+        if (isStaleDataLoad(generation)) return
 
         try {
           const firstResult = await fetchPage(pageNum, filter, sorter)
+          if (isStaleDataLoad(generation)) return
           const loadedPages = [
             {
               pageNum,
@@ -793,25 +989,29 @@ const ObjectTable = forwardRef(
             }
           ]
 
-          if (firstResult.hasMore) {
-            setPages([...loadedPages, createSkeletonPage(pageNum + 1)])
-            const secondResult = await fetchPage(pageNum + 1)
-            loadedPages.push({
-              pageNum: pageNum + 1,
-              items: secondResult.data || [],
-              hasMore: secondResult.hasMore
-            })
+          if (!isStaleDataLoad(generation)) {
+            setTablePages(createPageWindow(loadedPages, 'next'))
           }
-
-          setPages(createPageWindow(loadedPages, 'next'))
         } catch (error) {
+          if (!isStaleDataLoad(generation)) {
             logger.error(`Error loading page ${pageNum}:`, error)
-          setPages([])
+            setTablePages([])
+          }
         } finally {
+          if (!isStaleDataLoad(generation)) {
             setLoading(false)
           }
+        }
       },
-      [createPageWindow, createSkeletonPage, fetchPage]
+      [
+        beginDataReload,
+        clearTablePages,
+        createPageWindow,
+        createSkeletonPage,
+        fetchPage,
+        isStaleDataLoad,
+        setTablePages
+      ]
     )
 
     const loadInitialPage = useCallback(async () => {
@@ -865,6 +1065,8 @@ const ObjectTable = forwardRef(
         JSON.stringify(prevValues.masterFilter) !== JSON.stringify(masterFilter)
 
       if (hasChanged) {
+        beginDataReload()
+        pagesRef.current = []
         setPages([])
         activeFilterRef.current = {}
         tableSorterRef.current = {}
@@ -875,7 +1077,7 @@ const ObjectTable = forwardRef(
         setLazyLoading(false)
         prevValuesRef.current = { type, masterFilter }
       }
-    }, [type, masterFilter])
+    }, [type, masterFilter, beginDataReload])
 
     useEffect(() => {
       registerPageFilter(sidebarFilter)
@@ -887,43 +1089,31 @@ const ObjectTable = forwardRef(
       selectedKeys,
       confirm,
       clearFilters,
-      propertyName
-    }) => {
-      return (
-        <div style={{ padding: 8 }}>
-          <Space.Compact>
-            <Input
-              placeholder={'Search ' + propertyName}
-              value={selectedKeys[0]}
-              onChange={(e) =>
-                setSelectedKeys(e.target.value ? [e.target.value] : [])
-              }
-              onPressEnter={() => confirm()}
-              style={{ width: 200, display: 'block' }}
+      visible,
+      propertyName,
+      propertyLabel
+    }) => (
+      <ColumnFilterDropdown
+        setSelectedKeys={setSelectedKeys}
+        selectedKeys={selectedKeys}
+        confirm={confirm}
+        clearFilters={clearFilters}
+        visible={visible}
+        propertyName={propertyName}
+        propertyLabel={propertyLabel}
+        modelType={type}
       />
-            <Button
-              onClick={() => {
-                clearFilters()
-                confirm()
-              }}
-              icon={<XMarkIcon />}
-            />
-            <Button
-              type='primary'
-              onClick={() => confirm()}
-              icon={<CheckIcon />}
-            />
-          </Space.Compact>
-        </div>
     )
-    }
 
     const handleTableChange = (pagination, filters, sorter) => {
+      if (isInternalSortUpdateRef.current) return
+
       const next = { ...sidebarFilter }
 
       Object.entries(filters).forEach(([key, value]) => {
-        if (value && value.length > 0) {
-          next[key] = value[0]
+        const expression = toFilterExpression(value)
+        if (expression !== undefined) {
+          next[key] = expression
         } else {
           delete next[key]
         }
@@ -937,8 +1127,6 @@ const ObjectTable = forwardRef(
       setSidebarFilter(next)
       setTableSorter(nextSorter)
       persistTableState(next, nextSorter)
-      setPages([])
-      setLoading(true)
       loadPage(initialPage, getActiveFilterValues(next), nextSorter)
     }
 
@@ -946,11 +1134,34 @@ const ObjectTable = forwardRef(
       (newSidebarFilter) => {
         setSidebarFilter(newSidebarFilter)
         persistFilter(newSidebarFilter)
-        setPages([])
-        setLoading(true)
-        loadPage(initialPage, getActiveFilterValues(newSidebarFilter))
+        loadPage(
+          initialPage,
+          getActiveFilterValues(newSidebarFilter),
+          tableSorter.field ? tableSorter : null
+        )
       },
-      [initialPage, loadPage, persistFilter]
+      [initialPage, loadPage, persistFilter, tableSorter]
+    )
+
+    const handleSidebarSortChange = useCallback(
+      (newSorter) => {
+        const nextSorter = newSorter?.field
+          ? { field: newSorter.field, order: newSorter.order }
+          : {}
+        isInternalSortUpdateRef.current = true
+        setTableSorter(nextSorter)
+        tableSorterRef.current = nextSorter
+        persistSort(nextSorter)
+        loadPage(
+          initialPage,
+          getActiveFilterValues(sidebarFilter),
+          nextSorter.field ? nextSorter : null
+        )
+        requestAnimationFrame(() => {
+          isInternalSortUpdateRef.current = false
+        })
+      },
+      [initialPage, loadPage, persistSort, sidebarFilter]
     )
 
     const modelProperties = getModelProperties(type)
@@ -1073,18 +1284,21 @@ const ObjectTable = forwardRef(
             setSelectedKeys,
             selectedKeys,
             confirm,
-            clearFilters
+            clearFilters,
+            visible
           }) =>
             getFilterDropdown({
               setSelectedKeys,
               selectedKeys,
               confirm,
               clearFilters,
-              propertyName: prop.label
+              visible,
+              propertyName: prop.name,
+              propertyLabel: prop.label
             })
-          const sidebarVal = sidebarFilter[prop.name]
-          columnConfig.filteredValue =
-            sidebarVal !== undefined && sidebarVal !== '' ? [sidebarVal] : null
+          columnConfig.filteredValue = fromFilterExpression(
+            sidebarFilter[prop.name]
+          )
         }
 
         columnsWithSkeleton.push(columnConfig)
@@ -1161,7 +1375,7 @@ const ObjectTable = forwardRef(
     useLayoutEffect(() => {
       if (!cards) return
       measureCardColSpan()
-    }, [cards, showFilterSidebar, measureCardColSpan])
+    }, [cards, showFilterSidebar, showSortSidebar, measureCardColSpan])
 
     useEffect(() => {
       return () => cardsResizeObserverRef.current?.disconnect()
@@ -1209,7 +1423,7 @@ const ObjectTable = forwardRef(
           }}
         >
           <div className='objectTableCards'>
-            <Row gutter={[16, 16]} key={cardColSpan}>
+            <Row gutter={[16, 16]} key={`${cardColSpan}-${tableListKey}`}>
               {tableData.map((record) => {
                 if (record?._id == undefined) {
                   return null
@@ -1301,6 +1515,7 @@ const ObjectTable = forwardRef(
               </div>
             ) : (
               <Table
+                key={tableListKey}
                 ref={tableRef}
                 dataSource={tableData}
                 columns={columnsWithSkeleton}
@@ -1322,14 +1537,32 @@ const ObjectTable = forwardRef(
               />
             )}
           </Splitter.Panel>
-          {showFilterSidebar && (
+          {(showSortSidebar || showFilterSidebar) && (
             <Splitter.Panel defaultSize={'25%'}>
+              <Flex
+                vertical
+                gap='large'
+                style={{ height: '100%', minHeight: 0 }}
+              >
+                {showSortSidebar && (
+                  <SortSidebar
+                    type={type}
+                    sorter={tableSorter}
+                    onSortChange={handleSidebarSortChange}
+                    stretchHeight={showSortSidebar && !showFilterSidebar}
+                  />
+                )}
+                {showFilterSidebar && (
+                  <Flex style={{ flex: 1, minHeight: 0 }}>
                     <FilterSidebar
                       type={type}
                       filter={sidebarFilter}
                       onFilterChange={handleSidebarFilterChange}
                       masterFilter={masterFilter}
                     />
+                  </Flex>
+                )}
+              </Flex>
             </Splitter.Panel>
           )}
         </Splitter>
@@ -1355,6 +1588,7 @@ ObjectTable.propTypes = {
   size: PropTypes.string,
   onStateChange: PropTypes.func,
   showFilterSidebar: PropTypes.bool,
+  showSortSidebar: PropTypes.bool,
   expandHeight: PropTypes.bool,
   showActions: PropTypes.bool,
   saveFilterInSession: PropTypes.bool,

src/components/Dashboard/common/ObjectTableNavigationButtons.jsx

@@ -84,7 +84,7 @@ const ObjectTableNavigationButtons = ({
         }
       }
 
-      setSearchParams(nextParams)
+      setSearchParams(nextParams, { replace: true })
     },
     [searchParams, setSearchParams, objectType]
   )

src/components/Dashboard/common/ObjectTableViewButton.jsx

@@ -1,20 +1,39 @@
 import PropTypes from 'prop-types'
-import { Button } from 'antd'
+import { Button, Divider, Flex } from 'antd'
 import GridIcon from '../../Icons/GridIcon'
 import ListIcon from '../../Icons/ListIcon'
 
-const ObjectTableViewButton = ({ viewMode, setViewMode, ...buttonProps }) => (
+const ObjectTableViewButton = ({
+  viewMode,
+  setViewMode,
+  showEndingDivider = false,
+  ...buttonProps
+}) => {
+  const content = (
     <Button
       icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
       onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
-    title={viewMode === 'cards' ? 'Switch to list view' : 'Switch to card view'}
+      title={
+        viewMode === 'cards' ? 'Switch to list view' : 'Switch to card view'
+      }
       {...buttonProps}
     />
-)
+  )
+  if (showEndingDivider) {
+    return (
+      <Flex gap='small' align='center'>
+        <Divider type='vertical' style={{ margin: '0 4px', height: '18px' }} />
+        {content}
+      </Flex>
+    )
+  }
+  return content
+}
 
 ObjectTableViewButton.propTypes = {
   viewMode: PropTypes.oneOf(['list', 'cards']).isRequired,
-  setViewMode: PropTypes.func.isRequired
+  setViewMode: PropTypes.func.isRequired,
+  showEndingDivider: PropTypes.bool
 }
 
 export default ObjectTableViewButton