Merge branch 'master' of https://github.com/boxwise/boxtribute into u…

…se-jotai-for-storing-global-preferences

.pre-commit-config.yaml

@@ -1,12 +1,13 @@
 # See https://pre-commit.com for more information
 # See https://pre-commit.com/hooks.html for more hooks
+files: back/
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v2.4.0
+    rev: v5.0.0
     hooks:
       - id: trailing-whitespace
+        types: [python]
       - id: end-of-file-fixer
-        exclude: statviz/src/types/generated
   - repo: local
     hooks:
       - id: black

back/README.md

@@ -375,7 +375,7 @@ If you lack an internet connection to communicate with Auth0, it might be benefi
 
 to simulate a god user with ID 8 (for a regular user, set something like `id=1, organisation_id=1`).
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
 > To keep the front-end side up-to-date with the GraphQL schema, make sure that the pre-commit command for `*.graphql` files (`id: generate-graphql-ts-types`) is running properly.
 >
 > It should generate both `schema.graphql` (the introspected unified schema) and `graphql-env.d.ts` (the generated types to be ìnferred and consumed in the FE with `gql.tada`) inside `/graphql/generated/`.

back/requirements-dev.txt

@@ -11,4 +11,4 @@ types-Flask-Cors==5.0.0.20240902
 types-peewee==3.17.8.20241117
 types-setuptools==75.6.0.20241126
 types-PyMySQL==1.1.0.20241103
-flake8-bugbear==24.10.31
+flake8-bugbear==24.12.12

back/requirements.txt

@@ -1,14 +1,14 @@
 ariadne==0.23.0
 Flask==3.1.0
 Flask-Cors==5.0.0
-sentry-sdk[flask]==2.19.0
+sentry-sdk[flask]==2.19.2
 PyMySQL==1.1.1
 peewee==3.17.8
 peewee-moves==2.1.0
 python-dotenv==1.0.1
-PyJWT[crypto]==2.10.0
+PyJWT[crypto]==2.10.1
 aiodataloader==0.4.0
 gunicorn
 auth0-python==4.7.2
-Faker==33.0.0
+Faker==33.1.0
 freezegun==1.5.1

docs/graphql-api/package.json

@@ -8,6 +8,6 @@
     "url": "https://github.com/boxwise/boxtribute.git"
   },
   "dependencies": {
-    "spectaql": "3.0.2"
+    "spectaql": "3.0.3"
   }
 }

front/package.json

@@ -8,23 +8,24 @@
     "@auth0/auth0-react": "^2.2.4",
     "@boxtribute/shared-components": "workspace:*",
     "@fontsource/open-sans": "^5.1.0",
-    "@fortawesome/fontawesome-svg-core": "6.7.1",
-    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@sentry/react": "^8.42.0",
+    "@sentry/react": "^8.47.0",
     "@zxing/browser": "^0.1.5",
     "@zxing/library": "^0.21.3",
     "chakra-react-select": "4.9.2",
     "jotai": "^2.10.3",
-    "react-big-calendar": "^1.16.3",
+    "react-big-calendar": "^1.17.0",
     "react-icons": "^5.4.0",
     "react-table": "^7.8.0",
+    "react-csv": "^2.2.2",
     "regenerator-runtime": "^0.14.1",
-    "victory": "^37.3.2"
+    "victory": "^37.3.3"
   },
   "devDependencies": {
     "@chakra-ui/storybook-addon": "^5.2.5",
-    "@sentry/types": "^8.42.0",
+    "@sentry/types": "^8.47.0",
     "@storybook/addon-actions": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
@@ -35,7 +36,7 @@
     "@storybook/test": "^8.4.7",
     "@types/react-big-calendar": "^1.16.0",
     "@types/react-table": "^7.7.20",
-    "msw": "^2.6.7",
+    "msw": "^2.7.0",
     "mutationobserver-shim": "^0.3.7",
     "storybook": "^8.4.7"
   },

front/src/App.tsx

@@ -1,8 +1,7 @@
 import "regenerator-runtime/runtime";
-import { ReactElement, Suspense, useEffect, useState } from "react";
+import { ReactElement, Suspense, useContext, useEffect, useState } from "react";
 import { Navigate, Outlet, Route, Routes, useLocation } from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";
-import { Alert, AlertIcon, Button } from "@chakra-ui/react";
 import { useLoadAndSetGlobalPreferences } from "hooks/useLoadAndSetGlobalPreferences";
 import Layout from "components/Layout";
 import Boxes from "views/Boxes/BoxesView";
@@ -23,6 +22,8 @@ import { TableSkeleton } from "components/Skeletons";
 import { AlertWithoutAction } from "components/Alerts";
 import { ErrorBoundary } from "@sentry/react";
 import Dashboard from "@boxtribute/shared-components/statviz/dashboard/Dashboard";
