@campxdev/campx-web-utils 0.5.2 → 0.5.3

package/export.ts

@@ -2,6 +2,6 @@ export * from './src/components/ChangePassword';
 export * from './src/config/axios';
 export * from './src/context/export';
 export * from './src/hooks/export';
-export * from './src/layout/AppLayout';
+export * from './src/layout/AppLayout/AppLayout';
 export * from './src/selectors/export';
 export * from './src/utils/constants';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "main": "./export.ts",
   "private": false,
   "peerDependencies": {
-    "@campxdev/react-blueprint": ">=1.8.3",
+    "@campxdev/react-blueprint": ">=1.8.9",
     "@emotion/react": ">=^11.13.3",
     "@emotion/styled": ">=^11.13.0",
     "@mui/icons-material": ">=6.1.5",
@@ -14,7 +14,7 @@
     "react-redux": "=>9.1.2"
   },
   "dependencies": {
-    "@campxdev/react-blueprint": "1.8.3",
+    "@campxdev/react-blueprint": "1.8.9",
     "@hookform/resolvers": "^3.9.0",
     "@mui/x-date-pickers": "^7.22.1",
     "axios": "^1.7.2",

package/src/layout/{AppLayout.tsx → AppLayout/AppLayout.tsx}

@@ -4,9 +4,11 @@ import { Box, Stack, styled, useMediaQuery, useTheme } from '@mui/material';
 import { motion } from 'framer-motion';
 import Cookies from 'js-cookie';
 import { ReactNode, Suspense, useState } from 'react';
-import { ChangePasswordDialog } from '../components/ChangePassword';
-import { axios } from '../config/axios';
-import { ErrorBoundary } from '../context/export';
+import { ChangePasswordDialog } from '../../components/ChangePassword';
+import { axios } from '../../config/axios';
+import { ErrorBoundary } from '../../context/export';
+import HelpDocs from './components/HelpDocs';
+import { helpDocsConfig } from './components/helpDocsConfig';
 
 type Props = {
   actions?: ReactNode[];
@@ -51,6 +53,12 @@ export const AppLayout: React.FC<Props> = ({
       });
   }
 
+  const fullPath = window.location.pathname;
+  const pathSegments = fullPath.split('/').filter(Boolean);
+  const actualPath = pathSegments.slice(1).join('/');
+  const normalizedPath = actualPath.replace(/\/\d+/g, '/:id');
+  const helpDocsActions = helpDocsConfig[`/${normalizedPath}`]?.actions || [];
+
   return (
     <AppLayoutContainer>
       <Sidebar menu={menu} collapsed={collapsed} setCollapsed={setCollapsed} />
@@ -79,6 +87,7 @@ export const AppLayout: React.FC<Props> = ({
             profileSx: { width: 32, height: 32, fontSize: '12px' },
           })}
         />
+        {helpDocsActions.length > 0 && <HelpDocs actions={helpDocsActions} />}
         <OuletContainer
           sx={{
             // backgroundColor: theme.palette.surface.paperBackground,
@@ -102,9 +111,7 @@ const AppLayoutContainer = styled(Stack)(({ theme }: { theme?: any }) => ({
   flexDirection: 'row',
   backgroundColor: theme.palette.surface.defaultBackground,
 
-  [theme.breakpoints.down('md')]: {
-    flexWrap: 'wrap',
-  },
+  [theme.breakpoints.down('md')]: { flexWrap: 'wrap' },
 }));
 
 const OuletContainer = styled(Box)(({ theme }: { theme?: any }) => ({
@@ -113,26 +120,19 @@ const OuletContainer = styled(Box)(({ theme }: { theme?: any }) => ({
   overflowY: 'scroll',
   width: '100%',
 
-  '&::-webkit-scrollbar': {
-    width: '0.5em',
-    height: '0.2em',
-  },
+  '&::-webkit-scrollbar': { width: '0.5em', height: '0.2em' },
 
   '&::-webkit-scrollbar-thumb': {
     backgroundColor: theme.palette.primary.light,
     borderRadius: '3px',
 
-    '&:hover': {
-      backgroundColor: theme.palette.primary.main,
-    },
+    '&:hover': { backgroundColor: theme.palette.primary.main },
   },
 
   [theme.breakpoints.down('md')]: {
     margin: '0px 12px 12px 12px',
     height: 'calc(100vh - 118px)',
 
-    '&::-webkit-scrollbar': {
-      display: 'none',
-    },
+    '&::-webkit-scrollbar': { display: 'none' },
   },
 }));

package/src/layout/AppLayout/components/HelpDocs.tsx

@@ -0,0 +1,114 @@
+import { Icons } from '@campxdev/react-blueprint';
+import { useTheme } from '@mui/material';
+import Box from '@mui/material/Box';
+import SpeedDial from '@mui/material/SpeedDial';
+import SpeedDialAction from '@mui/material/SpeedDialAction';
+import * as React from 'react';
+
+interface HelpDocsActionType {
+  name: string;
+  onClick?: () => void;
+  backgroundColor?: string;
+}
+
+interface HelpDocsProps {
+  actions: HelpDocsActionType[];
+}
+
+const HelpDocs: React.FC<HelpDocsProps> = ({ actions }) => {
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        bottom: 26,
+        right: 0,
+        zIndex: 1000,
+      }}
+    >
+      <SpeedDial
+        ariaLabel="Custom Help Docs"
+        sx={{
+          position: 'absolute',
+          bottom: 6,
+          right: 42,
+          '& .MuiFab-primary': {
+            backgroundColor: theme.palette.highlight.highlightBlue,
+            borderRadius: '8px',
+            width: '50px',
+            height: '50px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            '&:hover': {
+              backgroundColor: theme.palette.highlight.highlightBlue,
+            },
+          },
+        }}
+        icon={<Icons.HelpDocsIcon size={20} />}
+        onClose={handleClose}
+        onOpen={handleOpen}
+        open={open}
+        direction="left"
+      >
+        {actions.map((action: HelpDocsActionType) => (
+          <SpeedDialAction
+            key={action.name}
+            onClick={() => {
+              action.onClick?.();
+              handleClose();
+            }}
+            icon={
+              <span
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: '100%',
+                  height: '100%',
+                  fontWeight: 'bold',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+              >
+                {action.name}
+              </span>
+            }
+            FabProps={{
+              sx: {
+                width: 'auto',
+                minWidth: '180px',
+                maxWidth: '280px',
+                padding: '8px 12px',
+                boxShadow: 'none',
+                height: '40px',
+                borderRadius: '8px',
+                backgroundColor: theme.palette.surface.defaultBackground,
+                color: theme.palette.text.primary,
+                fontWeight: 500,
+                fontFamily: 'Heebo',
+                fontSize: '12px',
+                whiteSpace: 'nowrap',
+                textAlign: 'right',
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+                '&:hover': {
+                  backgroundColor: theme.palette.surface.defaultBackground,
+                },
+              },
+            }}
+          />
+        ))}
+      </SpeedDial>
+    </Box>
+  );
+};
+
+export default HelpDocs;

package/src/layout/AppLayout/components/helpDocsConfig.ts

@@ -0,0 +1,89 @@
+export const helpDocsConfig: Record<
+  string,
+  { actions: { name: string; onClick: () => void }[] }
+> = {
+  '/payments/exam-fees': {
+    actions: [
+      {
+        name: 'Know how to collect exam fee',
+        onClick: () =>
+          window.open('https://docs.campx.in/Workflows/collect_fee/', '_blank'),
+      },
+    ],
+  },
+  '/payments/student-permissions': {
+    actions: [
+      {
+        name: 'Know how to manage permissions',
+        onClick: () =>
+          window.open('https://docs.campx.in/Workflows/collect_fee/', '_blank'),
+      },
+    ],
+  },
+  '/exams/blocked-students': {
+    actions: [
+      {
+        name: 'Know how to block students',
+        onClick: () =>
+          window.open('https://docs.campx.in/Workflows/collect_fee/', '_blank'),
+      },
+    ],
+  },
+  '/ums/settings/assessments/assessment-types': {
+    actions: [
+      {
+        name: 'Know how to setup Assessment rules',
+        onClick: () =>
+          window.open(
+            'https://docs.campx.in/Workflows/assessment_rules/',
+            '_blank',
+          ),
+      },
+    ],
+  },
+  '/ums/settings/assessments/assessment-templates': {
+    actions: [
+      {
+        name: 'Know how to setup Assessment rules',
+        onClick: () =>
+          window.open(
+            'https://docs.campx.in/Workflows/assessment_rules/',
+            '_blank',
+          ),
+      },
+    ],
+  },
+  '/ums/classrooms/:id/timetable': {
+    actions: [
+      {
+        name: 'Know how to suspend a class',
+        onClick: () =>
+          window.open(
+            'https://docs.campx.in/Workflows/suspending-a-class/',
+            '_blank',
+          ),
+      },
+    ],
+  },
+
+  '/exams/examinations/:id/bundle-subjects': {
+    actions: [
+      {
+        name: 'Learn about Scanning & Bundling',
+        onClick: () =>
+          window.open(
+            'https://docs.campx.in/Workflows/scanningbundling_booklets/',
+            '_blank',
+          ),
+      },
+      {
+        name: 'Know how to upload digital booklets',
+        onClick: () =>
+          window.open(
+            'https://docs.campx.in/Workflows/digital_booklets/',
+            '_blank',
+          ),
+      },
+    ],
+  },
+};

package/src/routes/main.tsx

@@ -1,7 +1,7 @@
 import { Icons } from '@campxdev/react-blueprint';
 import { Navigate, Outlet } from 'react-router-dom';
 import AppContent from '../AppContent';
-import { AppLayout } from '../layout/AppLayout';
+import { AppLayout } from '../layout/AppLayout/AppLayout';
 
 export const mainRoutes = [
   {
@@ -20,14 +20,8 @@ export const mainRoutes = [
       </AppLayout>
     ),
     children: [
-      {
-        index: true,
-        element: <Navigate to={'app-content'} />,
-      },
-      {
-        path: 'app-content',
-        element: <AppContent />,
-      },
+      { index: true, element: <Navigate to={'app-content'} /> },
+      { path: 'app-content', element: <AppContent /> },
     ],
   },
 ];