Add sort functionality to various dashboard components

- Introduced SortSidebarButton to enable sorting in Invoices, Payments, TaxRecords, and Inventory components.
- Integrated useSortSidebarVisibility hook to manage sort sidebar visibility state.
- Updated relevant components to include sorting capabilities, enhancing user experience and data management.

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

@@ -37,6 +37,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 +121,7 @@ const ObjectTable = forwardRef(
       size = 'middle',
       onStateChange,
       showFilterSidebar = false,
+      showSortSidebar = false,
       expandHeight = false,
       showActions = true,
       saveFilterInSession = false,
@@ -156,6 +158,7 @@ const ObjectTable = forwardRef(
       getPersistedFilter,
       getPersistedSorter,
       persistFilter,
+      persistSort,
       persistTableState,
       registerPageFilter
     } = useTableStatePersistence({
@@ -948,9 +951,32 @@ const ObjectTable = forwardRef(
         persistFilter(newSidebarFilter)
         setPages([])
         setLoading(true)
-        loadPage(initialPage, getActiveFilterValues(newSidebarFilter))
+        loadPage(
+          initialPage,
+          getActiveFilterValues(newSidebarFilter),
+          tableSorter.field ? tableSorter : null
+        )
       },
-      [initialPage, loadPage, persistFilter]
+      [initialPage, loadPage, persistFilter, tableSorter]
+    )
+
+    const handleSidebarSortChange = useCallback(
+      (newSorter) => {
+        const nextSorter = newSorter?.field
+          ? { field: newSorter.field, order: newSorter.order }
+          : {}
+        setTableSorter(nextSorter)
+        tableSorterRef.current = nextSorter
+        persistSort(nextSorter)
+        setPages([])
+        setLoading(true)
+        loadPage(
+          initialPage,
+          getActiveFilterValues(sidebarFilter),
+          nextSorter.field ? nextSorter : null
+        )
+      },
+      [initialPage, loadPage, persistSort, sidebarFilter]
     )
 
     const modelProperties = getModelProperties(type)
@@ -1161,7 +1187,7 @@ const ObjectTable = forwardRef(
     useLayoutEffect(() => {
       if (!cards) return
       measureCardColSpan()
-    }, [cards, showFilterSidebar, measureCardColSpan])
+    }, [cards, showFilterSidebar, showSortSidebar, measureCardColSpan])
 
     useEffect(() => {
       return () => cardsResizeObserverRef.current?.disconnect()
@@ -1322,14 +1348,32 @@ const ObjectTable = forwardRef(
               />
             )}
           </Splitter.Panel>
-          {showFilterSidebar && (
+          {(showSortSidebar || showFilterSidebar) && (
             <Splitter.Panel defaultSize={'25%'}>
-              <FilterSidebar
+              <Flex
-                type={type}
+                vertical
-                filter={sidebarFilter}
+                gap='middle'
-                onFilterChange={handleSidebarFilterChange}
+                style={{ height: '100%', minHeight: 0 }}
-                masterFilter={masterFilter}
+              >
-              />
+                {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 +1399,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/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