Move FilterPanel to shared-components

front/package.json

@@ -11,7 +11,6 @@
     "jotai": "^2.20.0",
     "react-big-calendar": "^1.20.0",
     "react-csv": "^2.2.2",
-    "react-icons": "^5.6.0",
     "react-joyride": "^3.1.0",
     "react-table": "^7.8.0",
     "regenerator-runtime": "^0.14.1",

front/src/views/Boxes/BoxesView.test.tsx

@@ -848,7 +848,7 @@ describe("4.8.3 - URL Parameter Sync for Filters", () => {
     expect(screen.getByText(/8650860/i)).toBeInTheDocument();
 
     // Check that the filter drawer button indicates it has a filter applied (filled icon)
-    const filterDrawerButton = screen.getByTestId("filter-drawer-button");
+    const filterDrawerButton = screen.getByTestId("filters-drawer-button");
     expect(filterDrawerButton).toBeInTheDocument();
   });
 
@@ -921,7 +921,7 @@ describe("4.8.3 - URL Parameter Sync for Filters", () => {
     expect(screen.getAllByText(/Sweatpants/i).length).toBeGreaterThanOrEqual(1);
 
     // Check that the filter drawer button indicates it has a filter applied
-    const filterDrawerButton = screen.getByTestId("filter-drawer-button");
+    const filterDrawerButton = screen.getByTestId("filters-drawer-button");
     expect(filterDrawerButton).toBeInTheDocument();
   });
 

front/src/views/Boxes/components/BoxesTable.tsx

@@ -51,7 +51,7 @@ import { IDropdownOption } from "components/Form/SelectField";
 import { BoxesFilter } from "./BoxesFilter";
 import type { IFilterValue } from "@boxtribute/shared-components/statviz/components/filter/MultiSelectFilter";
 import { FilterChips } from "./FilterChips";
-import { FilterPanel } from "components/Table/FilterPanel";
+import { FilterPanel } from "@boxtribute/shared-components/filter/FilterPanel";
 import { createOptions } from "utils/filterOptions";
 import { removeFilter } from "utils/helpers";
 

front/src/views/Products/components/ProductsTable.tsx

@@ -36,7 +36,7 @@ import {
 } from "components/Table/Filter";
 import ColumnSelector from "components/Table/ColumnSelector";
 import { GlobalFilter } from "components/Table/GlobalFilter";
-import { FilterPanel } from "components/Table/FilterPanel";
+import { FilterPanel } from "@boxtribute/shared-components/filter/FilterPanel";
 import type { IFilterValue } from "@boxtribute/shared-components/statviz/components/filter/MultiSelectFilter";
 import { ProductsFilter } from "./ProductsFilter";
 import { ProductsFilterChips } from "./ProductsFilterChips";

front/src/views/Products/components/StandardProductsTable.tsx

@@ -21,7 +21,7 @@ import {
 } from "components/Table/Filter";
 import ColumnSelector from "components/Table/ColumnSelector";
 import { GlobalFilter } from "components/Table/GlobalFilter";
-import { FilterPanel } from "components/Table/FilterPanel";
+import { FilterPanel } from "@boxtribute/shared-components/filter/FilterPanel";
 import type { IFilterValue } from "@boxtribute/shared-components/statviz/components/filter/MultiSelectFilter";
 import { ProductsFilter } from "./ProductsFilter";
 import { ProductsFilterChips } from "./ProductsFilterChips";

front/src/views/Transfers/ShipmentsOverview/ShipmentsOverviewView.tsx

@@ -31,7 +31,7 @@ import {
 import { FilteringSortingTableHeader } from "components/Table/TableHeader";
 import ColumnSelector from "components/Table/ColumnSelector";
 import { GlobalFilter } from "components/Table/GlobalFilter";
-import { FilterPanel } from "components/Table/FilterPanel";
+import { FilterPanel } from "@boxtribute/shared-components/filter/FilterPanel";
 import { BaseOrgCell, BoxesCell, StateCell } from "./components/TableCells";
 import { useLoadAndSetGlobalPreferences } from "hooks/useLoadAndSetGlobalPreferences";
 import { selectedBaseIdAtom } from "stores/globalPreferenceStore";

package.json

@@ -51,6 +51,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.62.0",
+    "react-icons": "^5.6.0",
     "react-router-dom": "^6.30.4",
     "zod": "^4.4.3"
   },

front/src/components/Table/FilterPanel.tsx → shared-components/filter/FilterPanel.tsx

@@ -12,30 +12,37 @@ import {
 import { MdFilterList } from "react-icons/md";
 
 interface FilterPanelProps {
+  label?: string;
   isOpen: boolean;
   onOpen: () => void;
   onClose: () => void;
   children: ReactNode;
 }
 
-export function FilterPanel({ isOpen, onOpen, onClose, children }: FilterPanelProps) {
+export function FilterPanel({
+  label = "Filters",
+  isOpen,
+  onOpen,
+  onClose,
+  children,
+}: FilterPanelProps) {
   const placement = useBreakpointValue({ base: "left" as const, md: "right" as const }) ?? "right";
   const size = useBreakpointValue({ base: undefined, md: "md" });
   const maxW = useBreakpointValue({ base: "90vw", md: undefined });
 
   return (
     <>
       <IconButton
-        icon={<MdFilterList color={"black"} size={25} />}
-        aria-label="Open filters"
+        icon={<MdFilterList color="black" size={25} />}
+        aria-label={`Open ${label}`}
         size="md"
-        data-testid="filter-drawer-button"
+        data-testid={`${label.replaceAll(" ", "").toLowerCase()}-drawer-button`}
         onClick={onOpen}
       />
       <Drawer isOpen={isOpen} onClose={onClose} placement={placement} size={size}>
         <DrawerOverlay />
         <DrawerContent maxW={maxW}>
-          <DrawerHeader>Filters</DrawerHeader>
+          <DrawerHeader>{label}</DrawerHeader>
           <DrawerCloseButton />
           <DrawerBody>{children}</DrawerBody>
         </DrawerContent>