@campxdev/campx-web-utils 1.3.7 → 2.0.0-alpha.1

package/src/components/ActivityLog.tsx

@@ -1,96 +0,0 @@
-import { ActivityLogView } from '@campxdev/react-blueprint';
-import { Store } from 'pullstate';
-import { useEffect, useState } from 'react';
-import { useInfiniteQuery } from 'react-query';
-import { axios } from '../config/axios';
-
-function formatDate(date: Date): string {
-  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-}
-
-export type ActivityLogType = {
-  activitiesData: any[];
-  lastTimestamp: number | null;
-};
-
-export type ActivityLogStoreType = {
-  [logType: string]: ActivityLogType;
-};
-
-export const ActivityLogStore = new Store<ActivityLogStoreType>({});
-
-export default function ActivityLog({
-  apiEndpoint,
-  params,
-}: {
-  apiEndpoint: string;
-  params: Record<string, any>;
-}) {
-  const [fromDate, setFromDate] = useState<Date | null>(null);
-  const [toDate, setToDate] = useState<Date | null>(null);
-
-  const { activitiesData } = ActivityLogStore.useState(
-    (s) => s[params.logType] || { activitiesData: [], lastTimestamp: null },
-  );
-
-  const fetchActivities = async ({ pageParam = null }) => {
-    const response = await axios.get(apiEndpoint, {
-      params: {
-        ...params,
-        lastTimestamp: pageParam,
-        ...(fromDate && { fromDate: formatDate(fromDate) }),
-        ...(toDate && { toDate: formatDate(toDate) }),
-      },
-    });
-    return response.data;
-  };
-
-  const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
-    useInfiniteQuery(
-      ['activities', params.logType, fromDate, toDate],
-      fetchActivities,
-      {
-        getNextPageParam: (lastPage) =>
-          lastPage?.length
-            ? new Date(lastPage[lastPage.length - 1]?.timestamp).getTime()
-            : null,
-        onSuccess: (data) => {
-          ActivityLogStore.update((s) => {
-            const currentData = s[params.logType] || {
-              activitiesData: [],
-              lastTimestamp: null,
-            };
-            currentData.activitiesData = data.pages.flatMap(
-              (page) => page ?? [],
-            );
-            currentData.lastTimestamp = data.pages[data.pages.length - 1]
-              ?.timestamp
-              ? new Date(data.pages[data.pages.length - 1].timestamp).getTime()
-              : null;
-            s[params.logType] = currentData;
-          });
-        },
-        enabled: activitiesData.length === 0 || !!fromDate || !!toDate,
-      },
-    );
-
-  useEffect(() => {
-    if (fromDate || toDate) {
-      fetchNextPage();
-    }
-  }, [fromDate, toDate, fetchNextPage]);
-
-  return (
-    <ActivityLogView
-      activitiesData={activitiesData}
-      isFetchingNextPage={isFetchingNextPage}
-      fetchNextPage={fetchNextPage}
-      hasNextPage={hasNextPage}
-      fromDate={fromDate}
-      toDate={toDate}
-      isLoading={isLoading}
-      setFromDate={setFromDate}
-      setToDate={setToDate}
-    />
-  );
-}

package/src/components/ChangePassword.tsx

