Implemented filter sidebar.

assets/icons/filtercirclefilledicon.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.889695,0,0,0.889695,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.59ZM24.761,42.45C22.996,42.45 21.767,43.565 21.767,45.227C21.767,46.89 22.996,48.026 24.761,48.026L40.494,48.026C42.259,48.026 43.509,46.89 43.509,45.227C43.509,43.565 42.259,42.45 40.494,42.45L24.761,42.45ZM20.339,31.642C18.552,31.642 17.323,32.777 17.323,34.44C17.323,36.144 18.552,37.249 20.339,37.249L44.937,37.249C46.703,37.249 47.931,36.144 47.931,34.44C47.931,32.777 46.703,31.642 44.937,31.642L20.339,31.642ZM16.054,20.886C14.279,20.886 13.039,22.001 13.039,23.684C13.039,25.358 14.279,26.472 16.054,26.472L49.222,26.472C50.976,26.472 52.237,25.358 52.237,23.684C52.237,22.001 50.976,20.886 49.222,20.886L16.054,20.886Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

assets/icons/filtercircleicon.svg

@@ -0,0 +1,8 @@
+<?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.889695,0,0,0.889695,3,3.004404)">
+        <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="M16.733,26.802L48.5,26.802C50.183,26.802 51.362,25.748 51.362,24.146C51.362,22.565 50.183,21.511 48.5,21.511L16.733,21.511C15.029,21.511 13.871,22.565 13.871,24.146C13.871,25.748 15.029,26.802 16.733,26.802ZM20.832,37.096L44.402,37.096C46.065,37.096 47.233,36.042 47.233,34.44C47.233,32.869 46.065,31.805 44.402,31.805L20.832,31.805C19.147,31.805 17.98,32.869 17.98,34.44C17.98,36.042 19.147,37.096 20.832,37.096ZM25.068,47.411L40.145,47.411C41.808,47.411 42.996,46.336 42.996,44.755C42.996,43.184 41.808,42.121 40.145,42.121L25.068,42.121C23.405,42.121 22.237,43.184 22.237,44.755C22.237,46.336 23.405,47.411 25.068,47.411Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

assets/icons/filtericon.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.929807,0,0,0.929807,1,12.754528)">
+        <path d="M16.503,41.397L50.239,41.397C52.648,41.397 54.536,39.324 54.536,36.987C54.536,34.578 52.671,32.569 50.239,32.569L16.503,32.569C14.094,32.569 12.212,34.626 12.212,36.987C12.212,39.276 14.118,41.397 16.503,41.397Z" style="fill-rule:nonzero;"/>
+        <path d="M10.407,25.112L56.342,25.112C58.727,25.112 60.608,23.039 60.608,20.702C60.608,18.269 58.751,16.285 56.342,16.285L10.407,16.285C8.022,16.285 6.133,18.341 6.133,20.702C6.133,22.992 8.046,25.112 10.407,25.112Z" style="fill-rule:nonzero;"/>
+        <path d="M4.267,8.827L62.414,8.827C64.823,8.827 66.68,6.755 66.68,4.417C66.68,1.984 64.847,0 62.414,0L4.267,0C1.882,0 0,2.032 0,4.417C0,6.683 1.905,8.827 4.267,8.827Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

assets/stylesheets/App.css

