@campxdev/react-blueprint 1.2.20 → 1.3.0

package/src/components/Assets/Icons/Icons.tsx

@@ -62,6 +62,7 @@ import { PeoplexIcon } from './IconComponents/PeoplexIcon';
 import { ProductFeaturesIcon } from './IconComponents/ProductFeaturesIcon';
 import { ProfileIcon } from './IconComponents/ProfileIcon';
 import { QuestionsIcon } from './IconComponents/QuestionsIcon';
+import QuizIcon from './IconComponents/QuizIcon';
 import { RedirectIcon } from './IconComponents/RedirectIcon';
 import { RedoIcon } from './IconComponents/RedoIcon';
 import { ResourcesIcon } from './IconComponents/ResourcesIcon';
@@ -78,6 +79,7 @@ import { TasksIcon } from './IconComponents/TasksIcon';
 import { TextLocalIcon } from './IconComponents/TextLocalIcon';
 import { TicketsIcon } from './IconComponents/TicketsIcon';
 import { TimeTableIcon } from './IconComponents/TimeTableIcon';
+import TimerIcon from './IconComponents/TimerIcon';
 import { UmsIcon } from './IconComponents/UmsIcon';
 import { UnCheckedCheckboxIcon } from './IconComponents/UncheckCheckBoxIcon';
 import { UnCheckedRadioIcon } from './IconComponents/UncheckedRadioIcon';
@@ -178,4 +180,6 @@ export const Icons = {
   AttendanceIcon,
   ResourcesIcon,
   TimeTableIcon,
+  TimerIcon,
+  QuizIcon,
 };

package/src/components/DataDisplay/Card/Card.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/material';
 import { Variant } from '@mui/material/styles/createTypography';
 import { ReactNode } from 'react';
