@campxdev/campx-web-utils 1.1.9 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/esm/index.js +1 -1
  3. package/dist/index.d.ts +2 -152
  4. package/export.ts +9 -0
  5. package/package.json +7 -4
  6. package/src/App.css +38 -0
  7. package/src/App.tsx +16 -0
  8. package/src/AppContent.tsx +19 -0
  9. package/src/components/ActivityLog.tsx +96 -0
  10. package/src/components/ChangePassword.tsx +183 -0
  11. package/src/config/axios.ts +146 -0
  12. package/src/context/ConfirmDialogProvider.tsx +78 -0
  13. package/src/context/ErrorBoundary/ErrorBoundary.tsx +131 -0
  14. package/src/context/ErrorBoundary/Login.tsx +206 -0
  15. package/src/context/Providers.tsx +76 -0
  16. package/src/context/SnackbarProvider.tsx +42 -0
  17. package/src/context/application-store.ts +86 -0
  18. package/src/context/export.ts +5 -0
  19. package/src/hooks/export.ts +1 -0
  20. package/src/hooks/useConfirm.ts +57 -0
  21. package/src/index.css +13 -0
  22. package/src/index.tsx +19 -0
  23. package/src/layout/AppLayout/AppLayout.tsx +155 -0
  24. package/src/layout/AppLayout/components/HelpDocs.tsx +121 -0
  25. package/src/logo.svg +1 -0
  26. package/src/react-app-env.d.ts +1 -0
  27. package/src/reportWebVitals.ts +15 -0
  28. package/src/routes/main.tsx +32 -0
  29. package/src/selectors/BatchSelector.tsx +15 -0
  30. package/src/selectors/CourseSelector.tsx +16 -0
  31. package/src/selectors/DepartmentSelector.tsx +19 -0
  32. package/src/selectors/EmployeesSelector.tsx +20 -0
  33. package/src/selectors/FeeTypeSelector.tsx +15 -0
  34. package/src/selectors/HostelBlocksSelector.tsx +19 -0
  35. package/src/selectors/HostelFloorSelector.tsx +19 -0
  36. package/src/selectors/HostelRoomSelector.tsx +20 -0
  37. package/src/selectors/PrintFormatSelector.tsx +17 -0
  38. package/src/selectors/ProgramSelector.tsx +16 -0
  39. package/src/selectors/RegulationSelector.tsx +19 -0
  40. package/src/selectors/SemesterSelector.tsx +16 -0
  41. package/src/selectors/YearRangeSelector.tsx +26 -0
  42. package/src/selectors/export.ts +13 -0
  43. package/src/selectors/utils.tsx +39 -0
  44. package/src/setupTests.ts +5 -0
  45. package/src/utils/constants.ts +7 -0
  46. package/src/utils/functions.tsx +11 -0
  47. package/dist/cjs/types/src/layout/AppLayout/AppLayoutV2.d.ts +0 -150
  48. package/dist/esm/types/src/layout/AppLayout/AppLayoutV2.d.ts +0 -150
