Enhance ObjectTable component with improved data handling and deduplication

- Introduced logic to filter out duplicate items in the table data, logging warnings for omitted rows.
- Added mechanisms for managing data load generation to prevent stale data issues during asynchronous operations.
- Refactored page loading and merging logic to ensure proper handling of loaded pages and skeleton states.
- Improved state management for loading and clearing table pages, enhancing overall performance and user experience.

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>

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)}
@@ -80,6 +89,7 @@ const Invoices = () => {
           type='invoice'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const Payments = () => {
           type='payment'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const TaxRecords = () => {
           type='taxRecord'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -86,6 +95,7 @@ const FilamentStocks = () => {
           type='filamentStock'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const OrderItems = () => {
           type='orderItem'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -86,6 +95,7 @@ const PartStocks = () => {
           type='partStock'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -87,6 +96,7 @@ const ProductStocks = () => {
           type='productStock'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const PurchaseOrders = () => {
           type='purchaseOrder'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const Shipments = () => {
           type='shipment'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -86,6 +95,7 @@ const StockAudits = () => {
           type='stockAudit'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -69,6 +78,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)}
@@ -84,6 +93,7 @@ const StockLocations = () => {
           type='stockLocation'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -84,6 +93,7 @@ const StockTransfers = () => {
           type='stockTransfer'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const AppPasswords = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const CourierServices = () => {
           type='courierService'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -79,6 +88,7 @@ const Couriers = () => {
           type='courier'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const DocumentJobs = () => {
           type='documentJob'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -79,6 +88,7 @@ const DocumentPrinters = () => {
           type='documentPrinter'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -78,6 +87,7 @@ const DocumentSizes = () => {
           type='documentSize'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const DocumentTemplates = () => {
           type='documentTemplate'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -84,6 +93,7 @@ const FilamentSkus = () => {
           type='filamentSku'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -86,6 +95,7 @@ const Filaments = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -68,6 +77,7 @@ const Files = () => {
           type='file'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -85,6 +94,7 @@ const Hosts = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -83,6 +92,7 @@ const Materials = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const NoteTypes = () => {
           type='noteType'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -83,6 +92,7 @@ const PartSkus = () => {
           type='partSku'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -85,6 +94,7 @@ const Parts = (filter) => {
           cards={viewMode === 'cards'}
           filter={filter}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -83,6 +92,7 @@ const ProductCategories = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -84,6 +93,7 @@ const ProductSkus = () => {
           type='productSku'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -355,6 +364,7 @@ const Products = () => {
           type={'product'}
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -79,6 +88,7 @@ const TaxRates = () => {
           type='taxRate'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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/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)}
@@ -79,6 +88,7 @@ const Vendors = () => {
           type='vendor'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -77,6 +86,7 @@ const FilamentProfiles = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -82,6 +91,7 @@ const GCodeFiles = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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,9 @@ const Jobs = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Jobs')
 
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('Jobs')
+
   const actionItems = {
     items: [
       {
@@ -69,6 +74,10 @@ const Jobs = () => {
           </Space>
 
           <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
             <FilterSidebarButton
               active={showFilterSidebar}
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
@@ -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/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)}
@@ -76,6 +85,7 @@ const PrinterProfiles = () => {
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -84,6 +93,7 @@ const Printers = () => {
           ref={tableRef}
           type='printer'
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           expandHeight={true}

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)}
@@ -71,6 +80,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)}
@@ -79,6 +88,7 @@ const Clients = () => {
           type='client'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const Listings = () => {
           type='listing'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const Marketplaces = () => {
           type='marketplace'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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)}
@@ -80,6 +89,7 @@ const SalesOrders = () => {
           type='salesOrder'
           cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
           expandHeight={true}
           saveFilterInSession={true}
           saveFilterInUrl={true}

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/ObjectTable.jsx

@@ -9,6 +9,7 @@ import {
   useMemo,
   createElement
 } from 'react'
+import { flushSync } from 'react-dom'
 import {
   Table,
   Skeleton,
@@ -37,6 +38,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'
@@ -120,6 +122,7 @@ const ObjectTable = forwardRef(
       size = 'middle',
       onStateChange,
       showFilterSidebar = false,
+      showSortSidebar = false,
       expandHeight = false,
       showActions = true,
       saveFilterInSession = false,
@@ -156,6 +159,7 @@ const ObjectTable = forwardRef(
       getPersistedFilter,
       getPersistedSorter,
       persistFilter,
+      persistSort,
       persistTableState,
       registerPageFilter
     } = useTableStatePersistence({
@@ -197,10 +201,20 @@ const ObjectTable = forwardRef(
     // Table state
     const [pages, setPages] = useState([])
     const pagesRef = useRef(pages)
-    const tableData = useMemo(
+    const tableData = useMemo(() => {
-      () => pages.flatMap((page) => page.items),
+      const items = pages.flatMap((page) => page.items)
-      [pages]
+      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 +272,44 @@ 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 +407,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 +437,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 +452,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 +553,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 +581,28 @@ const ObjectTable = forwardRef(
               return prev
             }
 
-            const loadedPages = prev
+            const loadedPages = mergeLoadedPage(prev, loadedPage)
-              .filter((page) => !page.isSkeletonPage)
-              .concat(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 +849,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 +871,29 @@ const ObjectTable = forwardRef(
             }
           ]
 
-          if (firstResult.hasMore) {
+          if (!isStaleDataLoad(generation)) {
-            setPages([...loadedPages, createSkeletonPage(pageNum + 1)])
+            setTablePages(createPageWindow(loadedPages, 'next'))
-            const secondResult = await fetchPage(pageNum + 1)
-            loadedPages.push({
-              pageNum: pageNum + 1,
-              items: secondResult.data || [],
-              hasMore: secondResult.hasMore
-            })
           }
-
-          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 +947,8 @@ const ObjectTable = forwardRef(
         JSON.stringify(prevValues.masterFilter) !== JSON.stringify(masterFilter)
 
       if (hasChanged) {
+        beginDataReload()
+        pagesRef.current = []
         setPages([])
         activeFilterRef.current = {}
         tableSorterRef.current = {}
@@ -875,7 +959,7 @@ const ObjectTable = forwardRef(
         setLazyLoading(false)
         prevValuesRef.current = { type, masterFilter }
       }
-    }, [type, masterFilter])
+    }, [type, masterFilter, beginDataReload])
 
     useEffect(() => {
       registerPageFilter(sidebarFilter)
@@ -919,6 +1003,8 @@ const ObjectTable = forwardRef(
     }
 
     const handleTableChange = (pagination, filters, sorter) => {
+      if (isInternalSortUpdateRef.current) return
+
       const next = { ...sidebarFilter }
 
       Object.entries(filters).forEach(([key, value]) => {
@@ -937,8 +1023,6 @@ const ObjectTable = forwardRef(
       setSidebarFilter(next)
       setTableSorter(nextSorter)
       persistTableState(next, nextSorter)
-      setPages([])
-      setLoading(true)
       loadPage(initialPage, getActiveFilterValues(next), nextSorter)
     }
 
@@ -946,11 +1030,34 @@ const ObjectTable = forwardRef(
       (newSidebarFilter) => {
         setSidebarFilter(newSidebarFilter)
         persistFilter(newSidebarFilter)
-        setPages([])
+        loadPage(
-        setLoading(true)
+          initialPage,
-        loadPage(initialPage, getActiveFilterValues(newSidebarFilter))
+          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)
@@ -1161,7 +1268,7 @@ const ObjectTable = forwardRef(
     useLayoutEffect(() => {
       if (!cards) return
       measureCardColSpan()
-    }, [cards, showFilterSidebar, measureCardColSpan])
+    }, [cards, showFilterSidebar, showSortSidebar, measureCardColSpan])
 
     useEffect(() => {
       return () => cardsResizeObserverRef.current?.disconnect()
@@ -1209,7 +1316,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 +1408,7 @@ const ObjectTable = forwardRef(
               </div>
             ) : (
               <Table
+                key={tableListKey}
                 ref={tableRef}
                 dataSource={tableData}
                 columns={columnsWithSkeleton}
@@ -1322,14 +1430,32 @@ const ObjectTable = forwardRef(
               />
             )}
           </Splitter.Panel>
-          {showFilterSidebar && (
+          {(showSortSidebar || showFilterSidebar) && (
             <Splitter.Panel defaultSize={'25%'}>
+              <Flex
+                vertical
+                gap='middle'
+                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 +1481,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/SortSidebar.jsx

@@ -0,0 +1,100 @@
+import { useMemo } from 'react'
+import { Card, Select, Button, Flex, Dropdown } from 'antd'
+import PropTypes from 'prop-types'
+import {
+  getModelByName,
+  getModelProperties
+} from '../../../database/ObjectModels'
+import BinIcon from '../../Icons/BinIcon'
+
+const DIRECTION_OPTIONS = [
+  { label: 'Ascending', value: 'ascend' },
+  { label: 'Descending', value: 'descend' }
+]
+
+const SortSidebar = ({
+  type,
+  sorter = {},
+  onSortChange,
+  stretchHeight = false
+}) => {
+  const model = getModelByName(type)
+  const modelProps = getModelProperties(type)
+
+  const propertyOptions = useMemo(() => {
+    if (!model.sorters) return []
+    return model.sorters
+      .map((name) => modelProps.find((p) => p.name === name))
+      .filter(Boolean)
+      .map((prop) => ({
+        label: prop.label,
+        value: prop.name
+      }))
+  }, [model.sorters, modelProps])
+
+  const menuItems = {
+    items: [
+      {
+        key: 'clearSort',
+        label: 'Clear sort',
+        danger: true,
+        icon: <BinIcon />,
+        onClick: () => onSortChange({})
+      }
+    ]
+  }
+
+  const changeProperty = (field) => {
+    if (!field) {
+      onSortChange({})
+      return
+    }
+    onSortChange({
+      field,
+      order: sorter.order || 'ascend'
+    })
+  }
+
+  const changeDirection = (order) => {
+    if (!sorter.field) return
+    onSortChange({ field: sorter.field, order })
+  }
+
+  return (
+    <Card style={{ flexShrink: 0, height: stretchHeight ? '100%' : undefined }}>
+      <Flex vertical gap='middle'>
+        <Flex justify='space-between'>
+          <Dropdown menu={menuItems} trigger={['hover']} placement='bottomLeft'>
+            <Button type='default'>Actions</Button>
+          </Dropdown>
+        </Flex>
+        <Select
+          placeholder='Property'
+          value={sorter.field || undefined}
+          onChange={changeProperty}
+          options={propertyOptions}
+          style={{ minWidth: 80, flex: 1 }}
+          allowClear
+        />
+        <Select
+          placeholder='Direction'
+          value={sorter.order || undefined}
+          onChange={changeDirection}
+          options={DIRECTION_OPTIONS}
+          style={{ minWidth: 80, flex: 1 }}
+          disabled={!sorter.field}
+          allowClear={false}
+        />
+      </Flex>
+    </Card>
+  )
+}
+
+SortSidebar.propTypes = {
+  type: PropTypes.string.isRequired,
+  sorter: PropTypes.object,
+  onSortChange: PropTypes.func.isRequired,
+  stretchHeight: PropTypes.bool
+}
+
+export default SortSidebar

src/components/Dashboard/common/SortSidebarButton.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import { Button } from 'antd'
+import SortCircleFilledIcon from '../../Icons/SortCircleFilledIcon'
+import SortCircleIcon from '../../Icons/SortCircleIcon'
+
+const SortSidebarButton = ({ active, onClick, ...buttonProps }) => (
+  <Button
+    icon={
+      active ? (
+        <SortCircleFilledIcon style={{ color: 'var(--color-primary)' }} />
+      ) : (
+        <SortCircleIcon />
+      )
+    }
+    onClick={onClick}
+    type={'default'}
+    title={active ? 'Hide sort sidebar' : 'Show sort sidebar'}
+    {...buttonProps}
+  />
+)
+
+SortSidebarButton.propTypes = {
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired
+}
+
+export default SortSidebarButton

src/components/Dashboard/context/ApiServerContext.jsx

@@ -30,6 +30,7 @@ const runningSpotlightFetches = new Map()
 const createEmptyUserSettings = () => ({
   viewMode: {},
   filterSidebarVisibility: {},
+  sortSidebarVisibility: {},
   columnVisibility: {},
   collapseState: {}
 })
@@ -44,6 +45,9 @@ const normalizeUserSettings = (settings = {}) => ({
   filterSidebarVisibility: normalizeUserSettingsCategory(
     settings?.filterSidebarVisibility
   ),
+  sortSidebarVisibility: normalizeUserSettingsCategory(
+    settings?.sortSidebarVisibility
+  ),
   columnVisibility: normalizeUserSettingsCategory(settings?.columnVisibility),
   collapseState: normalizeUserSettingsCategory(settings?.collapseState)
 })

src/components/Dashboard/hooks/useSortSidebarVisibility.jsx

@@ -0,0 +1,23 @@
+import { useCallback, useContext } from 'react'
+import { ApiServerContext } from '../context/ApiServerContext'
+
+const useSortSidebarVisibility = (componentName, defaultValue = false) => {
+  const { userSettings, updateUserSettings } = useContext(ApiServerContext)
+  const showSortSidebar =
+    userSettings.sortSidebarVisibility[componentName] ?? defaultValue
+
+  const setShowSortSidebar = useCallback(
+    (nextValue) => {
+      const value =
+        typeof nextValue === 'function'
+          ? nextValue(showSortSidebar)
+          : nextValue
+      updateUserSettings('sortSidebarVisibility', componentName, value)
+    },
+    [componentName, showSortSidebar, updateUserSettings]
+  )
+
+  return [showSortSidebar, setShowSortSidebar]
+}
+
+export default useSortSidebarVisibility

src/components/Icons/SortCircleFilledIcon.jsx

@@ -0,0 +1,8 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/sortcirclefilledicon.svg?react'
+
+const SortCircleFilledIcon = (props) => (
+  <Icon component={CustomIconSvg} {...props} />
+)
+
+export default SortCircleFilledIcon

src/components/Icons/SortCircleIcon.jsx

@@ -0,0 +1,6 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/sortcircleicon.svg?react'
+
+const SortCircleIcon = (props) => <Icon component={CustomIconSvg} {...props} />
+
+export default SortCircleIcon

src/database/models/AppPassword.js

@@ -1,10 +1,12 @@
 import { createElement, lazy } from 'react'
 
 const AppPasswordInfo = lazy(
-  () => import('../../components/Dashboard/Management/AppPasswords/AppPasswordInfo')
+  () =>
+    import('../../components/Dashboard/Management/AppPasswords/AppPasswordInfo')
 )
 const RegenerateAppPasswordSecret = lazy(
-  () => import('../../components/Dashboard/Management/AppPasswords/RegenerateAppPasswordSecret')
+  () =>
+    import('../../components/Dashboard/Management/AppPasswords/RegenerateAppPasswordSecret')
 )
 import AppPasswordIcon from '../../components/Icons/AppPasswordIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -68,7 +70,7 @@ export const AppPassword = {
     {
       name: 'regenerateSecret',
       type: 'modal',
-      modalWidth: 520,
+      modalWidth: 630,
       label: 'Regenerate Secret',
       row: true,
       icon: LockIcon,
@@ -76,7 +78,10 @@ export const AppPassword = {
         return objectData?._user?._id != objectData?.user?._id
       },
       content: (objectData, { onOk } = {}) => {
-        return createElement(RegenerateAppPasswordSecret, { id: objectData._id, onOk })
+        return createElement(RegenerateAppPasswordSecret, {
+          id: objectData._id,
+          onOk
+        })
       }
     }
   ],