bringing up to date with satisfactory app

package.json

@@ -14,7 +14,11 @@
     "format:write": "prettier --write \"**/*.{js,jsx,ts,tsx,mdx}\" --cache",
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,mdx}\" --cache",
     "deploy:stg": "npm run lint-fix && npm run build && firebase deploy --only hosting:stg",
+    "deploy:stg:skipchecks": "npm run build && firebase deploy --only hosting:stg",
+    "deploy:stg:skipbuild": "firebase deploy --only hosting:stg",
     "deploy:prd": "npm run lint-fix && npm run build && firebase deploy --only hosting:prd",
+    "deploy:prd:skipchecks": "npm run build && firebase deploy --only hosting:prd",
+    "deploy:prd:skipbuild": "firebase deploy --only hosting:prd",
     "check-updates": "npx npm-check-updates -i",
     "docs": "jsdoc -c jsdoc.conf.json",
     "npm-check": "npm-check"

src/components/default/ColorModeSelect.jsx

@@ -1,6 +1,6 @@
-import { useColorScheme } from '@mui/material/styles';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
+import { useColorScheme } from '@mui/material/styles';
 
 export default function ColorModeSelect(props) {
   const { mode, setMode } = useColorScheme();

src/components/default/custom-breadcrumbs.tsx

@@ -1,10 +1,13 @@
-import { Box, Breadcrumbs, Link, Stack, Typography } from '@mui/material';
+import { Box, Breadcrumbs, Link, Menu, MenuItem, Stack } from '@mui/material';
 
 import paths, { PathItem } from '@/config/paths';
 
 import useIsMobile from '@/hooks/use-is-mobile';
+import useRouter from '@/hooks/use-router';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link as RouterLink, matchPath } from 'react-router-dom';
+import { Link as RouterLink, matchPath, useParams } from 'react-router-dom';
 
 const generateBreadcrumbs = (breadcrumbsConfig: PathItem[], pathname: string) => {
   const breadcrumbs: PathItem[] = [];
@@ -34,15 +37,66 @@ const generateBreadcrumbs = (breadcrumbsConfig: PathItem[], pathname: string) =>
   return breadcrumbs;
 };
 
