feat: rework ManageProducts page

front/src/App.tsx

@@ -13,6 +13,7 @@ import CreateShipmentView from "views/Transfers/CreateShipment/CreateShipmentVie
 import ShipmentsOverviewView from "views/Transfers/ShipmentsOverview/ShipmentsOverviewView";
 import ShipmentView from "views/Transfers/ShipmentView/ShipmentView";
 import Products from "views/Products/ProductsView";
+import StandardProductsView from "views/Products/StandardProductsView";
 import EnableStandardProductView from "views/EnableStandardProduct/EnableStandardProductView";
 import QrReaderView from "views/QrReader/QrReaderView";
 import NotFoundView from "views/NotFoundView/NotFoundView";
@@ -280,6 +281,17 @@ function App() {
                 />
               }
             />
+            <Route
+              path="assort"
+              element={
+                <Protected
+                  component={<StandardProductsView />}
+                  redirectPath={prevLocation}
+                  requiredAbps={["manage_products"]}
+                  minBeta={4}
+                />
+              }
+            />
             <Route path="enable">
               <Route
                 index

front/src/views/Products/ProductsView.tsx

@@ -1,55 +1,31 @@
-import { Heading, Skeleton, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
-import { useAtomValue } from "jotai";
-import { selectedBaseAtom } from "stores/globalPreferenceStore";
-import StandardProductsContainer from "./components/StandardProductsContainer";
+import { Flex, Heading, Link } from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
 import ProductsContainer from "./components/ProductsContainer";
 import { ErrorBoundary } from "@sentry/react";
 import { AlertWithoutAction } from "components/Alerts";
 import { TableSkeleton } from "components/Skeletons";
 import { Suspense } from "react";
 
 function Products() {
-  const selectedBase = useAtomValue(selectedBaseAtom);
-  const baseName = selectedBase?.name;
-
   return (
     <>
-      <Heading fontWeight="bold" mb={4} as="h2">
-        Manage Products
-      </Heading>
-      <Tabs variant="enclosed-colored" mb={4} defaultIndex={0}>
-        <TabList>
-          <Tab fontWeight="bold" flex={1}>
-            {baseName ? baseName?.toUpperCase() : <Skeleton height={6} width={20} mr={2} />}{" "}
-            PRODUCTS
-          </Tab>
-          <Tab fontWeight="bold" flex={1}>
-            ASSORT STANDARD PRODUCTS
-          </Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel>
-            <ErrorBoundary
-              fallback={
-                <AlertWithoutAction alertText="Could not fetch products data! Please try reloading the page." />
-              }
-            >
-              <Suspense fallback={<TableSkeleton />}>
-                <ProductsContainer />
-              </Suspense>
-            </ErrorBoundary>
-          </TabPanel>
-          <TabPanel>
-            <ErrorBoundary
-              fallback={
-                <AlertWithoutAction alertText="Could not fetch standard products data! Please try reloading the page." />
-              }
-            >
-              <StandardProductsContainer />
-            </ErrorBoundary>
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
+      <Flex alignItems="center" mb={4}>
+        <Heading fontWeight="bold" as="h2" flex="1">
+          Manage Products
+        </Heading>
+        <Link as={RouterLink} to={"assort"} color="blue.500" fontWeight="semibold">
+          Check ASSORT Standard Products {">"}
+        </Link>
+      </Flex>
+      <ErrorBoundary
+        fallback={
+          <AlertWithoutAction alertText="Could not fetch products data! Please try reloading the page." />
+        }
+      >
+        <Suspense fallback={<TableSkeleton />}>
+          <ProductsContainer />
+        </Suspense>
+      </ErrorBoundary>
     </>
   );
 }

front/src/views/Products/StandardProductsView.tsx

@@ -0,0 +1,30 @@
+import { Heading, Text } from "@chakra-ui/react";
+import StandardProductsContainer from "./components/StandardProductsContainer";
+import { MobileBreadcrumbButton } from "components/BreadcrumbNavigation";
+import { ErrorBoundary } from "@sentry/react";
+import { AlertWithoutAction } from "components/Alerts";
+
+function StandardProductsView() {
+  return (
+    <>
+      <MobileBreadcrumbButton label="Back to Manage Products" linkPath={".."} />
+      <Heading fontWeight="bold" mb={4} as="h2">
+        Explore ASSORT
+      </Heading>
+      <Text>
+        ASSORT is a standardized inventory classification system developed in partnership with IHA,
+        HERMINE, and DistributeAid in full compliance with SPHERE and CHS standards for easy and
+        effective use even by small volunteer teams.
+      </Text>
+      <ErrorBoundary
+        fallback={
+          <AlertWithoutAction alertText="Could not fetch standard products data! Please try reloading the page." />
+        }
+      >
+        <StandardProductsContainer />
+      </ErrorBoundary>
+    </>
+  );
+}
+
+export default StandardProductsView;

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   Column,
   Filters,
@@ -21,6 +21,9 @@ import {
   Button,
   HStack,
   useDisclosure,
+  FormControl,
+  FormLabel,
+  Switch,
 } from "@chakra-ui/react";
 import { Link } from "react-router-dom";
 import { AddIcon, ChevronRightIcon, ChevronLeftIcon } from "@chakra-ui/icons";
@@ -58,6 +61,13 @@ function ProductsTable({
   genderOptions,
   sizeRangeOptions,
 }: ProductTableProps) {
+  const [showOnlyAssort, setShowOnlyAssort] = useState(false);
+
+  const filteredData = useMemo(
+    () => (showOnlyAssort ? tableData.filter((row) => row.isStandard) : tableData),
+    [showOnlyAssort, tableData],
+  );
+
   // Add custom filter function to filter objects in a column https://react-table-v7.tanstack.com/docs/examples/filtering
   const filterTypes = useMemo(
     () => ({
@@ -83,7 +93,7 @@ function ProductsTable({
   } = useTable(
     {
       columns,
-      data: tableData,
+      data: filteredData,
       filterTypes,
       initialState: {
         hiddenColumns: tableConfig.getHiddenColumns(),
@@ -145,6 +155,17 @@ function ProductsTable({
         </Link>
         <Spacer />
         <HStack spacing={2} mb={2}>
+          <FormControl display="flex" alignItems="center">
+            <Switch
+              id="show-only-assort"
+              isChecked={showOnlyAssort}
+              onChange={(e) => setShowOnlyAssort(e.target.checked)}
+              mr={2}
+            />
+            <FormLabel htmlFor="show-only-assort" mb={0} whiteSpace="nowrap" fontWeight="normal">
+              Show only ASSORT products
+            </FormLabel>
+          </FormControl>
           <ColumnSelector
             availableColumns={allColumns.filter((column) => column.id !== "actionButton")}
           />