-import { DropDownIcon, DropdownMenu, Switch, SwitchProps } from '../../export';
+import { DropDownIcon, DropdownMenu } from '../../export';
 import {
   StyledButton,
   StyledCardActions,
@@ -46,8 +46,7 @@ export interface CardProps {
   imageSrc?: string;
   titleImgIcon?: ReactNode;
   checkBox?: boolean;
-  hasSwitch?: boolean;
-  switchProps?: SwitchProps;
+
   moreOptions?: boolean;
   menu?: Array<ReactNode>;
   icon?: ReactNode;
@@ -64,7 +63,7 @@ export const Card = ({
   footer,
   fields,
   imageSrc,
-  checkBox,
+
   statusSx,
   cardSx,
   headerSx,
@@ -78,8 +77,6 @@ export const Card = ({
   icon,
   children,
   menu = [],
-  switchProps,
-  hasSwitch,
 }: CardProps) => {
   const handleClick = (e: any) => {
     footer?.onClick();
@@ -110,7 +107,6 @@ export const Card = ({
           </Stack>
         </Stack>
         <Stack flexDirection={'row'} gap={'12px'} alignItems={'center'}>
-          {hasSwitch && <Switch {...switchProps} />}
           {status && (
             <StyledStatusText variant="label2" sx={statusSx}>
               {status}{' '}

package/src/components/DataDisplay/EditableDataTable/EditableDataTable.tsx

@@ -129,7 +129,7 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
             height: '100%',
           },
           '& .MuiDataGrid-cell.MuiDataGrid-cell--editing': {
-            padding: '0px 9px 0px 0px',
+            padding: '0px 9px',
             alignItems: 'center',
           },
           '& .MuiDataGrid-cell': {
@@ -144,6 +144,13 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
               borderColor: theme.palette.primary.main,
             },
           },
+          '& .MuiAutocomplete-input': {
+            border: 'none',
+          },
+
+          '& .MuiOutlinedInput-input': {
+            padding: '8px 14px',
+          },
         }}
         {...props}
         rows={rows}
@@ -156,53 +163,36 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
             width: 150,
             cellClassName: 'actions',
             getActions: (params) => {
+              const actions = [];
               if (rowModesModel[params.id]?.mode === GridRowModes.Edit) {
-                return props.hideDelete
-                  ? [
-                      <GridActionsCellItem
-                        icon={<Icons.SaveIcon />}
-                        label="Save"
-                        onClick={() => handleSaveClick(params)}
-                      />,
-                    ]
-                  : [
-                      <GridActionsCellItem
-                        icon={<Icons.SaveIcon />}
-                        label="Save"
-                        onClick={() => handleSaveClick(params)}
-                      />,
-                      <GridActionsCellItem
-                        icon={<Icons.DeleteIcon />}
-                        label="Cancel"
-                        onClick={() => handleDeleteClick(params)}
-                        color="inherit"
-                      />,
-                    ];
+                actions.push(
+                  <GridActionsCellItem
+                    icon={<Icons.SaveIcon />}
+                    label="Save"
+                    onClick={() => handleSaveClick(params)}
+                  />,
+                );
+              } else {
+                actions.push(
+                  <GridActionsCellItem
+                    icon={<Icons.EditIcon />}
+                    label="Edit"
+                    onClick={() => handleEditClick(params)}
+                    color="inherit"
+                  />,
+                );
               }
-
-              return props.hideDelete
-                ? [
-                    <GridActionsCellItem
-                      icon={<Icons.EditIcon />}
-                      label="Edit"
-                      onClick={() => handleEditClick(params)}
-                      color="inherit"
-                    />,
-                  ]
-                : [
-                    <GridActionsCellItem
-                      icon={<Icons.EditIcon />}
-                      label="Edit"
-                      onClick={() => handleEditClick(params)}
-                      color="inherit"
-                    />,
-                    <GridActionsCellItem
-                      icon={<Icons.DeleteIcon />}
-                      label="Delete"
-                      onClick={() => handleDeleteClick(params)}
-                      color="inherit"
-                    />,
-                  ];
+              if (!props.hideDelete) {
+                actions.push(
+                  <GridActionsCellItem
+                    icon={<Icons.DeleteIcon />}
+                    label="Delete"
+                    onClick={() => handleDeleteClick(params)}
+                    color="inherit"
+                  />,
+                );
+              }
+              return actions;
             },
           } as GridColDef,
         ]}

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -5,15 +5,14 @@ import {
   Box,
   Autocomplete as MuiAutocomplete,
   Paper,
-  PaperProps,
 } from '@mui/material';
 import axios from 'axios';
-import _ from 'lodash';
-import { SyntheticEvent, useEffect, useReducer } from 'react';
+import _, { debounce } from 'lodash';
+import { SyntheticEvent, useEffect, useMemo, useReducer } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Spinner } from '../../Feedback/Spinner/Spinner';
 import { TextField } from '../TextField/TextField';
-import { FetchingOptionsLoader } from '../components/FetchingOptionsLoader';
+import { OptionsLoader } from '../components/OptionsLoader';
 import { OptionContainer } from '../styles';
 
 function sleep(duration: number): Promise<void> {
@@ -24,6 +23,13 @@ function sleep(duration: number): Promise<void> {
   });
 }
 
+declare module '@mui/material/Autocomplete' {
+  interface AutocompletePaperSlotPropsOverrides {
+    loadingOptions: boolean;
+    isSearch: boolean;
+  }
+}
+
 export type SingleSelectProps = {
   options?: { label: string; subLabel?: string; value: any }[] | any[];
   optionsApiEndPoint?: string;
@@ -33,6 +39,11 @@ export type SingleSelectProps = {
   label?: string;
   name?: string;
   getValue?: (option: any) => any;
+  dbValueProps?: {
+    valueKey: string;
+    isObjectId?: boolean;
+  };
+  dbLabelProps?: { labelKey: string; subLabelKey?: string };
   onChange: (value: any) => void;
   error?: any;
   helperText?: string;
@@ -53,7 +64,7 @@ export type SingleSelectProps = {
   | 'renderInput'
 >;
 
-const CustomPaper = (props: PaperProps) => (
+const CustomPaper = (props: any) => (
   <Paper
     {...props}
     sx={{
@@ -62,7 +73,7 @@ const CustomPaper = (props: PaperProps) => (
     }}
   >
     {props.children}
-    <FetchingOptionsLoader loading={!!props.square} />
+    <OptionsLoader loading={props.loadingOptions} isSearch={props.isSearch} />
   </Paper>
 );
 
@@ -71,12 +82,14 @@ enum SingleSelectActionsTypes {
   CLOSE = 'close',
   LOAD_INTERNAL_OPTIONS_START = 'load_internal_options_start',
   LOAD_INTERNAL_OPTIONS_END = 'load_internal_options_end',
-  LOAD_INITIAL_INTERNAL_OPTIONS_START = 'load_initial_internal_options_start',
-  LOAD_INITIAL_INTERNAL_OPTIONS_END = 'load_initial_internal_options_end',
+  LOAD_SELECTED_OPTIONS_START = 'load_selected_options_start',
+  LOAD_SELECTED_OPTIONS_END = 'load_selected_options_end',
   SET_NETWORK_ERROR = 'set_network_error',
   SET_INTERNAL_OPTIONS = 'set_internal_options',
   APPEND_INTERNAL_OPTIONS = 'append_internal_options',
   CHANGE_HAS_MORE_FLAG = 'change_has_more_flag',
+  SET_SEARCH = 'set_search',
+  CLEAR_SEARCH = 'clear_search',
 }
 const singleSelectReducer = (
   state: any,
@@ -98,15 +111,27 @@ const singleSelectReducer = (
     case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END: {
       return { ...state, loadingInternalOptions: false };
     }
-    case SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_START: {
+    case SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_START: {
       return { ...state, loadingInitialInternalOptions: true };
     }
-    case SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_END: {
+    case SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_END: {
       return { ...state, loadingInitialInternalOptions: false };
     }
     case SingleSelectActionsTypes.SET_NETWORK_ERROR: {
       return { ...state, ...stateChanges };
     }
+    case SingleSelectActionsTypes.SET_SEARCH: {
+      return { ...state, search: stateChanges.search, hasMore: true };
+    }
+    case SingleSelectActionsTypes.CLEAR_SEARCH: {
+      return {
+        ...state,
+        search: null,
+        offset: 0,
+        internalOptions: [],
+        internalOptionsMap: {},
+      };
+    }
     case SingleSelectActionsTypes.SET_INTERNAL_OPTIONS: {
       return {
         ...state,
@@ -125,7 +150,7 @@ const singleSelectReducer = (
         },
         loadingInternalOptions: false,
         limit: state.limit,
-        offset: state.offset + 10,
+        offset: state.offset + (stateChanges?.persistOffset ? 0 : 10),
       };
     }
     case SingleSelectActionsTypes.CHANGE_HAS_MORE_FLAG: {
@@ -152,6 +177,11 @@ export const SingleSelect = ({
   onChange,
   error,
   helperText,
+  dbValueProps = {
+    valueKey: 'id',
+    isObjectId: false,
+  },
+  dbLabelProps,
   onOpen,
   onClose,
   ...restProps
@@ -169,6 +199,7 @@ export const SingleSelect = ({
     limit: 10,
     offset: 0,
     hasMore: true,
+    search: null,
   });
   const {
     open,
@@ -178,6 +209,7 @@ export const SingleSelect = ({
     limit,
     offset,
     hasMore,
+    search,
   } = state;
 
   const internalAxios = useCampxAxios ? campxAxios : axios;
@@ -186,7 +218,7 @@ export const SingleSelect = ({
     dispatch({
       actionType: SingleSelectActionsTypes.OPEN,
     });
-    if (optionsApiEndPoint && !internalOptions.length) {
+    if (optionsApiEndPoint && internalOptions.length <= 1) {
       try {
         dispatch({
           actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
@@ -196,18 +228,36 @@ export const SingleSelect = ({
             params: {
               limit,
               offset,
+              selectedValueData: value,
+              dbValueProps: {
+                ...dbValueProps,
+                ...(dbValueProps.isObjectId && { isObjectId: true }),
+              },
+              dbLabelProps,
               ...optionsApiEndpointParams,
             },
           })
           .then((res) => res.data);
         await sleep(700);
-        dispatch({
-          actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
-          stateChanges: {
-            internalOptions: options,
-            internalOptionsMap: generateOptionsMap(options),
-          },
-        });
+
+        if (internalOptions.length) {
+          dispatch({
+            actionType: SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
+            stateChanges: {
+              newOptions: options,
+              internalOptionsMap: generateOptionsMap(options),
+              persistOffset: true,
+            },
+          });
+        } else {
+          dispatch({
+            actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
+            stateChanges: {
+              internalOptions: options,
+              internalOptionsMap: generateOptionsMap(options),
+            },
+          });
+        }
       } catch (e) {
         dispatch({
           actionType: SingleSelectActionsTypes.SET_NETWORK_ERROR,
@@ -232,6 +282,11 @@ export const SingleSelect = ({
     dispatch({
       actionType: SingleSelectActionsTypes.CLOSE,
     });
+    if (optionsApiEndPoint) {
+      dispatch({
+        actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
+      });
+    }
     if (onClose) {
       onClose(event, reason);
     }
@@ -249,10 +304,18 @@ export const SingleSelect = ({
         actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
       });
       const newOptions = await internalAxios
-        .get(optionsApiEndPoint ?? '', {
+        .get(optionsApiEndPoint, {
           params: {
             limit: limit,
             offset: offset + 10,
+            search: search,
+            selectedValueData: value,
+            dbValueProps: {
+              ...dbValueProps,
+              ...(dbValueProps.isObjectId && { isObjectId: true }),
+            },
+            dbLabelProps,
+            ...optionsApiEndpointParams,
           },
         })
         .then((res) => res.data);
@@ -272,13 +335,92 @@ export const SingleSelect = ({
     }
   };
 
-  const fetchInitialOptions = async () => {
+  const searchDb = async (searchValue: string) => {
     dispatch({
-      actionType: SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_START,
+      actionType: SingleSelectActionsTypes.SET_SEARCH,
+      stateChanges: {
+        search: searchValue,
+      },
+    });
+    if (!searchValue || searchValue.trim() === '') {
+      dispatch({
+        actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
+      });
+    }
+    if (optionsApiEndPoint) {
+      try {
+        dispatch({
+          actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
+        });
+        const options = await internalAxios
+          .get(optionsApiEndPoint, {
+            params: {
+              limit,
+              offset: 0,
+              selectedValueData: value,
+              dbValueProps: {
+                ...dbValueProps,
+                ...(dbValueProps.isObjectId && { isObjectId: true }),
+              },
+              dbLabelProps,
+              search: searchValue,
+              ...optionsApiEndpointParams,
+            },
+          })
+          .then((res) => res.data);
+        await sleep(700);
+
+        dispatch({
+          actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
+          stateChanges: {
+            internalOptions: options,
+            internalOptionsMap: generateOptionsMap(options),
+          },
+        });
+      } catch (e) {
+        dispatch({
+          actionType: SingleSelectActionsTypes.SET_NETWORK_ERROR,
+          stateChanges: {
+            error: e,
+          },
+        });
+        dispatch({
+          actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END,
+        });
+      }
+    }
+  };
+
+  const debouncedSendRequest = useMemo(() => {
+    return debounce((searchValue) => {
+      searchDb(searchValue);
+    }, 300);
+  }, [searchDb]);
+
+  const handleSearch = async (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const searchValue = e.target.value;
+    debouncedSendRequest(searchValue);
+  };
+
+  const loadSelectedOptions = async () => {
+    dispatch({
+      actionType: SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_START,
     });
     try {
       const res = await internalAxios.get(optionsApiEndPoint ?? '', {
-        params: { limit, offset, selectedValue: value },
+        params: {
+          limit,
+          offset,
+          selectedValueData: value,
+          dbValueProps: {
+            ...dbValueProps,
+            ...(dbValueProps.isObjectId && { isObjectId: true }),
+          },
+          dbLabelProps,
+          filterBySelectedValues: true,
+        },
       });
       dispatch({
         actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
@@ -298,10 +440,9 @@ export const SingleSelect = ({
 
   useEffect(() => {
     if (value && optionsApiEndPoint) {
-      fetchInitialOptions().finally(() => {
+      loadSelectedOptions().finally(() => {
         dispatch({
-          actionType:
-            SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_END,
+          actionType: SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_END,
         });
       });
     }
@@ -329,11 +470,19 @@ export const SingleSelect = ({
       }}
       open={open}
       autoFocus={true}
+      filterOptions={(options, state) => {
+        if (optionsApiEndPoint) {
+          return options;
+        }
+        return options.filter((option) =>
+          option.label.toLowerCase().includes(state.inputValue.toLowerCase()),
+        );
+      }}
       value={state.internalOptionsMap[value]}
       PaperComponent={CustomPaper}
       renderOption={(props, option: any) => {
         return (
-          <Box component="li" {...props}>
+          <Box component="li" {...props} key={option.value}>
             <OptionContainer>
               <Typography variant="label1">{option.label}</Typography>
               <Typography variant="caption">{option?.subLabel}</Typography>
@@ -349,7 +498,8 @@ export const SingleSelect = ({
         ...restProps.slotProps,
         paper: {
           ...restProps.slotProps?.paper,
-          square: loadingInternalOptions,
+          loadingOptions: loadingInternalOptions,
+          isSearch: !!state.search,
         },
       }}
       onOpen={handleOpen}
@@ -361,6 +511,7 @@ export const SingleSelect = ({
           label={label}
           required={required}
           name={name}
+          onChange={handleSearch}
           error={error}
           helperText={helperText}
         />

package/src/components/Input/components/{FetchingOptionsLoader.tsx → OptionsLoader.tsx}

@@ -2,11 +2,19 @@ import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Spinner } from '../../Feedback/Spinner/Spinner';
 import { FetchingOptionsLoaderContainer } from '../styles';
 
-export const FetchingOptionsLoader = ({ loading }: { loading: boolean }) => {
+export const OptionsLoader = ({
+  loading,
+  isSearch,
+}: {
+  loading: boolean;
+  isSearch: boolean;
+}) => {
   return loading ? (
     <FetchingOptionsLoaderContainer direction="row" alignItems="center">
       <Spinner />
-      <Typography variant="caption">Fetching Options</Typography>
+      <Typography variant="caption">
+        {isSearch ? 'Searching' : 'Loading Options'}
+      </Typography>
     </FetchingOptionsLoaderContainer>
   ) : (
     <></>

package/src/components/Input/styles.tsx

@@ -5,7 +5,7 @@ export const OptionContainer = styled(Box)(({ theme }) => ({
   flexDirection: 'column',
   borderBottom: `1px solid ${theme.palette.secondary.main}`,
   width: '100%',
-  padding: '5px 0px',
+  padding: '4px 0px',
 }));
 
 export const FetchingOptionsLoaderContainer = styled(Stack)(({ theme }) => ({

package/src/components/Layout/PageContent/PageContent.tsx

@@ -1,16 +1,19 @@
 import { Box, BoxProps, styled } from '@mui/material';
 
-const StyledPageContent = styled(Box)(({ theme }) => ({
-  padding: '1rem',
-  flex: 1,
+const PageContentContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
-  borderRadius: '10px',
   overflowY: 'auto',
+  padding: '16px',
+  gap: '16px',
   backgroundColor: theme.palette.surface.paperBackground,
-  height: '100%',
+  height: 'calc(100vh - 148px)',
+  width: '100%',
+  borderRadius: '8px',
 }));
 
-export function PageContent(props: BoxProps) {
-  return <StyledPageContent {...props}>{props.children}</StyledPageContent>;
-}
+export const PageContent = (props: BoxProps) => {
+  return (
+    <PageContentContainer {...props}>{props.children}</PageContentContainer>
+  );
+};

package/src/components/Layout/export.ts

@@ -1,6 +1,4 @@
-import { AppHeader } from './AppHeader/AppHeader';
-import { TabsLayout } from './TabsLayout/TabsLayout';
-
+export * from './AppHeader/AppHeader';
+export * from './PageContent/PageContent';
 export * from './PageHeader/components/DensitySelector/DensitySelector';
-
-export { AppHeader, TabsLayout };
+export * from './TabsLayout/TabsLayout';

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -1,4 +1,4 @@
-import { Box, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
+import { Box, styled, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
 import { ChangeEvent, useEffect, useState } from 'react';
 
 interface CustomTabProps extends Omit<TabProps, 'component'> {
@@ -14,6 +14,12 @@ export interface TabsContainerProps {
   tabsProps: TabsProps;
 }
 
+const TabContent = styled(Box)(({ theme }) => ({
+  width: '100%',
+  height: 'calc(100vh - 200px)',
+  backgroundColor: theme.palette.surface.paperBackground,
+}));
+
 export const TabsContainer = ({
   tabs,
   onTabChange,
@@ -52,7 +58,9 @@ export const TabsContainer = ({
           />
         ))}
       </Tabs>
-      <Box p={2}>{tabs.find((tab) => tab?.key === currentTab)?.component}</Box>
+      <TabContent>
+        {tabs.find((tab) => tab?.key === currentTab)?.component}
+      </TabContent>
     </>
   );
 };

package/src/themes/commonTheme.ts

@@ -302,7 +302,15 @@ export const getCommonTheme = (mode: Theme) => {
             '& label': {
               display: 'none',
             },
+            input: {
+              padding: '9px',
+            },
+
+            fieldset: {
+              top: '0px',
+            },
             '& legend': {
+              height: '0px',
               '& span': {
                 display: 'none',
               },
@@ -310,9 +318,6 @@ export const getCommonTheme = (mode: Theme) => {
             '& input:-webkit-autofill': {
               height: '7px',
             },
-            fieldset: {
-              top: '0px',
-            },
             minWidth: '200px',
           },
         },
@@ -446,6 +451,8 @@ export const getCommonTheme = (mode: Theme) => {
           root: {
             '& .MuiTabs-flexContainer': {
               borderBottom: `1px solid ${ColorTokens.border.primary}`,
+              backgroundColor: ColorTokens.surface.paperBackground,
+              borderRadius: '8px 8px 0px 0px',
             },
           },
           indicator: {