@campxdev/campx-web-utils 1.1.9 → 1.2.0

package/dist/index.d.ts

@@ -5,7 +5,6 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 import * as _mui_material from '@mui/material';
-import { SxProps } from '@mui/material';
 import * as _axios from 'axios';
 import { Severity, ConfirmDialogType, SideMenuItemProps, SingleSelectProps } from '@campxdev/react-blueprint';
 import { Store } from 'pullstate';
@@ -147,155 +146,6 @@ type Props = {
 };
 declare const AppLayout: React.FC<Props>;
 
-/**
- * AppLayoutV2 - An improved layout component for application pages
- *
- * @example Basic usage with menu-based sidebar:
- * ```tsx
- * function MyApp() {
- *   const [collapsed, setCollapsed] = useState(false);
- *   const menuItems = [
- *     { label: 'Dashboard', path: '/dashboard', icon: <DashboardIcon /> },
- *     { label: 'Users', path: '/users', icon: <UsersIcon /> },
- *   ];
- *
- *   return (
- *     <AppLayoutV2
- *       userFullName="John Doe"
- *       designation="Software Engineer"
- *       collapsed={collapsed}
- *       onToggleSidebar={() => setCollapsed(!collapsed)}
- *       menu={menuItems}
- *       headerActions={[<Button key="add">Add New</Button>]}
- *       profileActions={[<MenuItem key="settings">Settings</MenuItem>]}
- *       institutionsData={institutions}
- *       onLogoutClick={handleLogout}
- *     >
- *       <YourPageContent />
- *     </AppLayoutV2>
- *   );
- * }
- * ```
- *
- * @example With custom sidebar and breadcrumbs:
- * ```tsx
- * function MyAppWithCustomSidebar() {
- *   const [collapsed, setCollapsed] = useState(false);
- *
- *   const customSidebar = (
- *     <div style={{ padding: '16px' }}>
- *       <nav>
- *         <ul>
- *           <li><Link to="/dashboard">Dashboard</Link></li>
- *           <li><Link to="/reports">Reports</Link></li>
- *         </ul>
- *       </nav>
- *     </div>
- *   );
- *
- *   const breadcrumbs = (
- *     <Breadcrumbs aria-label="breadcrumb">
- *       <Link to="/">Home</Link>
- *       <Link to="/dashboard">Dashboard</Link>
- *       <Typography color="textPrimary">Current Page</Typography>
- *     </Breadcrumbs>
- *   );
- *
- *   return (
- *     <AppLayoutV2
- *       userFullName="Jane Smith"
- *       designation="Project Manager"
- *       collapsed={collapsed}
- *       onToggleSidebar={() => setCollapsed(!collapsed)}
- *       sidebar={customSidebar}
- *       breadcrumbs={breadcrumbs}
- *       headerActions={[
- *         <IconButton key="notifications"><NotificationsIcon /></IconButton>,
- *         <Button key="export">Export</Button>
- *       ]}
- *       showActiveDevices={true}
- *       clientName="My Company"
- *       headerSx={{ backgroundColor: 'primary.light' }}
- *       onLogoutClick={handleLogout}
- *     >
- *       <Dashboard />
- *     </AppLayoutV2>
- *   );
- * }
- * ```
- *
- * @example Minimal usage (no sidebar):
- * ```tsx
- * function SimpleLayout() {
- *   return (
- *     <AppLayoutV2
- *       userFullName="Admin User"
- *       collapsed={false} // This won't matter since no sidebar
- *       onLogoutClick={() => console.log('Logout')}
- *     >
- *       <SimplePageContent />
- *     </AppLayoutV2>
- *   );
- * }
- * ```
- */
-
-interface AppLayoutV2Props {
-    /** Main content to be rendered in the layout */
-    children: ReactNode;
-    /** Optional sidebar content */
-    sidebar?: ReactNode;
-    /** Actions to be displayed in the header */
-    headerActions?: ReactNode[];
-    /** Actions for the user profile dropdown */
-    profileActions?: ReactNode[];
-    /** User's full name */
-    userFullName: string;
-    /** User's designation/title */
-    designation?: string;
-    /** Whether the sidebar is collapsed */
-    collapsed: boolean;
-    /** Callback to toggle sidebar state */
-    onToggleSidebar?: () => void;
-    /** Breadcrumbs component */
-    breadcrumbs?: ReactNode;
-    /** Institution data for multi-tenant scenarios */
-    institutionsData?: any[];
-    /** Custom styling for the profile component */
-    profileSx?: SxProps;
-    /** Logout click handler */
-    onLogoutClick?: () => void;
-    /** Whether to show active devices option */
-    showActiveDevices?: boolean;
-    /** Custom styling for the header */
-    headerSx?: SxProps;
-    /** Custom styling for the main content container */
-    mainContainerSx?: SxProps;
-    /** Client/organization name */
-    clientName?: string;
-    /** Menu items for sidebar (only used when sidebar prop is not provided) */
-    menu?: SideMenuItemProps[];
-    /** Help documentation configuration */
-    helpDocsConfig?: Record<string, {
-        actions: {
-            name: string;
-            onClick: () => void;
-        }[];
-    }>;
-}
-/**
- * AppLayoutV2 - A flexible and responsive layout component for application pages.
- *
- * This component provides a modern layout structure with:
- * - Responsive header using AppHeader
- * - Optional collapsible sidebar
- * - Flexible main content area
- * - Mobile-responsive design
- * - Error boundaries and loading states
- * - Help documentation support
- */
-declare const AppLayoutV2: React.FC<AppLayoutV2Props>;
-
 interface HelpDocsActionType {
     name: string;
     onClick?: () => void;
@@ -343,5 +193,5 @@ declare const workspace: string;
 
 declare const openInNewTab: (pathAfterBase: string) => void;
 
-export { AppLayout, AppLayoutV2, ApplicationStore, BatchSelector, ChangePassword, ChangePasswordDialog, ConfirmDialogProvider, CourseSelector, DepartmentSelector, EmployeesSelector, ErrorBoundary, FeeTypeSelector, HelpDocs, HostelBlocksSelector, HostelFloorSelector, HostelRoomSelector, PrintFormatSelector, ProgramSelector, Providers, RegulationSelector, SemesterSelector, SnackbarProvider, StyledMenuItem, YearRangeSelector, axios, initialApplicationState, institutionCode, isDevelopment, openInNewTab, tenantCode, useConfirm, workspace };
-export type { AppLayoutV2Props, ApplicationStoreType, ErrorBoundaryProps };
+export { AppLayout, ApplicationStore, BatchSelector, ChangePassword, ChangePasswordDialog, ConfirmDialogProvider, CourseSelector, DepartmentSelector, EmployeesSelector, ErrorBoundary, FeeTypeSelector, HelpDocs, HostelBlocksSelector, HostelFloorSelector, HostelRoomSelector, PrintFormatSelector, ProgramSelector, Providers, RegulationSelector, SemesterSelector, SnackbarProvider, StyledMenuItem, YearRangeSelector, axios, initialApplicationState, institutionCode, isDevelopment, openInNewTab, tenantCode, useConfirm, workspace };
+export type { ApplicationStoreType, ErrorBoundaryProps };

package/export.ts

@@ -0,0 +1,9 @@
+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/AppLayout';
+export * from './src/layout/AppLayout/components/HelpDocs';
+export * from './src/selectors/export';
+export * from './src/utils/constants';
+export * from './src/utils/functions';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "author": "CampX",
   "license": "MIT",
   "keywords": [
@@ -14,11 +14,13 @@
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "export.ts"
   ],
   "private": false,
   "peerDependencies": {
-    "@campxdev/react-blueprint": "2.1.5",
+    "@campxdev/react-blueprint": "2.2.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.0.2",
@@ -29,7 +31,7 @@
     "react-router-dom": "^6.24.0"
   },
   "dependencies": {
-    "@campxdev/react-blueprint": "2.1.4",
+    "@campxdev/react-blueprint": "2.2.0",
     "@hookform/resolvers": "^2.9.10",
     "@mui/x-date-pickers": "^8.1.0",
     "axios": "^1.7.2",
@@ -93,6 +95,7 @@
     "test": "craco test",
     "eject": "react-scripts eject",
     "build": "rollup -c --bundleConfigAsCjs",
+    "yalc:dev": "cp package.json package.json.backup && node -e \"const fs=require('fs'); const pkg=JSON.parse(fs.readFileSync('./package.json')); pkg.main='export.ts'; pkg.module='export.ts'; pkg.types='export.ts'; pkg.exports={'.':'./export.ts'}; delete pkg.scripts.prepare; fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2));\" && yalc publish --push --sig --no-scripts && mv package.json.backup package.json",
     "prepare": "npm run build"
   },
   "eslintConfig": {

package/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/App.tsx

@@ -0,0 +1,16 @@
+import { useRoutes } from 'react-router-dom';
+
+import { Providers } from './context/export';
+import { mainRoutes } from './routes/main';
+
+export default function App() {
+  return (
+    <Providers>
+      <AppRouter />
+    </Providers>
+  );
+}
+const AppRouter = () => {
+  const app = useRoutes(mainRoutes);
+  return app;
+};

package/src/AppContent.tsx

@@ -0,0 +1,19 @@
+import { Breadcrumbs, Icons, TextField } from '@campxdev/react-blueprint';
+import { useState } from 'react';
+import { CourseSelector } from './selectors/CourseSelector';
+
+function AppContent() {
+  const [value, setValue] = useState('63b810ee995d6d64f4a248de');
+
+  return (
+    <>
+      <Breadcrumbs pathTrimCount={0} />
+      <TextField label="habdkhabs" />
+      <Icons.AppsIcon />
+
+      <CourseSelector onChange={() => {}} />
+    </>
+  );
+}
+
+export default AppContent;

package/src/components/ActivityLog.tsx

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,183 @@
+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"
+    />
+  </>
+);