-const CustomBreadcrumbs = ({ currentPage }: { currentPage?: string }) => {
+interface CustomBreadcrumbsProps {
+  // currentPage?: string;
+  // switchOptions?: {
+  //   label: string;
+  //   key: string;
+  // }[];
+  options?: {
+    [key: string]: {
+      getLabel?: (params: { [key: string]: string }) => string;
+      options: {
+        label: string;
+        key: string;
+      }[];
+    };
+  };
+}
+
+const CustomBreadcrumbs = ({ options }: CustomBreadcrumbsProps) => {
+  const params = useParams();
   const { t } = useTranslation();
   const isMobile = useIsMobile();
   const items = generateBreadcrumbs(paths, window.location.pathname);
 
-  // If currentPage is set, replace the last item with it
-  if (currentPage) {
-    items[items.length - 1].label = currentPage;
-  }
+  const [anchorEl, setAnchorEl] = useState(null);
+  const router = useRouter();
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleItemClick = (item: { label: string; key: string }) => {
+    // Route to the selectem item by replacing the last segment of the url with the className
+    const urlSegments = window.location.pathname.split('/');
+    urlSegments[urlSegments.length - 1] = item.key;
+    const newUrl = urlSegments.join('/');
+    router.push(newUrl);
+    setAnchorEl(null);
+  };
+
+  const getLink = (link: string) => {
+    const urlSegments = link.split('/');
+    urlSegments.forEach((segment) => {
+      if (segment.startsWith(':')) {
+        const key = segment.slice(1);
+        if (params[key]) {
+          link = link.replace(segment, params[key]);
+        }
+      }
+    });
+    return link;
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  // // If currentPage is set, replace the last item with it
+  // if (currentPage) {
+  //   items[items.length - 1].label = currentPage;
+  // }
 
   return (
     <>
@@ -53,41 +107,76 @@ const CustomBreadcrumbs = ({ currentPage }: { currentPage?: string }) => {
             maxItems={isMobile ? 2 : 8}
           >
             {items.map((item, index) => {
-              const value = item.translationKey ? t(item.translationKey) : item.label;
-              return item.to ? (
+              const originalValue = item.translationKey ? t(item.translationKey) : item.label;
+              const optionFound = options?.[item.id];
+              let value = originalValue;
+              if (optionFound) {
+                if (optionFound.getLabel) {
+                  value = optionFound.getLabel?.(params as any) || originalValue;
+                }
+              }
+              const to = getLink(item.to || '');
+              return (
                 <Stack
                   direction="row"
                   alignItems="center"
                   key={index}
                 >
                   <Box sx={{ mr: 0.5 }}>{item.Icon && item.Icon}</Box>
                   <Box>
-                    <Link
-                      key={index}
-                      component={RouterLink}
-                      to={item.to}
-                      //underline="hover"
-                      color="inherit"
-                    >
-                      {value}
-                    </Link>
+                    {item.to ? (
+                      <Link
+                        key={index}
+                        component={RouterLink}
+                        to={to}
+                        //underline="hover"
+                        color="inherit"
+                      >
+                        {value}
+                      </Link>
+                    ) : (
+                      <>
+                        {optionFound?.options ? (
+                          <>
+                            <Link
+                              key={index}
+                              component="button"
+                              onClick={handleClick}
+                              color="inherit"
+                            >
+                              <Stack
+                                direction="row"
+                                alignItems="center"
+                              >
+                                <Box>{value}</Box>
+                                <ArrowDropDownIcon />
+                              </Stack>
+                            </Link>
+                            <Menu
+                              anchorEl={anchorEl}
+                              open={Boolean(anchorEl)}
+                              onClose={handleClose}
+                            >
+                              {optionFound.options.map((dropdownItem, dropdownIndex) => (
+                                <MenuItem
+                                  key={dropdownIndex}
+                                  // component={RouterLink}
+                                  // to={dropdownItem.to}
+                                  selected={dropdownItem.key === item.id}
+                                  onClick={() => handleItemClick(dropdownItem)}
+                                >
+                                  {dropdownItem.label}
+                                </MenuItem>
+                              ))}
+                            </Menu>
+                          </>
+                        ) : (
+                          <>{value}</>
+                        )}
+                      </>
+                    )}
                   </Box>
                 </Stack>
-              ) : (
-                <Stack
-                  direction="row"
-                  alignItems="center"
-                  key={index}
-                >
-                  <Box sx={{ mr: 0.5 }}>{item.Icon && item.Icon}</Box>
-                  <Typography
-                    key={index}
-                    color="textPrimary"
-                  >
-                    {/* {item.Icon && item.Icon} */}
-                    {value}
-                  </Typography>
-                </Stack>
               );
             })}
           </Breadcrumbs>

src/components/default/filters/sort-options.tsx

@@ -0,0 +1,42 @@
+import { FormControl, FormControlProps, MenuItem, TextField, TextFieldProps } from '@mui/material';
+
+interface SortOptionsProps {
+  value: string;
+  options: { value: string; label: string }[];
+  handleSortChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  muiFormControlProps?: FormControlProps;
+  muiTextFieldProps?: TextFieldProps;
+}
+
+const SortOptions = ({ value, options, handleSortChange, ...rest }: SortOptionsProps) => {
+  const { muiFormControlProps, muiTextFieldProps } = rest;
+
+  return (
+    <FormControl
+      className="sort-options"
+      {...muiFormControlProps}
+    >
+      <TextField
+        id="sort-label"
+        label="Sort By"
+        select
+        value={value}
+        onChange={handleSortChange}
+        margin="dense"
+        size="small"
+        {...muiTextFieldProps}
+      >
+        {options.map((option) => (
+          <MenuItem
+            key={option.value}
+            value={option.value}
+          >
+            {option.label}
+          </MenuItem>
+        ))}
+      </TextField>
+    </FormControl>
+  );
+};
+
+export default SortOptions;

src/components/default/floating-button.tsx

@@ -0,0 +1,49 @@
+import AddIcon from '@mui/icons-material/Add'; // Import AddIcon
+import { Fab, FabProps, Tooltip } from '@mui/material';
+
+interface FloatingButtonProps {
+  handleAdd: () => void;
+  muiFabProps?: FabProps;
+  children?: React.ReactNode;
+}
+
+const FloatingButton = ({ handleAdd, muiFabProps, children }: FloatingButtonProps) => {
+  return (
+    <Fab
+      color="primary"
+      aria-label="add"
+      style={{
+        position: 'fixed',
+        bottom: 16,
+        right: 16,
+      }}
+      onClick={handleAdd}
+      {...muiFabProps}
+    >
+      {children ? (
+        children
+      ) : (
+        <Tooltip
+          title="Add"
+          placement="left"
+          slotProps={{
+            popper: {
+              modifiers: [
+                {
+                  name: 'offset',
+                  options: {
+                    offset: [0, 14],
+                  },
+                },
+              ],
+            },
+          }}
+        >
+          <AddIcon />
+        </Tooltip>
+      )}
+    </Fab>
+  );
+};
+
+export default FloatingButton;

src/components/default/json-editor.tsx

@@ -1,5 +1,4 @@
 import ReactJson, { InteractionProps, ReactJsonViewProps } from '@microlink/react-json-view';
-import { JsonEditor as JsonEditorExternal } from 'json-edit-react';
 
 interface JsonEditorProps extends ReactJsonViewProps {
   validationSchema?: any;
@@ -41,14 +40,14 @@ const JsonEditor = (props: { data: any; options?: Partial<JsonEditorProps> }) =>
 
   return (
     <div>
-      <JsonEditorExternal
+      {/* <JsonEditorExternal
         data={data}
         setData={(alldata: any) => console.log(alldata)} // optional
         theme={['githubLight']}
         restrictDrag={false}
         restrictDelete={false}
         collapse={true}
-      />
+      /> */}
       <ReactJson
         src={data}
         {...jsonEditorOptions}

src/components/default/ui/search-bar.tsx

@@ -1,19 +1,24 @@
-import { IconButton, InputAdornment, OutlinedInput } from '@mui/material';
+import { IconButton, InputAdornment, OutlinedInput, OutlinedInputProps } from '@mui/material';
 
 import ClearIcon from '@mui/icons-material/Clear';
 
 interface SearchBarProps {
   onClear: () => void;
   value: any;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  placeholder: string;
-  props?: Partial<React.ComponentProps<typeof OutlinedInput>>;
+  placeholder?: string;
+  muiOutlinedInputProps?: OutlinedInputProps;
 }
 
-const SearchBar = ({ onClear, value, onChange, placeholder, props }: SearchBarProps) => {
+const SearchBar = ({
+  onClear,
+  value,
+  onChange,
+  placeholder,
+  muiOutlinedInputProps,
+}: SearchBarProps) => {
   return (
     <OutlinedInput
-      placeholder={placeholder}
       // startAdornment={
       //   <InputAdornment position="start">
       //     <SvgIcon>{/* <SearchMdIcon /> */}</SvgIcon>
@@ -35,7 +40,8 @@ const SearchBar = ({ onClear, value, onChange, placeholder, props }: SearchBarPr
       value={value || ''}
       sx={{ flexGrow: 1 }}
       onChange={onChange}
-      {...props}
+      {...muiOutlinedInputProps}
+      placeholder={placeholder || 'Search'}
     />
   );
 };