+import ErrorView from "views/ErrorView/ErrorView";
+import { GlobalPreferencesContext } from "providers/GlobalPreferencesProvider";
 
 type ProtectedRouteProps = {
   component: ReactElement;
@@ -54,10 +55,7 @@ function Protected({
   }
 
   return (
-    <Navigate
-      to={redirectPath && redirectPath !== currentPath ? redirectPath : "/qrreader"}
-      replace
-    />
+    <Navigate to={redirectPath && redirectPath !== currentPath ? redirectPath : "/error"} replace />
   );
 }
 
@@ -67,6 +65,7 @@ function Protected({
  * Fetch first available base id from user JWT token from Auth0 to prepend `/bases/:baseId` with that id, if available.
  */
 function DropappRedirect({ path }: DropappRedirectProps) {
+  const { globalPreferences } = useContext(GlobalPreferencesContext);
   const { user } = useAuth0();
   /**
    * Redirect to this `/error`, non-existent path by default, which will lead to `<NotFoundView />`.
@@ -78,7 +77,8 @@ function DropappRedirect({ path }: DropappRedirectProps) {
   if (!user || !user["https://www.boxtribute.com/base_ids"])
     return <Navigate to={pathToRedirect} replace />;
 
-  const baseId = user["https://www.boxtribute.com/base_ids"][0];
+  const baseId =
+    globalPreferences.selectedBase?.id || user["https://www.boxtribute.com/base_ids"][0];
   const baseURL = `/bases/${baseId}`;
   const urlParam = location.pathname.split("/").at(-1);
 
@@ -103,7 +103,6 @@ function DropappRedirect({ path }: DropappRedirectProps) {
 }
 
 function App() {
-  const { logout } = useAuth0();
   const { error } = useLoadAndSetGlobalPreferences();
   const location = useLocation();
   const [prevLocation, setPrevLocation] = useState<string | undefined>(undefined);
@@ -116,21 +115,11 @@ function App() {
   }, [location]);
 
   if (error) {
-    console.error(error);
-    return (
-      <>
-        <Alert status="error">
-          <AlertIcon />
-          {error}
-        </Alert>
-        <Button onClick={() => logout()}>Logout</Button>
-      </>
-    );
+    return <ErrorView error={error} />;
   }
 
   return (
     <Routes>
-      <Route index element={<Navigate to="/qrreader" />} />
       <Route path="bases">
         <Route index />
         <Route path=":baseId" element={<Layout />}>
@@ -277,6 +266,7 @@ function App() {
         <Route index element={<DropappRedirect path="/qrreader" />} />
         <Route path=":qrCodeHash" element={<DropappRedirect path="/qrreader/:qrCodeHash" />} />
       </Route>
+      <Route path="error" element={<ErrorView error="Something went wrong!" />} />
       <Route path="/*" element={<NotFoundView />} />
     </Routes>
   );

front/src/components/HeaderMenu/MenuDesktop.tsx

@@ -42,15 +42,20 @@ function MenuDesktop({ menuItemsGroups }: IHeaderMenuProps) {
         as="nav"
         flexDirection="column"
         minW={256}
-        gap={16}
+        gap={4}
         pt={6}
         boxShadow="base"
         bg="white"
         pos="sticky"
         top="0"
       >
         <BoxtributeLogo alignSelf="center" w={156} backgroundSize="contain" />
-        <Accordion allowMultiple={allowMultipleAccordionsOpen} defaultIndex={expandedMenuIndex()}>
+        <Accordion
+          allowToggle={!allowMultipleAccordionsOpen}
+          allowMultiple={allowMultipleAccordionsOpen}
+          defaultIndex={expandedMenuIndex()}
+          overflowY="scroll"
+        >
           {menuItemsGroups.map((menu) => (
             <AccordionItem key={menu.text}>
               <AccordionButton _expanded={{ bg: "#DC4F51", color: "white" }} gap={3}>
@@ -75,7 +80,7 @@ function MenuDesktop({ menuItemsGroups }: IHeaderMenuProps) {
           ))}
         </Accordion>
         <Accordion marginTop={"auto"}>
-          <strong style={{ marginLeft: "1rem" }}>Settings</strong>
+          <strong style={{ marginLeft: "1rem", textTransform: "uppercase" }}>Settings</strong>
           <AccordionItem>
             <AccordionButton
               gap={3}

front/src/components/HeaderMenu/MenuMobile.tsx

@@ -60,7 +60,7 @@ function MenuMobile({ onClickScanQrCode, menuItemsGroups }: IHeaderMenuProps) {
     (availableBases?.filter((base) => base.id !== baseId).length || 0) >= 1;
 
   return (
-    <Flex as="nav" py={4} zIndex="2">
+    <Flex as="nav" py={4} zIndex="3">
       <BaseSwitcher isOpen={isOpen} onClose={onClose} />
       <Flex justifyContent="space-between" w="100%" alignItems="center">
         <BoxtributeLogo maxH="3.5em" mb={1} />

front/src/components/Table/Filter.tsx

@@ -147,7 +147,7 @@ includesSomeObjectFilterFn.autoRemove = (val) => !val || !val.length;
 
 // This is a custom filter function for columns that consist of objects
 // https://react-table-v7.tanstack.com/docs/examples/filtering
-export const includesOneOfMulipleStringsFilterFn = (rows, ids, filterValue) =>
+export const includesOneOfMultipleStringsFilterFn = (rows, ids, filterValue) =>
   rows.filter((row) =>
     ids.some((id) => {
       const rowValue = row.values[id];
@@ -159,4 +159,4 @@ export const includesOneOfMulipleStringsFilterFn = (rows, ids, filterValue) =>
       );
     }),
   );
-includesOneOfMulipleStringsFilterFn.autoRemove = (val) => !val || !val.length;
+includesOneOfMultipleStringsFilterFn.autoRemove = (val) => !val || !val.length;

front/src/components/Table/Table.tsx

@@ -1,6 +1,6 @@
 import { Table, TableContainer, Tbody, Td, Tr } from "@chakra-ui/react";
 import {
-  includesOneOfMulipleStringsFilterFn,
+  includesOneOfMultipleStringsFilterFn,
   includesSomeObjectFilterFn,
 } from "components/Table/Filter";
 import { ReactNode, useMemo } from "react";
@@ -57,7 +57,7 @@ export function FilteringSortingTable({ columns, tableData, initialState = {} }:
   const filterTypes = useMemo(
     () => ({
       includesSomeObject: includesSomeObjectFilterFn,
-      includesOneOfMulipleStrings: includesOneOfMulipleStringsFilterFn,
+      includesOneOfMultipleStrings: includesOneOfMultipleStringsFilterFn,
     }),
     [],
   );

front/src/components/Table/TableHeader.tsx

@@ -8,7 +8,7 @@ interface IFilteringSortingTableHeaderProps {
 
 export function FilteringSortingTableHeader({ headerGroups }: IFilteringSortingTableHeaderProps) {
   return (
-    <Thead>
+    <Thead position="sticky" top={0} background="white">
       {headerGroups.map((headerGroup: HeaderGroup, idx) => (
         <Tr {...headerGroup.getHeaderGroupProps()} key={idx}>
           {headerGroup.headers.map((column, idx) => (

front/src/hooks/useUnassignBoxesFromShipments.ts

@@ -122,7 +122,7 @@ export const useUnassignBoxesFromShipments = () => {
           if (unassignedBoxes.length > 0) {
             createToast({
               message: `${unassignedBoxes.length === 1 ? "A Box was" : `${unassignedBoxes.length} Boxes were`
-                } successfully unassigned from their corresponding shipment.`,
+                } successfully unassigned from the corresponding shipment.`,
             });
           }
           if (failedBoxes.length > 0) {

front/src/mocks/products.ts

@@ -5,6 +5,7 @@ export const product1 = {
   name: "Long Sleeves",
   gender: "Women",
   category: {
+    id: "1",
     name: "Tops",
     __typename: "ProductCategory",
   },
@@ -16,6 +17,11 @@ export const product1 = {
 export const productBasic1 = {
   id: "1",
   name: "Snow trousers",
+  category: {
+    id: "2",
+    name: "Bottoms",
+    __typename: "ProductCategory",
+  },
   gender: "Boy",
   deletedOn: null,
   __typename: "Product",
@@ -26,6 +32,7 @@ export const product3 = {
   name: "Long Sleeves",
   gender: "None",
   category: {
+    id: "1",
     name: "Tops",
     __typename: "ProductCategory",
   },
@@ -41,6 +48,7 @@ export const products = [
     name: "Winter Jackets",
     gender: "Men",
     category: {
+      id: "3",
       name: "Jackets / Outerwear",
       __typename: "ProductCategory",
     },

front/src/views/Box/components/BoxTabs.tsx

@@ -90,12 +90,7 @@ function BoxTabs({
             </Stack>
           )}
         </Stack>
-        <Tabs
-          w="100%"
-          isFitted
-          variant="enclosed-colored"
-          defaultIndex={boxData?.shipmentDetail ? 1 : 0}
-        >
+        <Tabs w="100%" isFitted defaultIndex={boxData?.shipmentDetail ? 1 : 0}>
           <TabList>
             <Tab>
               <Stack direction="row" alignContent="center" alignItems="center">