@@ -584,3 +584,15 @@ body {
 .markdown-code-editor .cm-editor .cm-gutters {
   background-color: transparent;
 }
+
+.h-100 {
+  height: 100%;
+}
+
+.ant-table.ant-table-middle .ant-table-filter-trigger {
+  height: 20px;
+}
+
+.ant-table-wrapper .ant-table-filter-column {
+  align-items: center;
+}

src/components/Dashboard/Finance/Invoices.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const Invoices = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('invoices')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Invoices')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const Invoices = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const Invoices = () => {
             <ExportListButton objectType='invoice' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const Invoices = () => {
           visibleColumns={columnVisibility}
           type='invoice'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Finance/Payments.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const Payments = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('payments')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Payments')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const Payments = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const Payments = () => {
             <ExportListButton objectType='payment' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const Payments = () => {
           visibleColumns={columnVisibility}
           type='payment'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Inventory/FilamentStocks.jsx

@@ -9,9 +9,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import GridIcon from '../../Icons/GridIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -25,6 +26,9 @@ const FilamentStocks = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('filamentStocks')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('FilamentStocks')
+
   const actionItems = {
     items: [
       {
@@ -50,7 +54,7 @@ const FilamentStocks = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -65,11 +69,13 @@ const FilamentStocks = () => {
             <ExportListButton objectType='filamentStock' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -79,6 +85,7 @@ const FilamentStocks = () => {
           visibleColumns={columnVisibility}
           type='filamentStock'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Inventory/OrderItems.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const OrderItems = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('orderItems')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('OrderItems')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const OrderItems = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const OrderItems = () => {
             <ExportListButton objectType='orderItem' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const OrderItems = () => {
           visibleColumns={columnVisibility}
           type='orderItem'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Inventory/PartStocks.jsx

@@ -9,9 +9,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import GridIcon from '../../Icons/GridIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -25,6 +26,9 @@ const PartStocks = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('partStocks')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('PartStocks')
+
   const actionItems = {
     items: [
       {
@@ -50,7 +54,7 @@ const PartStocks = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -65,11 +69,13 @@ const PartStocks = () => {
             <ExportListButton objectType='partStock' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -79,6 +85,7 @@ const PartStocks = () => {
           visibleColumns={columnVisibility}
           type='partStock'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Inventory/ProductStocks.jsx

@@ -10,9 +10,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import GridIcon from '../../Icons/GridIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -26,6 +27,9 @@ const ProductStocks = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('productStock')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('ProductStocks')
+
   const actionItems = {
     items: [
       {
@@ -51,7 +55,7 @@ const ProductStocks = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -66,11 +70,13 @@ const ProductStocks = () => {
             <ExportListButton objectType='productStock' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -80,6 +86,7 @@ const ProductStocks = () => {
           visibleColumns={columnVisibility}
           type='productStock'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Inventory/PurchaseOrders.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const PurchaseOrders = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('purchaseOrders')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('PurchaseOrders')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const PurchaseOrders = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const PurchaseOrders = () => {
             <ExportListButton objectType='purchaseOrder' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const PurchaseOrders = () => {
           visibleColumns={columnVisibility}
           type='purchaseOrder'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Inventory/Shipments.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const Shipments = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('shipments')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Shipments')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const Shipments = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const Shipments = () => {
             <ExportListButton objectType='shipment' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const Shipments = () => {
           visibleColumns={columnVisibility}
           type='shipment'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Inventory/StockAudits.jsx

@@ -9,9 +9,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import GridIcon from '../../Icons/GridIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -25,6 +26,9 @@ const StockAudits = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('stockAudits')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('StockAudits')
+
   const actionItems = {
     items: [
       {
@@ -50,7 +54,7 @@ const StockAudits = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -65,11 +69,13 @@ const StockAudits = () => {
             <ExportListButton objectType='stockAudit' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -79,6 +85,7 @@ const StockAudits = () => {
           visibleColumns={columnVisibility}
           type='stockAudit'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Inventory/StockEvents.jsx

@@ -2,9 +2,10 @@ import { useRef } from 'react'
 import { Button, Flex, Space, Dropdown } from 'antd'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 import ReloadIcon from '../../Icons/ReloadIcon'
@@ -16,6 +17,9 @@ const StockEvents = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('stockEvent')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('StockEvents')
+
   const actionItems = {
     items: [
       {
@@ -33,7 +37,7 @@ const StockEvents = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -48,11 +52,13 @@ const StockEvents = () => {
             <ExportListButton objectType='stockEvent' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -62,6 +68,7 @@ const StockEvents = () => {
           visibleColumns={columnVisibility}
           type='stockEvent'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
     </>

src/components/Dashboard/Management/AppPasswords.jsx

@@ -6,9 +6,10 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import GridIcon from '../../Icons/GridIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
 
 const AppPasswords = () => {
@@ -19,6 +20,9 @@ const AppPasswords = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('appPassword')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('AppPasswords')
+
   const actionItems = {
     items: [
       {
@@ -44,7 +48,7 @@ const AppPasswords = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
@@ -59,11 +63,13 @@ const AppPasswords = () => {
             <ExportListButton objectType='appPassword' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const AppPasswords = () => {
           type='appPassword'
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
+          showFilterSidebar={showFilterSidebar}
         />
 
         <Modal

src/components/Dashboard/Management/AuditLogs.jsx

@@ -3,7 +3,9 @@ import { Button, Flex, Space, Dropdown } from 'antd'
 
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ObjectTable from '../common/ObjectTable'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -13,6 +15,9 @@ const AuditLogs = () => {
   const [columnVisibility, updateColumnVisibility] =
     useColumnVisibility('auditLog')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('AuditLogs')
+
   const actionItems = {
     items: [
       {
@@ -30,7 +35,7 @@ const AuditLogs = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -44,12 +49,19 @@ const AuditLogs = () => {
             />
             <ExportListButton objectType='auditLog' />
           </Space>
+          <Space>
+            <FilterSidebarButton
+              active={showFilterSidebar}
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
+            />
+          </Space>
         </Flex>
 
         <ObjectTable
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='auditLog'
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
     </>

src/components/Dashboard/Management/CourierServices.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const CourierServices = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('courierService')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('CourierServices')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const CourierServices = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const CourierServices = () => {
             <ExportListButton objectType='courierService' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const CourierServices = () => {
           visibleColumns={columnVisibility}
           type='courierService'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/Couriers.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -19,6 +20,9 @@ const Couriers = () => {
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('courier')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Couriers')
+
   const actionItems = {
     items: [
       {
@@ -44,7 +48,7 @@ const Couriers = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -59,11 +63,13 @@ const Couriers = () => {
             <ExportListButton objectType='courier' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -72,6 +78,7 @@ const Couriers = () => {
           visibleColumns={columnVisibility}
           type='courier'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/DocumentJobs.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const DocumentJobs = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('documentJob')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('DocumentJobs')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const DocumentJobs = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const DocumentJobs = () => {
             <ExportListButton objectType='documentJob' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const DocumentJobs = () => {
           visibleColumns={columnVisibility}
           type='documentJob'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/DocumentPrinters.jsx

@@ -4,9 +4,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ObjectTable from '../common/ObjectTable'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 import NewDocumentPrinter from './DocumentPrinters/NewDocumentPrinter'
@@ -19,6 +20,9 @@ const DocumentPrinters = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('documentPrinter')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('DocumentPrinters')
+
   const actionItems = {
     items: [
       {
@@ -44,7 +48,7 @@ const DocumentPrinters = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -59,11 +63,13 @@ const DocumentPrinters = () => {
             <ExportListButton objectType='documentPrinter' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -72,6 +78,7 @@ const DocumentPrinters = () => {
           visibleColumns={columnVisibility}
           type='documentPrinter'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/DocumentSizes.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -18,6 +19,9 @@ const DocumentSizes = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('documentSize')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('DocumentSizes')
+
   const actionItems = {
     items: [
       {
@@ -43,7 +47,7 @@ const DocumentSizes = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -58,11 +62,13 @@ const DocumentSizes = () => {
             <ExportListButton objectType='documentSize' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -71,6 +77,7 @@ const DocumentSizes = () => {
           visibleColumns={columnVisibility}
           type='documentSize'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/DocumentTemplates.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const DocumentTemplates = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('documentTemplate')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('DocumentTemplates')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const DocumentTemplates = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const DocumentTemplates = () => {
             <ExportListButton objectType='documentTemplate' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const DocumentTemplates = () => {
           visibleColumns={columnVisibility}
           type='documentTemplate'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/FilamentSkus.jsx

@@ -7,9 +7,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import GridIcon from '../../Icons/GridIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -23,6 +24,9 @@ const FilamentSkus = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('filamentSku')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('FilamentSkus')
+
   const actionItems = {
     items: [
       {
@@ -48,7 +52,7 @@ const FilamentSkus = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -63,11 +67,13 @@ const FilamentSkus = () => {
             <ExportListButton objectType='filamentSku' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -77,6 +83,7 @@ const FilamentSkus = () => {
           visibleColumns={columnVisibility}
           type='filamentSku'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/Filaments.jsx

@@ -10,10 +10,11 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
-import ListIcon from '../../Icons/ListIcon'
-import GridIcon from '../../Icons/GridIcon'
 import useViewMode from '../hooks/useViewMode'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import ExportListButton from '../common/ExportListButton'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 
 const Filaments = () => {
   const [newFilamentOpen, setNewFilamentOpen] = useState(false)
@@ -25,6 +26,9 @@ const Filaments = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('filament')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Filaments')
+
   const actionItems = {
     items: [
       {
@@ -50,7 +54,7 @@ const Filaments = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
@@ -65,11 +69,13 @@ const Filaments = () => {
             <ExportListButton objectType='filament' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -79,6 +85,7 @@ const Filaments = () => {
           type='filament'
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
+          showFilterSidebar={showFilterSidebar}
         />
 
         <Modal

src/components/Dashboard/Management/Files.jsx

@@ -3,9 +3,10 @@ import { Button, Flex, Space, Dropdown } from 'antd'
 import ObjectTable from '../common/ObjectTable'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -16,6 +17,9 @@ const Files = () => {
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('file')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Files')
+
   const actionItems = {
     items: [
       {
@@ -33,7 +37,7 @@ const Files = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -48,11 +52,13 @@ const Files = () => {
             <ExportListButton objectType='file' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -61,6 +67,7 @@ const Files = () => {
           visibleColumns={columnVisibility}
           type='file'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
     </>

src/components/Dashboard/Management/Hosts.jsx

@@ -11,9 +11,10 @@ import ExportListButton from '../common/ExportListButton'
 import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
-import ListIcon from '../../Icons/ListIcon'
-import GridIcon from '../../Icons/GridIcon'
 import useViewMode from '../hooks/useViewMode'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 
 const Hosts = () => {
   const [newHostOpen, setNewHostOpen] = useState(false)
@@ -24,6 +25,9 @@ const Hosts = () => {
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('host')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Hosts')
+
   const actionItems = {
     items: [
       {
@@ -49,7 +53,7 @@ const Hosts = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
@@ -64,11 +68,13 @@ const Hosts = () => {
             <ExportListButton objectType='host' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -78,6 +84,7 @@ const Hosts = () => {
           type='host'
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
+          showFilterSidebar={showFilterSidebar}
         />
 
         <Modal

src/components/Dashboard/Management/Materials.jsx

@@ -8,9 +8,10 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import GridIcon from '../../Icons/GridIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
 
 const Materials = () => {
@@ -22,6 +23,9 @@ const Materials = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('material')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Materials')
+
   const actionItems = {
     items: [
       {
@@ -47,7 +51,7 @@ const Materials = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
@@ -62,11 +66,13 @@ const Materials = () => {
             <ExportListButton objectType='material' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -76,6 +82,7 @@ const Materials = () => {
           type='material'
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
+          showFilterSidebar={showFilterSidebar}
         />
 
         <Modal

src/components/Dashboard/Management/NoteTypes.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const NoteTypes = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('noteType')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('NoteTypes')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const NoteTypes = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const NoteTypes = () => {
             <ExportListButton objectType='noteType' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const NoteTypes = () => {
           visibleColumns={columnVisibility}
           type='noteType'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/PartSkus.jsx

@@ -7,9 +7,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import GridIcon from '../../Icons/GridIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -22,6 +23,9 @@ const PartSkus = () => {
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('partSku')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('PartSkus')
+
   const actionItems = {
     items: [
       {
@@ -47,7 +51,7 @@ const PartSkus = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -62,11 +66,13 @@ const PartSkus = () => {
             <ExportListButton objectType='partSku' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -76,6 +82,7 @@ const PartSkus = () => {
           visibleColumns={columnVisibility}
           type='partSku'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/Parts.jsx

@@ -11,9 +11,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 
-import GridIcon from '../../Icons/GridIcon'
-import ListIcon from '../../Icons/ListIcon'
 import useViewMode from '../hooks/useViewMode'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
@@ -24,6 +25,9 @@ const Parts = (filter) => {
   const [viewMode, setViewMode] = useViewMode('part')
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('part')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Parts')
+
   const actionItems = {
     items: [
       {
@@ -49,7 +53,7 @@ const Parts = (filter) => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -64,11 +68,13 @@ const Parts = (filter) => {
             <ExportListButton objectType='part' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -78,6 +84,7 @@ const Parts = (filter) => {
           type='part'
           cards={viewMode === 'cards'}
           filter={filter}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/ProductSkus.jsx

@@ -7,9 +7,10 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import GridIcon from '../../Icons/GridIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -23,6 +24,9 @@ const ProductSkus = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('productSku')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('ProductSkus')
+
   const actionItems = {
     items: [
       {
@@ -48,7 +52,7 @@ const ProductSkus = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -63,11 +67,13 @@ const ProductSkus = () => {
             <ExportListButton objectType='productSku' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -77,6 +83,7 @@ const ProductSkus = () => {
           visibleColumns={columnVisibility}
           type='productSku'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/Products.jsx

@@ -25,9 +25,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import XMarkIcon from '../../Icons/XMarkIcon'
 import CheckIcon from '../../Icons/CheckIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
 
 const Products = () => {
@@ -235,6 +236,9 @@ const Products = () => {
     columns
   )
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Products')
+
   const actionItems = {
     items: [
       {
@@ -320,7 +324,7 @@ const Products = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -336,11 +340,13 @@ const Products = () => {
             </Popover>
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -348,6 +354,7 @@ const Products = () => {
           ref={tableRef}
           type={'product'}
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/TaxRates.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -19,6 +20,9 @@ const TaxRates = () => {
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('taxRate')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('TaxRates')
+
   const actionItems = {
     items: [
       {
@@ -44,7 +48,7 @@ const TaxRates = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -59,11 +63,13 @@ const TaxRates = () => {
             <ExportListButton objectType='taxRate' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -72,6 +78,7 @@ const TaxRates = () => {
           visibleColumns={columnVisibility}
           type='taxRate'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/TaxRecords.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const TaxRecords = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('taxRecord')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('TaxRecords')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const TaxRecords = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const TaxRecords = () => {
             <ExportListButton objectType='taxRecord' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const TaxRecords = () => {
           visibleColumns={columnVisibility}
           type='taxRecord'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Management/Users.jsx

@@ -3,9 +3,10 @@ import { Button, Flex, Space, Dropdown } from 'antd'
 import ObjectTable from '../common/ObjectTable'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -16,6 +17,9 @@ const Users = () => {
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('user')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Users')
+
   const actionItems = {
     items: [
       {
@@ -32,7 +36,7 @@ const Users = () => {
   }
 
   return (
-    <Flex vertical={'true'} gap='large'>
+    <Flex vertical={'true'} gap='large' className='h-100'>
       <Flex justify={'space-between'}>
         <Space size='small'>
           <Dropdown menu={actionItems}>
@@ -47,9 +51,13 @@ const Users = () => {
           <ExportListButton objectType='user' />
         </Space>
         <Space>
-          <Button
+          <FilterSidebarButton
-            icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+            active={showFilterSidebar}
-            onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
+            onClick={() => setShowFilterSidebar(!showFilterSidebar)}
+          />
+          <ObjectTableViewButton
+            viewMode={viewMode}
+            setViewMode={setViewMode}
           />
         </Space>
       </Flex>
@@ -58,6 +66,7 @@ const Users = () => {
         type={'user'}
         visibleColumns={columnVisibility}
         cards={viewMode === 'cards'}
+        showFilterSidebar={showFilterSidebar}
       />
     </Flex>
   )

src/components/Dashboard/Management/Vendors.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -19,6 +20,9 @@ const Vendors = () => {
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('vendor')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Vendors')
+
   const actionItems = {
     items: [
       {
@@ -44,7 +48,7 @@ const Vendors = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -59,11 +63,13 @@ const Vendors = () => {
             <ExportListButton objectType='vendor' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -72,6 +78,7 @@ const Vendors = () => {
           visibleColumns={columnVisibility}
           type='vendor'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Production/GCodeFiles.jsx

@@ -7,9 +7,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTable from '../common/ObjectTable'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import GridIcon from '../../Icons/GridIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
@@ -22,6 +23,9 @@ const GCodeFiles = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('gcodeFile')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('GCodeFiles')
+
   const actionItems = {
     items: [
       {
@@ -47,7 +51,7 @@ const GCodeFiles = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
@@ -62,11 +66,13 @@ const GCodeFiles = () => {
             <ExportListButton objectType='gcodeFile' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -75,6 +81,7 @@ const GCodeFiles = () => {
           type='gcodeFile'
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Production/Jobs.jsx

@@ -7,10 +7,11 @@ import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
 import PlusIcon from '../../Icons/PlusIcon.jsx'
 import ReloadIcon from '../../Icons/ReloadIcon.jsx'
 import ObjectTable from '../common/ObjectTable.jsx'
-import ListIcon from '../../Icons/ListIcon.jsx'
-import GridIcon from '../../Icons/GridIcon.jsx'
 import useViewMode from '../hooks/useViewMode.jsx'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import ColumnViewButton from '../common/ColumnViewButton.jsx'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility.jsx'
 import ExportListButton from '../common/ExportListButton.jsx'
 
 const Jobs = () => {
@@ -20,6 +21,9 @@ const Jobs = () => {
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('job')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Jobs')
+
   const actionItems = {
     items: [
       {
@@ -49,7 +53,7 @@ const Jobs = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large' style={{ height: '100%' }}>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -65,11 +69,13 @@ const Jobs = () => {
           </Space>
 
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -79,6 +85,7 @@ const Jobs = () => {
           type={'job'}
           visibleColumns={columnVisibility}
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Production/Printers.jsx

@@ -9,10 +9,11 @@ import ObjectTable from '../common/ObjectTable'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
 import useColumnVisibility from '../hooks/useColumnVisibility'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 
 const Printers = () => {
   const [newPrinterOpen, setNewPrinterOpen] = useState(false)
@@ -24,6 +25,9 @@ const Printers = () => {
   // Column visibility state, persisted in sessionStorage via custom hook
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('printer')
 
+  // Filter sidebar visibility, persisted in sessionStorage via custom hook
+  const [showFilterSidebar, setShowFilterSidebar] = useFilterSidebarVisibility('Printers')
+
   const actionItems = {
     items: [
       {
@@ -49,7 +53,7 @@ const Printers = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
@@ -64,11 +68,13 @@ const Printers = () => {
             <ExportListButton objectType='printer' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -76,6 +82,7 @@ const Printers = () => {
         <ObjectTable
           ref={tableRef}
           type='printer'
+          showFilterSidebar={showFilterSidebar}
           cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
         />

src/components/Dashboard/Production/SubJobs.jsx

@@ -5,10 +5,11 @@ import { Button, Flex, Space, Dropdown } from 'antd'
 import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
 import ReloadIcon from '../../Icons/ReloadIcon.jsx'
 import ObjectTable from '../common/ObjectTable.jsx'
-import ListIcon from '../../Icons/ListIcon.jsx'
-import GridIcon from '../../Icons/GridIcon.jsx'
 import useViewMode from '../hooks/useViewMode.jsx'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import ColumnViewButton from '../common/ColumnViewButton.jsx'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility.jsx'
 import ExportListButton from '../common/ExportListButton.jsx'
 
 const SubJobs = () => {
@@ -17,6 +18,9 @@ const SubJobs = () => {
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('subJob')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('SubJobs')
+
   const actionItems = {
     items: [
       {
@@ -34,7 +38,7 @@ const SubJobs = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large' style={{ height: '100%' }}>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -50,11 +54,13 @@ const SubJobs = () => {
           </Space>
 
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -64,6 +70,7 @@ const SubJobs = () => {
           type={'subJob'}
           visibleColumns={columnVisibility}
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
     </>

src/components/Dashboard/Sales/Clients.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -19,6 +20,9 @@ const Clients = () => {
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('client')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('Clients')
+
   const actionItems = {
     items: [
       {
@@ -44,7 +48,7 @@ const Clients = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -59,11 +63,13 @@ const Clients = () => {
             <ExportListButton objectType='client' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -72,6 +78,7 @@ const Clients = () => {
           visibleColumns={columnVisibility}
           type='client'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/Sales/SalesOrders.jsx

@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
-import ListIcon from '../../Icons/ListIcon'
+import FilterSidebarButton from '../common/FilterSidebarButton'
 import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -20,6 +21,9 @@ const SalesOrders = () => {
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('salesOrders')
 
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('SalesOrders')
+
   const actionItems = {
     items: [
       {
@@ -45,7 +49,7 @@ const SalesOrders = () => {
 
   return (
     <>
-      <Flex vertical={'true'} gap='large'>
+      <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -60,11 +64,13 @@ const SalesOrders = () => {
             <ExportListButton objectType='salesOrder' />
           </Space>
           <Space>
-            <Button
+            <FilterSidebarButton
-              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              active={showFilterSidebar}
-              onClick={() =>
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
-                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+            />
-              }
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
             />
           </Space>
         </Flex>
@@ -73,6 +79,7 @@ const SalesOrders = () => {
           visibleColumns={columnVisibility}
           type='salesOrder'
           cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
         />
       </Flex>
       <Modal

src/components/Dashboard/common/FilterSidebar.jsx

@@ -0,0 +1,193 @@
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react'
+import { Card, Select, Input, Button, Flex, Space, Dropdown } from 'antd'
+import { CloseOutlined } from '@ant-design/icons'
+import PropTypes from 'prop-types'
+import PlusIcon from '../../Icons/PlusIcon'
+import {
+  getModelByName,
+  getModelProperties
+} from '../../../database/ObjectModels'
+import MissingPlaceholder from './MissingPlaceholder'
+import BinIcon from '../../Icons/BinIcon'
+
+const FilterSidebar = ({
+  type,
+  filter = {},
+  onFilterChange,
+  masterFilter = {}
+}) => {
+  const model = getModelByName(type)
+  const modelProps = getModelProperties(type)
+  const masterKeys = Object.keys(masterFilter)
+
+  const initialEmptyFields = useRef(
+    new Set(Object.keys(filter).filter((k) => filter[k] === ''))
+  )
+  const [localFilter, setLocalFilter] = useState(() => {
+    const visible = {}
+    for (const [k, v] of Object.entries(filter)) {
+      if (v !== '') visible[k] = v
+    }
+    return visible
+  })
+  const debounceRef = useRef(null)
+
+  useEffect(() => {
+    const visible = {}
+    for (const [k, v] of Object.entries(filter)) {
+      if (initialEmptyFields.current.has(k) && v === '') continue
+      visible[k] = v
+    }
+    setLocalFilter(visible)
+  }, [filter])
+
+  const debouncedFilterChange = useCallback(
+    (next) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+      debounceRef.current = setTimeout(() => onFilterChange(next), 250)
+    },
+    [onFilterChange]
+  )
+
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+    }
+  }, [])
+
+  const filterableProperties = useMemo(() => {
+    if (!model.filters) return []
+    return model.filters
+      .filter((name) => !masterKeys.includes(name))
+      .map((name) => modelProps.find((p) => p.name === name))
+      .filter(Boolean)
+  }, [model.filters, modelProps, masterKeys])
+
+  const fieldOptions = useMemo(
+    () =>
+      filterableProperties.map((prop) => ({
+        label: prop.label,
+        value: prop.name
+      })),
+    [filterableProperties]
+  )
+
+  const activeFields = Object.keys(localFilter)
+
+  const usedFields = new Set(activeFields)
+  const availableOptions = (currentField) =>
+    fieldOptions.filter(
+      (o) => !usedFields.has(o.value) || o.value === currentField
+    )
+
+  const rows =
+    activeFields.length > 0
+      ? activeFields.map((field) => ({ field, value: localFilter[field] }))
+      : []
+
+  const addRow = () => {
+    const unused = fieldOptions.find((o) => !usedFields.has(o.value))
+    if (!unused) return
+    initialEmptyFields.current.delete(unused.value)
+    const next = { ...localFilter, [unused.value]: '' }
+    setLocalFilter(next)
+  }
+
+  const removeRow = (field) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    const next = { ...localFilter }
+    const hadValue = localFilter[field] !== ''
+    delete next[field]
+    setLocalFilter(next)
+    if (hadValue) onFilterChange(next)
+  }
+
+  const changeField = (oldField, newField) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    initialEmptyFields.current.delete(newField)
+    const value = localFilter[oldField] || ''
+    const next = { ...localFilter }
+    delete next[oldField]
+    next[newField] = value
+    setLocalFilter(next)
+    if (value !== '') onFilterChange(next)
+  }
+
+  const changeValue = (field, value) => {
+    const next = { ...localFilter, [field]: value }
+    setLocalFilter(next)
+    debouncedFilterChange(next)
+  }
+  const menuItems = {
+    items: [
+      {
+        key: 'clearAll',
+        label: 'Clear all filters',
+        danger: true,
+        icon: <BinIcon />,
+        onClick: () => clearAllFilters()
+      }
+    ]
+  }
+
+  const clearAllFilters = () => {
+    setLocalFilter({})
+    onFilterChange({})
+  }
+
+  return (
+    <Card style={{ width: '25%', flexShrink: 0, height: '100%' }}>
+      <Flex vertical gap='middle'>
+        <Flex justify='space-between'>
+          <Dropdown menu={menuItems} trigger={['hover']} placement='bottomLeft'>
+            <Button type='default'>Actions</Button>
+          </Dropdown>
+          <Button
+            type='primary'
+            icon={<PlusIcon />}
+            onClick={addRow}
+            disabled={usedFields.size >= fieldOptions.length}
+            title='Add filter'
+          />
+        </Flex>
+        <Flex vertical gap={8}>
+          {rows.map((row) => (
+            <Space.Compact key={row.field} style={{ width: '100%' }}>
+              <Select
+                placeholder='Field'
+                value={row.field || undefined}
+                onChange={(v) => changeField(row.field, v)}
+                options={availableOptions(row.field)}
+                style={{ minWidth: 80, flex: 1 }}
+                allowClear={false}
+              />
+              <Input
+                placeholder='Value'
+                value={row.value}
+                onChange={(e) => changeValue(row.field, e.target.value)}
+                style={{ width: 160 }}
+              />
+              <Button
+                icon={<CloseOutlined />}
+                onClick={() => removeRow(row.field)}
+                title='Remove filter'
+              />
+            </Space.Compact>
+          ))}
+          {rows.length === 0 && (
+            <MissingPlaceholder message='No filters applied.' />
+          )}
+        </Flex>
+      </Flex>
+    </Card>
+  )
+}
+
+FilterSidebar.propTypes = {
+  type: PropTypes.string.isRequired,
+  filter: PropTypes.object,
+  onFilterChange: PropTypes.func.isRequired,
+  masterFilter: PropTypes.object
+}
+
+export default FilterSidebar

src/components/Dashboard/common/FilterSidebarButton.jsx

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

src/components/Dashboard/common/ObjectTable.jsx

@@ -35,6 +35,7 @@ import {
   getModelByName
 } from '../../../database/ObjectModels'
 import ObjectProperty from './ObjectProperty'
+import FilterSidebar from './FilterSidebar'
 import XMarkIcon from '../../Icons/XMarkIcon'
 import CheckIcon from '../../Icons/CheckIcon'
 import { useNavigate } from 'react-router-dom'
@@ -42,6 +43,7 @@ import QuestionCircleIcon from '../../Icons/QuestionCircleIcon'
 import { AuthContext } from '../context/AuthContext'
 import { ElectronContext } from '../context/ElectronContext'
 import ActionsIcon from '../../Icons/ActionsIcon'
+import FilterIcon from '../../Icons/FilterIcon'
 
 const logger = loglevel.getLogger('DasboardTable')
 logger.setLevel(config.logLevel)
@@ -98,7 +100,8 @@ const ObjectTable = forwardRef(
       visibleColumns = {},
       masterFilter = {},
       size = 'middle',
-      onStateChange
+      onStateChange,
+      showFilterSidebar = false
     },
     ref
   ) => {
@@ -138,8 +141,9 @@ const ObjectTable = forwardRef(
     }
     const tableRef = useRef(null)
     const model = getModelByName(type)
-    const tableFilterRef = useRef({})
+    const activeFilterRef = useRef({})
     const tableSorterRef = useRef({})
+    const [sidebarFilter, setSidebarFilter] = useState({})
     const [initialized, setInitialized] = useState(false)
 
     // Table state
@@ -228,9 +232,9 @@ const ObjectTable = forwardRef(
     const fetchData = useCallback(
       async (pageNum = 1, filter = null, sorter = null) => {
         if (filter == null) {
-          filter = tableFilterRef.current
+          filter = activeFilterRef.current
         } else {
-          tableFilterRef.current = filter
+          activeFilterRef.current = filter
         }
         if (sorter == null) {
           sorter = tableSorterRef.current
@@ -590,8 +594,9 @@ const ObjectTable = forwardRef(
 
       if (hasChanged) {
         setPages([])
-        tableFilterRef.current = {}
+        activeFilterRef.current = {}
         tableSorterRef.current = {}
+        setSidebarFilter({})
         setInitialized(false)
         setLoading(true)
         setLazyLoading(false)
@@ -636,23 +641,44 @@ const ObjectTable = forwardRef(
       )
     }
 
+    const getActiveFilter = useCallback((filterState) => {
+      const active = {}
+      Object.entries(filterState).forEach(([k, v]) => {
+        if (v !== '' && v !== undefined) active[k] = v
+      })
+      return active
+    }, [])
+
     const handleTableChange = (pagination, filters, sorter) => {
-      const newFilters = {}
+      const next = { ...sidebarFilter }
 
       Object.entries(filters).forEach(([key, value]) => {
         if (value && value.length > 0) {
-          newFilters[key] = value[0]
+          next[key] = value[0]
+        } else {
+          delete next[key]
         }
       })
 
+      setSidebarFilter(next)
       setPages([])
       setLoading(true)
-      loadPage(initialPage, newFilters, {
+      loadPage(initialPage, getActiveFilter(next), {
         field: sorter.field,
         order: sorter.order
       })
     }
 
+    const handleSidebarFilterChange = useCallback(
+      (newSidebarFilter) => {
+        setSidebarFilter(newSidebarFilter)
+        setPages([])
+        setLoading(true)
+        loadPage(initialPage, getActiveFilter(newSidebarFilter))
+      },
+      [initialPage, loadPage, getActiveFilter]
+    )
+
     const modelProperties = getModelProperties(type)
     // Table columns from model properties
     const columnsWithSkeleton = [
@@ -722,6 +748,9 @@ const ObjectTable = forwardRef(
           width: prop.columnWidth || width,
           fixed: isMobile ? undefined : fixed,
           key: prop.name,
+          filterIcon: () => {
+            return <FilterIcon />
+          },
           render: (text, record) => {
             if (record?.isSkeleton) {
               return (
@@ -739,7 +768,6 @@ const ObjectTable = forwardRef(
           }
         }
 
-        // Add filter configuration if the property is filterable and not in masterFilter
         if (isFilterable && !Object.keys(masterFilter).includes(prop.name)) {
           columnConfig.filterDropdown = ({
             setSelectedKeys,
@@ -754,8 +782,9 @@ const ObjectTable = forwardRef(
               clearFilters,
               propertyName: prop.label
             })
-          // Remove local filtering - let the server handle it
+          const sidebarVal = sidebarFilter[prop.name]
-          columnConfig.filtered = false
+          columnConfig.filteredValue =
+            sidebarVal !== undefined && sidebarVal !== '' ? [sidebarVal] : null
         }
 
         columnsWithSkeleton.push(columnConfig)
@@ -925,7 +954,7 @@ const ObjectTable = forwardRef(
     )
 
     const tableContent = (
-      <Flex gap={'middle'} vertical>
+      <Flex gap={'middle'} vertical style={{ flex: 1, minWidth: 0 }}>
         <Table
           ref={tableRef}
           dataSource={tableData}
@@ -951,6 +980,24 @@ const ObjectTable = forwardRef(
       </Flex>
     )
 
+    if (showFilterSidebar) {
+      return (
+        <Flex
+          gap='middle'
+          align='flex-start'
+          style={{ width: '100%', height: '100%' }}
+        >
+          {tableContent}
+          <FilterSidebar
+            type={type}
+            filter={sidebarFilter}
+            onFilterChange={handleSidebarFilterChange}
+            masterFilter={masterFilter}
+          />
+        </Flex>
+      )
+    }
+
     return tableContent
   }
 )
@@ -968,7 +1015,8 @@ ObjectTable.propTypes = {
   visibleColumns: PropTypes.object,
   masterFilter: PropTypes.object,
   size: PropTypes.string,
-  onStateChange: PropTypes.func
+  onStateChange: PropTypes.func,
+  showFilterSidebar: PropTypes.bool
 }
 
 export default ObjectTable

src/components/Dashboard/common/ObjectTableViewButton.jsx

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import { Button } from 'antd'
+import GridIcon from '../../Icons/GridIcon'
+import ListIcon from '../../Icons/ListIcon'
+
+const ObjectTableViewButton = ({ viewMode, setViewMode, ...buttonProps }) => (
+  <Button
+    icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+    onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
+    title={viewMode === 'cards' ? 'Switch to list view' : 'Switch to card view'}
+    {...buttonProps}
+  />
+)
+
+ObjectTableViewButton.propTypes = {
+  viewMode: PropTypes.oneOf(['list', 'cards']).isRequired,
+  setViewMode: PropTypes.func.isRequired
+}
+
+export default ObjectTableViewButton

src/components/Dashboard/hooks/useFilterSidebarVisibility.jsx

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+
+const useFilterSidebarVisibility = (componentName, defaultValue = false) => {
+  const getInitialVisibility = () => {
+    const stored = sessionStorage.getItem(`${componentName}_filterSidebarVisibility`)
+    if (stored !== null) {
+      return stored === 'true'
+    }
+    return defaultValue
+  }
+
+  const [showFilterSidebar, setShowFilterSidebar] = useState(getInitialVisibility)
+
+  useEffect(() => {
+    sessionStorage.setItem(`${componentName}_filterSidebarVisibility`, showFilterSidebar)
+  }, [showFilterSidebar, componentName])
+
+  return [showFilterSidebar, setShowFilterSidebar]
+}
+
+export default useFilterSidebarVisibility

src/components/Icons/FilterCircleFilledIcon.jsx

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

src/components/Icons/FilterCircleIcon.jsx

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

src/components/Icons/FilterIcon.jsx

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