@@ -1,183 +0,0 @@
-import {
-  CircularProgress,
-  IconButton,
-  InputAdornment,
-  MenuItem,
-  Stack,
-  styled,
-} from '@mui/material';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-
-import {
-  Button,
-  DialogButton,
-  FormControlWrapper,
-  TextField,
-} from '@campxdev/react-blueprint';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
-import { toast } from 'react-toastify';
-import { axios } from '../config/axios';
-import { isDevelopment } from '../utils/constants';
-
-interface PasswordVisibilityState {
-  oldPassword: boolean;
-  newPassword: boolean;
-  confirmPassword: boolean;
-}
-
-interface FormData {
-  oldPassword: string;
-  newPassword: string;
-  confirmPassword: string;
-}
-
-interface Field {
-  label: string;
-  name: keyof PasswordVisibilityState;
-}
-
-interface ChangePasswordProps {
-  close: () => void;
-}
-
-export const StyledMenuItem = styled(MenuItem)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '5px',
-  '& .MuiListItemIcon-root': {
-    minWidth: '24px',
-  },
-  '& .MuiSvgIcon-root': {
-    height: '14px',
-    width: '14px',
-  },
-}));
-
-export function ChangePassword({ close }: ChangePasswordProps) {
-  const [showPassword, setShowPassword] = useState<PasswordVisibilityState>({
-    oldPassword: false,
-    newPassword: false,
-    confirmPassword: false,
-  });
-  const [isLoading, setIsLoading] = useState(false);
-
-  const { handleSubmit, control, reset } = useForm<FormData>();
-
-  const onSubmit = async (formData: any) => {
-    setIsLoading(true);
-    const { oldPassword, newPassword, confirmPassword } = formData;
-    if (newPassword === confirmPassword) {
-      try {
-        await axios.post(
-          isDevelopment
-            ? 'https://api.campx.dev/auth-server/auth/change-password'
-            : 'https://api.campx.in/auth-server/auth/change-password',
-          {
-            oldPassword,
-            newPassword,
-          },
-        );
-        toast.success('Password Changed Successfully');
-        setIsLoading(false);
-        reset();
-        close();
-      } catch (error) {
-        console.log(error, 'this is error');
-        // axiosErrorToast(error);
-        setIsLoading(false);
-      }
-    } else {
-      toast.error('New Password, Confirm Password must be same');
-      setIsLoading(false);
-    }
-  };
-
-  const fields: Field[] = [
-    { label: 'Old Password', name: 'oldPassword' },
-    { label: 'New Password', name: 'newPassword' },
-    { label: 'Confirm Password', name: 'confirmPassword' },
-  ];
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <FormControlWrapper control={control}>
-        <Stack gap={1} direction="column">
-          {fields.map((item) => {
-            return (
-              <>
-                <TextField
-                  label={item.label}
-                  name={item.name}
-                  type={showPassword[item.name] ? 'text' : 'password'}
-                  required
-                  InputProps={{
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <IconButton
-                          size="small"
-                          onClick={() =>
-                            setShowPassword((prev: any) => ({
-                              ...prev,
-                              [item.name]: !prev[item.name],
-                            }))
-                          }
-                          edge="end"
-                        >
-                          {showPassword[item.name] ? (
-                            <Visibility />
-                          ) : (
-                            <VisibilityOff />
-                          )}
-                        </IconButton>
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              </>
-            );
-          })}
-
-          <Stack direction={'row'} gap={2} sx={{ marginTop: '15px' }}>
-            <Button variant="outlined" onClick={close}>
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              variant="contained"
-              endIcon={
-                isLoading && (
-                  <CircularProgress
-                    style={{ color: 'white' }}
-                    size="30px"
-                    thickness={1.7}
-                  />
-                )
-              }
-            >
-              Submit
-            </Button>
-          </Stack>
-        </Stack>
-      </FormControlWrapper>
-    </form>
-  );
-}
-
-export const ChangePasswordDialog: React.FC = () => (
-  <>
-    <DialogButton
-      anchor={({ open }) => (
-        <StyledMenuItem
-          onClick={() => {
-            open();
-          }}
-        >
-          Change Password
-        </StyledMenuItem>
-      )}
-      content={({ close }) => <ChangePassword close={close} />}
-      title="Change Password"
-    />
-  </>
-);

package/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

package/src/layout/AppLayout/AppLayout.tsx

@@ -1,155 +0,0 @@
-import {
-  AppHeader,
-  Sidebar,
-  SideMenuItemProps,
-  Spinner,
-} from '@campxdev/react-blueprint';
-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 { HelpDocs } from './components/HelpDocs';
-
-type Props = {
-  actions?: ReactNode[];
-  profileActions?: ReactNode[];
-  children?: ReactNode;
-  menu: SideMenuItemProps[];
-  mainContainerSx?: any;
-  handleLogout?: any;
-  userName?: string;
-  designation?: string;
-  clientName?: string;
-  institutionData?: any[];
-  defaultCollapsed?: boolean;
-  helpDocsConfig?: Record<
-    string,
-    { actions: { name: string; onClick: () => void }[] }
-  >;
-};
-
-export const AppLayout: React.FC<Props> = ({
-  actions = [],
-  profileActions = [],
-  children,
-  institutionData = [],
-  menu,
-  mainContainerSx,
-  handleLogout,
-  userName = '',
-  designation = '',
-  clientName = '',
-  defaultCollapsed = true,
-  helpDocsConfig,
-}) => {
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
-
-  function logout() {
-    axios
-      .post('/auth-server/auth/logout')
-      .then((res) => {
-        Cookies.remove('campx_tenant');
-        Cookies.remove('campx_session_key');
-        Cookies.remove('campx_institution');
-        window.location.href = '/';
-      })
-      .catch((err) => {
-        // toast("Unable To Logout.");
-      });
-  }
-
-  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} />
-      <motion.div
-        animate={{
-          width: collapsed ? 'calc(100% - 84px)' : 'calc(100% - 278px)',
-        }}
-        transition={{ duration: 0.3, ease: 'circOut' }}
-        style={{
-          margin: '12px 12px 12px 0px',
-          width: isSmallScreen ? '100%' : 'calc(100% - 84px)',
-          display: isSmallScreen ? 'contents' : 'block',
-        }}
-      >
-        <AppHeader
-          clientName={clientName}
-          userFullName={userName}
-          designation={designation}
-          actions={actions}
-          profileActions={[<ChangePasswordDialog />, ...profileActions]}
-          collapsed={collapsed}
-          showActiveDevices={false}
-          onLogoutClick={handleLogout ?? logout}
-          institutionsData={institutionData}
-          {...(isSmallScreen && {
-            profileSx: { width: 32, height: 32, fontSize: '12px' },
-          })}
-        />
-        {helpDocsConfig && helpDocsActions.length > 0 && (
-          <HelpDocs actions={helpDocsActions} />
-        )}
-
-        <OutletContainer
-          sx={{
-            margin: '12px 0px 0px 0px',
-            backgroundColor: theme.palette.surface.paperBackground,
-            ...mainContainerSx,
-          }}
-          onClick={() => {
-            setCollapsed(true);
-          }}
-        >
-          <Suspense fallback={<Spinner />}>
-            <ErrorBoundary>{children}</ErrorBoundary>
-          </Suspense>
-        </OutletContainer>
-      </motion.div>
-    </AppLayoutContainer>
-  );
-};
-
-const AppLayoutContainer = styled(Stack)(({ theme }: { theme?: any }) => ({
-  flexDirection: 'row',
-  backgroundColor: theme.palette.surface.defaultBackground,
-
-  [theme.breakpoints.down('md')]: { flexWrap: 'wrap' },
-}));
-
-const OutletContainer = styled(Box)(({ theme }: { theme?: any }) => ({
-  borderRadius: '8px',
-  height: 'calc(100vh - 96px)',
-  overflowY: 'scroll',
-  width: '100%',
-
-  '&::-webkit-scrollbar': {
-    width: '0.5em',
-    height: '0.2em',
-    backgroundColor: theme.palette.surface.defaultBackground,
-  },
-
-  '&::-webkit-scrollbar-thumb': {
-    backgroundColor: theme.palette.primary.light,
-    borderRadius: '3px',
-
-    '&:hover': { backgroundColor: theme.palette.primary.main },
-  },
-
-  [theme.breakpoints.down('md')]: {
-    margin: '0px 12px 12px 12px',
-    height: 'calc(100vh - 118px)',
-
-    '&::-webkit-scrollbar': { display: 'none' },
-  },
-}));

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

@@ -1,121 +0,0 @@
-import { Icons } from '@campxdev/react-blueprint';
-import { Backdrop, 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[];
-}
-
-export 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,
-      }}
-    >
-      <Backdrop open={open} />
-      <SpeedDial
-        ariaLabel="Custom Help Docs"
-        sx={{
-          position: 'absolute',
-          bottom: 0,
-          right: 40,
-          display: 'flex',
-          alignItems: 'flex-end',
-          '& .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,
-            },
-          },
-          '& .MuiSpeedDialAction-fab': {
-            margin: '0 0 16px 0',
-            '&:not(:last-child)': {
-              marginBottom: '8px',
-            },
-          },
-        }}
-        icon={<Icons.HelpDocsIcon size={20} />}
-        onClose={handleClose}
-        onOpen={handleOpen}
-        open={open}
-        direction="up"
-      >
-        {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>
-  );
-};