@@ -0,0 +1,17 @@
1
+ import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
2
+ import { axios } from '../config/axios';
3
+
4
+ export const PrintFormatSelector = (props: SingleSelectProps) => {
5
+ return (
6
+ <SingleSelect
7
+ dbLabelProps={{
8
+ labelKey: 'name',
9
+ subLabelKey: 'type',
10
+ useSubLabelStartCase: true,
11
+ }}
12
+ {...props}
13
+ externalAxios={axios}
14
+ optionsApiEndPoint="/dropdowns/print-formats"
15
+ />
16
+ );
17
+ };
@@ -0,0 +1,16 @@
1
+ import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
2
+ import { axios } from '../config/axios';
3
+
4
+ export const ProgramSelector = (props: SingleSelectProps) => {
5
+ return (
6
+ <SingleSelect
7
+ dbLabelProps={{
8
+ labelKey: 'branchCode',
9
+ subLabelKey: 'branchDisplay',
10
+ }}
11
+ {...props}
12
+ externalAxios={axios}
13
+ optionsApiEndPoint="/dropdowns/programs"
14
+ />
15
+ );
16
+ };
@@ -0,0 +1,19 @@
1
+ import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
2
+ import { axios } from '../config/axios';
3
+
4
+ export const RegulationSelector = (props: SingleSelectProps) => {
5
+ return (
6
+ <SingleSelect
7
+ label="Regulation"
8
+ dbValueProps={{
9
+ valueKey: 'regulation_id',
10
+ }}
11
+ dbLabelProps={{
12
+ labelKey: 'r.name',
13
+ }}
14
+ {...props}
15
+ optionsApiEndPoint="dropdowns/regulations"
16
+ externalAxios={axios}
17
+ />
18
+ );
19
+ };
@@ -0,0 +1,16 @@
1
+ import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
2
+ import { axios } from '../config/axios';
3
+
4
+ export const SemesterSelector = (props: SingleSelectProps) => {
5
+ return (
6
+ <SingleSelect
7
+ dbLabelProps={{
8
+ labelKey: 'name',
9
+ subLabelKey: 'year',
10
+ }}
11
+ {...props}
12
+ optionsApiEndPoint="/dropdowns/semesters"
13
+ externalAxios={axios}
14
+ />
15
+ );
16
+ };
@@ -0,0 +1,26 @@
1
+ import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
2
+ import { years } from './utils';
3
+
4
+ interface YearRangeSelectorProps extends SingleSelectProps {
5
+ suffix?: string | null;
6
+ valueKey?: 'yearRange' | 'year';
7
+ }
8
+
9
+ export const YearRangeSelector = ({
10
+ suffix = null,
11
+ valueKey = 'yearRange',
12
+ ...props
13
+ }: YearRangeSelectorProps) => {
14
+ return (
15
+ <SingleSelect
16
+ label="Year Range"
17
+ options={years?.map((year: number) => ({
18
+ label: suffix
19
+ ? `${suffix} ${year} - ${year + 1}`
20
+ : `${year} - ${year + 1}`,
21
+ value: valueKey === 'yearRange' ? `${year} - ${year + 1}` : year,
22
+ }))}
23
+ {...props}
24
+ />
25
+ );
26
+ };
@@ -0,0 +1,13 @@
1
+ export * from './BatchSelector';
2
+ export * from './CourseSelector';
3
+ export * from './DepartmentSelector';
4
+ export * from './EmployeesSelector';
5
+ export * from './FeeTypeSelector';
6
+ export * from './HostelBlocksSelector';
7
+ export * from './HostelFloorSelector';
8
+ export * from './HostelRoomSelector';
9
+ export * from './PrintFormatSelector';
10
+ export * from './ProgramSelector';
11
+ export * from './RegulationSelector';
12
+ export * from './SemesterSelector';
13
+ export * from './YearRangeSelector';
@@ -0,0 +1,39 @@
1
+ export const FeeTypes: {
2
+ label: string;
3
+ value: string;
4
+ }[] = [
5
+ {
6
+ label: 'Tuition Fee',
7
+ value: 'tuition_fee',
8
+ },
9
+
10
+ {
11
+ label: 'Admission Fee',
12
+ value: 'admission_fee',
13
+ },
14
+ {
15
+ label: 'Hostel Fee',
16
+ value: 'hostel_fee',
17
+ },
18
+ {
19
+ label: 'Transport Fee',
20
+ value: 'transport_fee',
21
+ },
22
+ {
23
+ label: 'Exam Fee',
24
+ value: 'exam_fee',
25
+ },
26
+ {
27
+ label: 'Other Fee',
28
+ value: 'other_fee',
29
+ },
30
+ ];
31
+
32
+ export const years = Array.from({ length: 6 }, (_, i) => {
33
+ return new Date().getFullYear() - i;
34
+ });
35
+
36
+ export const batchOptions = Array.from({ length: 12 }, (_, i) => ({
37
+ label: `${new Date().getFullYear() - i} - ${new Date().getFullYear() - i + 1}`,
38
+ value: `${new Date().getFullYear() - i} - ${new Date().getFullYear() - i + 1}`,
39
+ }));
@@ -0,0 +1,5 @@
1
+ // jest-dom adds custom jest matchers for asserting on DOM nodes.
2
+ // allows you to do things like:
3
+ // expect(element).toHaveTextContent(/react/i)
4
+ // learn more: https://github.com/testing-library/jest-dom
5
+ import '@testing-library/jest-dom';
@@ -0,0 +1,7 @@
1
+ export const isDevelopment = window.location.hostname.includes('localhost');
2
+
3
+ export const tenantCode = window.location.hostname.split('.')[0];
4
+
5
+ // if url searched is aupulse.campx.in then redirect to aupulse.campx.in/aupulse
6
+ export const institutionCode = window.location.pathname.split('/')[1];
7
+ export const workspace = window.location.pathname.split('/')[2];
@@ -0,0 +1,11 @@
1
+ export const openInNewTab = (pathAfterBase: string) => {
2
+ const currentPath = window.location.pathname;
3
+ const segments = currentPath.split('/');
4
+
5
+ // Get the dynamic basename (/aupulse/workspace)
6
+ const base = '/' + segments[1] + '/' + segments[2]; // careful with trailing slashes
7
+
8
+ // Construct full URL and open in new tab
9
+ const fullPath = `${window.location.origin}${base}/${pathAfterBase}`;
10
+ window.open(fullPath, '_blank');
11
+ };
@@ -1,150 +0,0 @@
1
- /**
2
- * AppLayoutV2 - An improved layout component for application pages
3
- *
4
- * @example Basic usage with menu-based sidebar:
5
- * ```tsx
6
- * function MyApp() {
7
- * const [collapsed, setCollapsed] = useState(false);
8
- * const menuItems = [
9
- * { label: 'Dashboard', path: '/dashboard', icon: <DashboardIcon /> },
10
- * { label: 'Users', path: '/users', icon: <UsersIcon /> },
11
- * ];
12
- *
13
- * return (
14
- * <AppLayoutV2
15
- * userFullName="John Doe"
16
- * designation="Software Engineer"
17
- * collapsed={collapsed}
18
- * onToggleSidebar={() => setCollapsed(!collapsed)}
19
- * menu={menuItems}
20
- * headerActions={[<Button key="add">Add New</Button>]}
21
- * profileActions={[<MenuItem key="settings">Settings</MenuItem>]}
22
- * institutionsData={institutions}
23
- * onLogoutClick={handleLogout}
24
- * >
25
- * <YourPageContent />
26
- * </AppLayoutV2>
27
- * );
28
- * }
29
- * ```
30
- *
31
- * @example With custom sidebar and breadcrumbs:
32
- * ```tsx
33
- * function MyAppWithCustomSidebar() {
34
- * const [collapsed, setCollapsed] = useState(false);
35
- *
36
- * const customSidebar = (
37
- * <div style={{ padding: '16px' }}>
38
- * <nav>
39
- * <ul>
40
- * <li><Link to="/dashboard">Dashboard</Link></li>
41
- * <li><Link to="/reports">Reports</Link></li>
42
- * </ul>
43
- * </nav>
44
- * </div>
45
- * );
46
- *
47
- * const breadcrumbs = (
48
- * <Breadcrumbs aria-label="breadcrumb">
49
- * <Link to="/">Home</Link>
50
- * <Link to="/dashboard">Dashboard</Link>
51
- * <Typography color="textPrimary">Current Page</Typography>
52
- * </Breadcrumbs>
53
- * );
54
- *
55
- * return (
56
- * <AppLayoutV2
57
- * userFullName="Jane Smith"
58
- * designation="Project Manager"
59
- * collapsed={collapsed}
60
- * onToggleSidebar={() => setCollapsed(!collapsed)}
61
- * sidebar={customSidebar}
62
- * breadcrumbs={breadcrumbs}
63
- * headerActions={[
64
- * <IconButton key="notifications"><NotificationsIcon /></IconButton>,
65
- * <Button key="export">Export</Button>
66
- * ]}
67
- * showActiveDevices={true}
68
- * clientName="My Company"
69
- * headerSx={{ backgroundColor: 'primary.light' }}
70
- * onLogoutClick={handleLogout}
71
- * >
72
- * <Dashboard />
73
- * </AppLayoutV2>
74
- * );
75
- * }
76
- * ```
77
- *
78
- * @example Minimal usage (no sidebar):
79
- * ```tsx
80
- * function SimpleLayout() {
81
- * return (
82
- * <AppLayoutV2
83
- * userFullName="Admin User"
84
- * collapsed={false} // This won't matter since no sidebar
85
- * onLogoutClick={() => console.log('Logout')}
86
- * >
87
- * <SimplePageContent />
88
- * </AppLayoutV2>
89
- * );
90
- * }
91
- * ```
92
- */
93
- import { SideMenuItemProps } from '@campxdev/react-blueprint';
94
- import { SxProps } from '@mui/material';
95
- import { ReactNode } from 'react';
96
- export interface AppLayoutV2Props {
97
- /** Main content to be rendered in the layout */
98
- children: ReactNode;
99
- /** Optional sidebar content */
100
- sidebar?: ReactNode;
101
- /** Actions to be displayed in the header */
102
- headerActions?: ReactNode[];
103
- /** Actions for the user profile dropdown */
104
- profileActions?: ReactNode[];
105
- /** User's full name */
106
- userFullName: string;
107
- /** User's designation/title */
108
- designation?: string;
109
- /** Whether the sidebar is collapsed */
110
- collapsed: boolean;
111
- /** Callback to toggle sidebar state */
112
- onToggleSidebar?: () => void;
113
- /** Breadcrumbs component */
114
- breadcrumbs?: ReactNode;
115
- /** Institution data for multi-tenant scenarios */
116
- institutionsData?: any[];
117
- /** Custom styling for the profile component */
118
- profileSx?: SxProps;
119
- /** Logout click handler */
120
- onLogoutClick?: () => void;
121
- /** Whether to show active devices option */
122
- showActiveDevices?: boolean;
123
- /** Custom styling for the header */
124
- headerSx?: SxProps;
125
- /** Custom styling for the main content container */
126
- mainContainerSx?: SxProps;
127
- /** Client/organization name */
128
- clientName?: string;
129
- /** Menu items for sidebar (only used when sidebar prop is not provided) */
130
- menu?: SideMenuItemProps[];
131
- /** Help documentation configuration */
132
- helpDocsConfig?: Record<string, {
133
- actions: {
134
- name: string;
135
- onClick: () => void;
136
- }[];
137
- }>;
138
- }
139
- /**
140
- * AppLayoutV2 - A flexible and responsive layout component for application pages.
141
- *
142
- * This component provides a modern layout structure with:
143
- * - Responsive header using AppHeader
144
- * - Optional collapsible sidebar
145
- * - Flexible main content area
146
- * - Mobile-responsive design
147
- * - Error boundaries and loading states
148
- * - Help documentation support
149
- */
150
- export declare const AppLayoutV2: React.FC<AppLayoutV2Props>;
@@ -1,150 +0,0 @@
1
- /**
2
- * AppLayoutV2 - An improved layout component for application pages
3
- *
4
- * @example Basic usage with menu-based sidebar:
5
- * ```tsx
6
- * function MyApp() {
7
- * const [collapsed, setCollapsed] = useState(false);
8
- * const menuItems = [
9
- * { label: 'Dashboard', path: '/dashboard', icon: <DashboardIcon /> },
10
- * { label: 'Users', path: '/users', icon: <UsersIcon /> },
11
- * ];
12
- *
13
- * return (
14
- * <AppLayoutV2
15
- * userFullName="John Doe"
16
- * designation="Software Engineer"
17
- * collapsed={collapsed}
18
- * onToggleSidebar={() => setCollapsed(!collapsed)}
19
- * menu={menuItems}
20
- * headerActions={[<Button key="add">Add New</Button>]}
21
- * profileActions={[<MenuItem key="settings">Settings</MenuItem>]}
22
- * institutionsData={institutions}
23
- * onLogoutClick={handleLogout}
24
- * >
25
- * <YourPageContent />
26
- * </AppLayoutV2>
27
- * );
28
- * }
29
- * ```
30
- *
31
- * @example With custom sidebar and breadcrumbs:
32
- * ```tsx
33
- * function MyAppWithCustomSidebar() {
34
- * const [collapsed, setCollapsed] = useState(false);
35
- *
36
- * const customSidebar = (
37
- * <div style={{ padding: '16px' }}>
38
- * <nav>
39
- * <ul>
40
- * <li><Link to="/dashboard">Dashboard</Link></li>
41
- * <li><Link to="/reports">Reports</Link></li>
42
- * </ul>
43
- * </nav>
44
- * </div>
45
- * );
46
- *
47
- * const breadcrumbs = (
48
- * <Breadcrumbs aria-label="breadcrumb">
49
- * <Link to="/">Home</Link>
50
- * <Link to="/dashboard">Dashboard</Link>
51
- * <Typography color="textPrimary">Current Page</Typography>
52
- * </Breadcrumbs>
53
- * );
54
- *
55
- * return (
56
- * <AppLayoutV2
57
- * userFullName="Jane Smith"
58
- * designation="Project Manager"
59
- * collapsed={collapsed}
60
- * onToggleSidebar={() => setCollapsed(!collapsed)}
61
- * sidebar={customSidebar}
62
- * breadcrumbs={breadcrumbs}
63
- * headerActions={[
64
- * <IconButton key="notifications"><NotificationsIcon /></IconButton>,
65
- * <Button key="export">Export</Button>
66
- * ]}
67
- * showActiveDevices={true}
68
- * clientName="My Company"
69
- * headerSx={{ backgroundColor: 'primary.light' }}
70
- * onLogoutClick={handleLogout}
71
- * >
72
- * <Dashboard />
73
- * </AppLayoutV2>
74
- * );
75
- * }
76
- * ```
77
- *
78
- * @example Minimal usage (no sidebar):
79
- * ```tsx
80
- * function SimpleLayout() {
81
- * return (
82
- * <AppLayoutV2
83
- * userFullName="Admin User"
84
- * collapsed={false} // This won't matter since no sidebar
85
- * onLogoutClick={() => console.log('Logout')}
86
- * >
87
- * <SimplePageContent />
88
- * </AppLayoutV2>
89
- * );
90
- * }
91
- * ```
92
- */
93
- import { SideMenuItemProps } from '@campxdev/react-blueprint';
94
- import { SxProps } from '@mui/material';
95
- import { ReactNode } from 'react';
96
- export interface AppLayoutV2Props {
97
- /** Main content to be rendered in the layout */
98
- children: ReactNode;
99
- /** Optional sidebar content */
100
- sidebar?: ReactNode;
101
- /** Actions to be displayed in the header */
102
- headerActions?: ReactNode[];
103
- /** Actions for the user profile dropdown */
104
- profileActions?: ReactNode[];
105
- /** User's full name */
106
- userFullName: string;
107
- /** User's designation/title */
108
- designation?: string;
109
- /** Whether the sidebar is collapsed */
110
- collapsed: boolean;
111
- /** Callback to toggle sidebar state */
112
- onToggleSidebar?: () => void;
113
- /** Breadcrumbs component */
114
- breadcrumbs?: ReactNode;
115
- /** Institution data for multi-tenant scenarios */
116
- institutionsData?: any[];
117
- /** Custom styling for the profile component */
118
- profileSx?: SxProps;
119
- /** Logout click handler */
120
- onLogoutClick?: () => void;
121
- /** Whether to show active devices option */
122
- showActiveDevices?: boolean;
123
- /** Custom styling for the header */
124
- headerSx?: SxProps;
125
- /** Custom styling for the main content container */
126
- mainContainerSx?: SxProps;
127
- /** Client/organization name */
128
- clientName?: string;
129
- /** Menu items for sidebar (only used when sidebar prop is not provided) */
130
- menu?: SideMenuItemProps[];
131
- /** Help documentation configuration */
132
- helpDocsConfig?: Record<string, {
133
- actions: {
134
- name: string;
135
- onClick: () => void;
136
- }[];
137
- }>;
138
- }
139
- /**
140
- * AppLayoutV2 - A flexible and responsive layout component for application pages.
141
- *
142
- * This component provides a modern layout structure with:
143
- * - Responsive header using AppHeader
144
- * - Optional collapsible sidebar
145
- * - Flexible main content area
146
- * - Mobile-responsive design
147
- * - Error boundaries and loading states
148
- * - Help documentation support
149
- */
150
- export declare const AppLayoutV2: React.FC<AppLayoutV2Props>;