@campxdev/shared 0.5.9 → 0.5.11

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/shared",
3
- "version": "0.5.9",
3
+ "version": "0.5.11",
4
4
  "main": "./exports.ts",
5
5
  "scripts": {
6
6
  "start": "react-scripts start",
@@ -1,184 +1,190 @@
1
- import { KeyboardArrowDown, MoreVert } from '@mui/icons-material'
1
+ import {KeyboardArrowDown, MoreVert} from '@mui/icons-material'
2
2
  import {
3
- Box,
4
- Button,
5
- ButtonProps,
6
- CircularProgress,
7
- IconButton,
8
- IconButtonProps,
9
- ListItemIcon,
10
- ListItemText,
11
- Menu,
12
- MenuItem,
13
- MenuListProps,
14
- MenuProps,
15
- styled,
3
+ Box,
4
+ Button,
5
+ ButtonProps,
6
+ CircularProgress,
7
+ IconButton,
8
+ IconButtonProps,
9
+ ListItemIcon,
10
+ ListItemText,
11
+ Menu,
12
+ MenuItem,
13
+ MenuListProps,
14
+ MenuProps,
15
+ styled,
16
16
  } from '@mui/material'
17
- import { ReactNode, useState } from 'react'
17
+ import {ReactNode, useState} from 'react'
18
+
19
+ type MenuItem =
20
+ | {label: string | ReactNode; icon?: ReactNode; onClick: (props?: any) => any}
21
+ | {customButton?: ReactNode}
18
22
 
19
23
  interface Props {
20
- label?: string
21
- icon?: {
22
- icon: ReactNode
23
- iconProps?: IconButtonProps
24
- outlined?: boolean
25
- }
26
- loading?: boolean
27
- menu?: {
28
- label: string | ReactNode
29
- icon?: ReactNode
30
- onClick: (props?: any) => any
31
- }[]
32
- buttonProps?: ButtonProps
33
- menuProps?: Omit<MenuProps, 'open'>
34
- menuListProps?: MenuListProps
35
- renderMenuItems?: Array<ReactNode>
24
+ label?: string
25
+ icon?: {
26
+ icon: ReactNode
27
+ iconProps?: IconButtonProps
28
+ outlined?: boolean
29
+ }
30
+ loading?: boolean
31
+ menu: MenuItem[]
32
+ buttonProps?: ButtonProps
33
+ menuProps?: Omit<MenuProps, 'open'>
34
+ menuListProps?: MenuListProps
35
+ renderMenuItems?: Array<ReactNode>
36
36
  }
37
37
  const defaultIcon = {
38
- icon: <MoreVert color="primary" />,
39
- outlined: true,
38
+ icon: <MoreVert color='primary' />,
39
+ outlined: true,
40
40
  }
41
41
 
42
42
  export default function DropDownButton({
43
- label,
44
- icon = defaultIcon,
45
- menu = [],
46
- buttonProps,
47
- menuProps,
48
- menuListProps,
49
- loading = false,
50
- renderMenuItems = [],
43
+ label,
44
+ icon = defaultIcon,
45
+ menu = [],
46
+ buttonProps,
47
+ menuProps,
48
+ menuListProps,
49
+ loading = false,
50
+ renderMenuItems = [],
51
51
  }: Props) {
52
- const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
53
- const open = Boolean(anchorEl)
52
+ const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
53
+ const open = Boolean(anchorEl)
54
54
 
55
- const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
56
- setAnchorEl(event.currentTarget)
57
- }
55
+ const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
56
+ setAnchorEl(event.currentTarget)
57
+ }
58
58
 
59
- const handleClose = () => {
60
- setAnchorEl(null)
61
- }
59
+ const handleClose = () => {
60
+ setAnchorEl(null)
61
+ }
62
62
 
63
- return (
64
- <>
65
- {!label ? (
66
- <StyledIconButton
67
- outlined={icon?.outlined ?? false}
68
- onClick={handleClick}
69
- {...icon.iconProps}
70
- >
71
- {icon.icon}
72
- </StyledIconButton>
73
- ) : (
74
- <StyledDropDownButton
75
- onClick={handleClick}
76
- disabled={loading}
77
- endIcon={
78
- loading ? (
79
- <CircularProgress size="20px" thickness={1.7} />
80
- ) : (
81
- <KeyboardArrowDown />
82
- )
83
- }
84
- {...buttonProps}
85
- >
86
- {label}
87
- </StyledDropDownButton>
88
- )}
89
- <Menu
90
- elevation={3}
91
- id="basic-menu"
92
- anchorEl={anchorEl}
93
- open={open}
94
- onClose={handleClose}
95
- MenuListProps={{ sx: { padding: 0 }, ...menuListProps }}
96
- anchorOrigin={{
97
- vertical: 'bottom',
98
- horizontal: 'right',
99
- }}
100
- transformOrigin={{
101
- vertical: 'top',
102
- horizontal: 'right',
103
- }}
104
- {...menuProps}
105
- >
106
- <RenderMenuItems
107
- menu={menu}
108
- renderMenuItems={renderMenuItems}
109
- handleClose={handleClose}
110
- />
111
- </Menu>
112
- </>
113
- )
63
+ return (
64
+ <>
65
+ {!label ? (
66
+ <StyledIconButton
67
+ outlined={icon?.outlined ?? false}
68
+ onClick={handleClick}
69
+ {...icon.iconProps}
70
+ >
71
+ {icon.icon}
72
+ </StyledIconButton>
73
+ ) : (
74
+ <StyledDropDownButton
75
+ onClick={handleClick}
76
+ disabled={loading}
77
+ endIcon={
78
+ loading ? (
79
+ <CircularProgress size='20px' thickness={1.7} />
80
+ ) : (
81
+ <KeyboardArrowDown />
82
+ )
83
+ }
84
+ {...buttonProps}
85
+ >
86
+ {label}
87
+ </StyledDropDownButton>
88
+ )}
89
+ <Menu
90
+ elevation={3}
91
+ id='basic-menu'
92
+ anchorEl={anchorEl}
93
+ open={open}
94
+ onClose={handleClose}
95
+ MenuListProps={{sx: {padding: 0}, ...menuListProps}}
96
+ anchorOrigin={{
97
+ vertical: 'bottom',
98
+ horizontal: 'right',
99
+ }}
100
+ transformOrigin={{
101
+ vertical: 'top',
102
+ horizontal: 'right',
103
+ }}
104
+ {...menuProps}
105
+ >
106
+ <RenderMenuItems
107
+ menu={menu}
108
+ renderMenuItems={renderMenuItems}
109
+ handleClose={handleClose}
110
+ />
111
+ </Menu>
112
+ </>
113
+ )
114
114
  }
115
115
 
116
- const RenderMenuItems = ({ renderMenuItems, menu, handleClose }) => {
117
- if (renderMenuItems?.length) {
118
- return (
119
- <>
120
- {renderMenuItems.map((Item, index) => (
121
- <StyledMenuItem
122
- disableRipple
123
- sx={{
124
- minWidth: '120px',
125
- width: '100%',
126
- padding: 0,
127
- '&:hover': { background: 'none' },
128
- }}
129
- key={index}
130
- >
131
- {Item}
132
- </StyledMenuItem>
133
- ))}
134
- </>
135
- )
136
- }
137
- if (menu?.length) {
138
- return (
139
- <>
140
- {menu.map((item, index) => (
141
- <StyledMenuItem
142
- sx={{ minWidth: '120px', width: '100%' }}
143
- key={index}
144
- onClick={() => {
145
- handleClose()
146
- item.onClick()
147
- }}
148
- >
149
- {item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
150
- <ListItemText>{item.label}</ListItemText>
151
- </StyledMenuItem>
152
- ))}
153
- </>
154
- )
155
- }
116
+ const RenderMenuItems = ({renderMenuItems, menu, handleClose}) => {
117
+ if (renderMenuItems?.length) {
118
+ return (
119
+ <>
120
+ {renderMenuItems.map((Item, index) => (
121
+ <StyledMenuItem
122
+ disableRipple
123
+ sx={{
124
+ minWidth: '120px',
125
+ width: '100%',
126
+ padding: 0,
127
+ '&:hover': {background: 'none'},
128
+ }}
129
+ key={index}
130
+ >
131
+ {Item}
132
+ </StyledMenuItem>
133
+ ))}
134
+ </>
135
+ )
136
+ }
137
+ if (menu?.length) {
138
+ return (
139
+ <>
140
+ {menu.map((item, index) => (
141
+ <>
142
+ {item?.customButton ? (
143
+ item.customButton
144
+ ) : (
145
+ <StyledMenuItem
146
+ sx={{minWidth: '120px', width: '100%'}}
147
+ key={index}
148
+ onClick={() => {
149
+ handleClose()
150
+ item.onClick()
151
+ }}
152
+ >
153
+ {item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
154
+ <ListItemText>{item.label}</ListItemText>
155
+ </StyledMenuItem>
156
+ )}
157
+ </>
158
+ ))}
159
+ </>
160
+ )
161
+ }
156
162
  }
157
163
 
158
164
  const StyledIconButton = styled(IconButton, {
159
- shouldForwardProp: (prop) => prop !== 'outlined',
160
- })<{ outlined?: boolean }>(({ theme, outlined }) => ({
161
- ...(outlined && {
162
- border: `1px solid ${theme.palette.primary.main}`,
163
- borderRadius: '5px',
164
- }),
165
+ shouldForwardProp: (prop) => prop !== 'outlined',
166
+ })<{outlined?: boolean}>(({theme, outlined}) => ({
167
+ ...(outlined && {
168
+ border: `1px solid ${theme.palette.primary.main}`,
169
+ borderRadius: '5px',
170
+ }),
165
171
  }))
166
172
 
167
173
  const StyledMenuItem = styled(MenuItem)(({}) => ({
168
- display: 'flex',
169
- alignItems: 'center',
170
- '& .MuiListItemIcon-root': {
171
- minWidth: '24px',
172
- },
173
- '& .MuiSvgIcon-root': {
174
- height: '18px',
175
- width: '18px',
176
- },
177
- '& .MuiTypography-root': {
178
- fontWeight: 600,
179
- },
174
+ display: 'flex',
175
+ alignItems: 'center',
176
+ '& .MuiListItemIcon-root': {
177
+ minWidth: '24px',
178
+ },
179
+ '& .MuiSvgIcon-root': {
180
+ height: '18px',
181
+ width: '18px',
182
+ },
183
+ '& .MuiTypography-root': {
184
+ fontWeight: 600,
185
+ },
180
186
  }))
181
187
 
182
188
  const StyledDropDownButton = styled(Button)(({}) => ({
183
- padding: '0 14px',
189
+ padding: '0 14px',
184
190
  }))
@@ -1,229 +1,236 @@
1
- import { Alert, Box, Button, styled, Typography } from "@mui/material";
2
- import { useEffect, useState } from "react";
1
+ import {Alert, Box, Button, Divider, styled, Typography} from '@mui/material'
2
+ import {useEffect, useState} from 'react'
3
3
  import {
4
- nointernet,
5
- pagenotfound,
6
- permissiondenied,
7
- unauth,
8
- internalserver,
9
- } from "../../assets/images";
10
- import Cookies from "js-cookie";
11
- import LoginForm from "../LoginForm";
12
- import { useModal } from "../DrawerWrapper/DrawerWrapper";
13
- import { PermissionsStore } from "../../permissions";
14
- import axios from "../../config/axios";
15
-
16
- const StyledAlert = styled(Alert)(({ theme }) => ({
17
- border: `1px solid ${theme.palette.error.main}`,
18
- display: "flex",
19
- alignItems: "center",
20
- "& .MuiAlert-message": {
21
- padding: 0,
22
- },
23
- "& .MuiTypography-root": {
24
- margin: 0,
25
- },
26
- position: "relative",
27
- "& .retryBtn": {
28
- color: "#661b2a",
29
- position: "absolute",
30
- right: 8,
31
- top: 8,
32
- },
33
- }));
34
-
35
- const StyledBox = styled(Box)(({ theme }) => ({
36
- width: "100%",
37
- display: "flex",
38
- flexDirection: "column",
39
- alignItems: "center",
40
- justifyContent: "center",
41
- }));
42
-
43
- export default function ErrorFallback({ error, resetErrorBoundary }) {
44
- if (error?.response?.status) {
45
- switch (error?.response?.status) {
46
- case 401:
47
- return <UnAuth resetBoundary={resetErrorBoundary} />;
48
-
49
- case 500:
50
- return <InternalServer resetBoundary={resetErrorBoundary} />;
51
-
52
- case 403:
53
- return <PemissionDenied resetBoundary={resetErrorBoundary} />;
54
-
55
- default:
56
- return <InternalServer resetBoundary={resetErrorBoundary} />;
57
- }
58
- }
59
-
60
- if (error?.message === "Network Error") {
61
- return <NoInternet resetBoundary={resetErrorBoundary} />;
62
- }
63
-
64
- return (
65
- <Box sx={{ marginTop: "16px", padding: "16px" }}>
66
- <StyledAlert severity="error">
67
- {error?.response?.data?.message ?? error?.message}
68
- <Button
69
- className="retryBtn"
70
- onClick={() => resetErrorBoundary()}
71
- size="small"
72
- color="error"
73
- variant="outlined"
74
- >
75
- Try Again
76
- </Button>
77
- </StyledAlert>
78
- </Box>
79
- );
4
+ nointernet,
5
+ pagenotfound,
6
+ permissiondenied,
7
+ unauth,
8
+ internalserver,
9
+ } from '../../assets/images'
10
+ import Cookies from 'js-cookie'
11
+ import LoginForm from '../LoginForm'
12
+ import {useModal} from '../DrawerWrapper/DrawerWrapper'
13
+ import {PermissionsStore} from '../../permissions'
14
+ import axios from '../../config/axios'
15
+
16
+ const StyledAlert = styled(Alert)(({theme}) => ({
17
+ border: `1px solid ${theme.palette.error.main}`,
18
+ display: 'flex',
19
+ alignItems: 'center',
20
+ '& .MuiAlert-message': {
21
+ padding: 0,
22
+ },
23
+ '& .MuiTypography-root': {
24
+ margin: 0,
25
+ },
26
+ position: 'relative',
27
+ '& .retryBtn': {
28
+ color: '#661b2a',
29
+ position: 'absolute',
30
+ right: 8,
31
+ top: 8,
32
+ },
33
+ }))
34
+
35
+ const StyledBox = styled(Box)(({theme}) => ({
36
+ width: '100%',
37
+ display: 'flex',
38
+ flexDirection: 'column',
39
+ alignItems: 'center',
40
+ justifyContent: 'center',
41
+ }))
42
+
43
+ export default function ErrorFallback({error, resetErrorBoundary}) {
44
+ if (error?.response?.status) {
45
+ switch (error?.response?.status) {
46
+ case 401:
47
+ return <UnAuth resetBoundary={resetErrorBoundary} />
48
+
49
+ case 500:
50
+ return (
51
+ <InternalServer resetBoundary={resetErrorBoundary} error={error} />
52
+ )
53
+
54
+ case 403:
55
+ return <PemissionDenied resetBoundary={resetErrorBoundary} />
56
+
57
+ default:
58
+ return (
59
+ <InternalServer resetBoundary={resetErrorBoundary} error={error} />
60
+ )
61
+ }
62
+ }
63
+
64
+ if (error?.message === 'Network Error') {
65
+ return <NoInternet resetBoundary={resetErrorBoundary} />
66
+ }
67
+
68
+ return (
69
+ <Box sx={{marginTop: '16px', padding: '16px'}}>
70
+ <StyledAlert severity='error'>
71
+ {error?.response?.data?.message ?? error?.message}
72
+ <Button
73
+ className='retryBtn'
74
+ onClick={() => resetErrorBoundary()}
75
+ size='small'
76
+ color='error'
77
+ variant='outlined'
78
+ >
79
+ Try Again
80
+ </Button>
81
+ </StyledAlert>
82
+ </Box>
83
+ )
80
84
  }
81
85
 
82
- export function PageNotFound({ resetBoundary }) {
83
- return (
84
- <>
85
- <StyledBox>
86
- <img
87
- src={pagenotfound}
88
- alt="page not found"
89
- width={470}
90
- style={{ marginTop: "20px" }}
91
- />
92
- <Typography variant="h1">Page Not Found.</Typography>
93
- <Button sx={{ marginTop: "20px" }} onClick={() => resetBoundary()}>
94
- Try Again
95
- </Button>
96
- </StyledBox>
97
- </>
98
- );
86
+ export function PageNotFound({resetBoundary}) {
87
+ return (
88
+ <>
89
+ <StyledBox>
90
+ <img
91
+ src={pagenotfound}
92
+ alt='page not found'
93
+ width={470}
94
+ style={{marginTop: '20px'}}
95
+ />
96
+ <Typography variant='h1'>Page Not Found.</Typography>
97
+ <Button sx={{marginTop: '20px'}} onClick={() => resetBoundary()}>
98
+ Try Again
99
+ </Button>
100
+ </StyledBox>
101
+ </>
102
+ )
99
103
  }
100
104
 
101
- export function NoInternet({ resetBoundary }) {
102
- return (
103
- <>
104
- <StyledBox>
105
- <img src={nointernet} alt="No Internet Found" width={470} />
106
- <Typography variant="h1">No Internet Found.</Typography>
107
- <Button sx={{ marginTop: "20px" }} onClick={() => resetBoundary()}>
108
- Try Again
109
- </Button>
110
- </StyledBox>
111
- </>
112
- );
105
+ export function NoInternet({resetBoundary}) {
106
+ return (
107
+ <>
108
+ <StyledBox>
109
+ <img src={nointernet} alt='No Internet Found' width={470} />
110
+ <Typography variant='h1'>No Internet Found.</Typography>
111
+ <Button sx={{marginTop: '20px'}} onClick={() => resetBoundary()}>
112
+ Try Again
113
+ </Button>
114
+ </StyledBox>
115
+ </>
116
+ )
113
117
  }
114
118
 
115
- export function PemissionDenied({ resetBoundary }) {
116
- return (
117
- <>
118
- <StyledBox>
119
- <img src={permissiondenied} alt="permission denied" width={470} />
120
- <Typography variant="h1">Permission Denied.</Typography>
121
- <Button sx={{ marginTop: "20px" }} onClick={() => resetBoundary()}>
122
- Try Again
123
- </Button>
124
- </StyledBox>
125
- </>
126
- );
119
+ export function PemissionDenied({resetBoundary}) {
120
+ return (
121
+ <>
122
+ <StyledBox>
123
+ <img src={permissiondenied} alt='permission denied' width={470} />
124
+ <Typography variant='h1'>Permission Denied.</Typography>
125
+ <Button sx={{marginTop: '20px'}} onClick={() => resetBoundary()}>
126
+ Try Again
127
+ </Button>
128
+ </StyledBox>
129
+ </>
130
+ )
127
131
  }
128
132
 
129
- export function InternalServer({ resetBoundary }) {
130
- return (
131
- <>
132
- <StyledBox>
133
- <img src={internalserver} alt="internal server error" width={470} />
134
- <Typography variant="h1" marginTop={"20px"}>
135
- Internal Server Error.
136
- </Typography>
137
- <Button
138
- size="small"
139
- variant="outlined"
140
- sx={{ marginTop: "20px" }}
141
- onClick={() => resetBoundary()}
142
- >
143
- Try Again
144
- </Button>
145
- </StyledBox>
146
- </>
147
- );
133
+ export function InternalServer({resetBoundary, error}) {
134
+ return (
135
+ <>
136
+ <StyledBox>
137
+ <img src={internalserver} alt='internal server error' width={470} />
138
+ <Typography variant='h1' marginTop={'20px'}>
139
+ Internal Server Error.
140
+ </Typography>
141
+ <Typography variant='body1'>
142
+ {error?.response?.data?.message}
143
+ </Typography>
144
+ <Button
145
+ size='small'
146
+ variant='outlined'
147
+ sx={{marginTop: '20px'}}
148
+ onClick={() => resetBoundary()}
149
+ >
150
+ Try Again
151
+ </Button>
152
+ </StyledBox>
153
+ </>
154
+ )
148
155
  }
149
156
 
150
- export function UnAuth({ resetBoundary }) {
151
- const modal = useModal();
152
- const [username, setUsername] = useState("");
153
- const [loading, setLoading] = useState(false);
154
-
155
- const url = window.location.origin;
156
- const origin = window?.location?.origin?.split(".");
157
- const isLocalHost =
158
- process.env.NODE_ENV === "development" ||
159
- origin?.slice(-2).join(".") === "campx.dev";
160
- const sessionCookie = Cookies.get("campx_session_key");
161
- const appinit = async () => {
162
- setLoading(true);
163
- await axios
164
- .get("/auth/my-permissions")
165
- .then((res) => {
166
- setUsername(res.data.user.fullName);
167
- PermissionsStore.update((s) => {
168
- s.permissions = {
169
- ...res.data?.permissions,
170
- can_settings_view: 1,
171
- can_dashboard_view: 1,
172
- can_individual_pages_view: 1,
173
- } as any;
174
- });
175
- setLoading(false);
176
- })
177
- .catch((e) => {
178
- modal({
179
- title: "Login",
180
- content: () => <LoginForm />,
181
- });
182
- });
183
- };
184
- function LoginPage() {
185
- if (isLocalHost) {
186
- if (!sessionCookie) {
187
- modal({
188
- title: "Login",
189
- content: () => <LoginForm />,
190
- });
191
- } else {
192
- appinit();
193
- }
194
- } else {
195
- if (!sessionCookie) {
196
- window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`);
197
- } else {
198
- appinit();
199
- }
200
- }
201
- }
202
-
203
- return (
204
- <>
205
- <StyledBox>
206
- <img src={unauth} alt="unauthorized" width={470} />
207
- <Typography variant="h1" marginTop={"20px"}>
208
- UnAuthorized.
209
- </Typography>
210
- <Box
211
- sx={{
212
- display: "flex",
213
- marginTop: "20px",
214
- }}
215
- >
216
- <Button
217
- variant="outlined"
218
- sx={{ marginRight: "10px" }}
219
- onClick={() => resetBoundary()}
220
- >
221
- Try Again
222
- </Button>
223
-
224
- <Button onClick={() => LoginPage()}>Click here to Login</Button>
225
- </Box>
226
- </StyledBox>
227
- </>
228
- );
157
+ export function UnAuth({resetBoundary}) {
158
+ const modal = useModal()
159
+ const [username, setUsername] = useState('')
160
+ const [loading, setLoading] = useState(false)
161
+
162
+ const url = window.location.origin
163
+ const origin = window?.location?.origin?.split('.')
164
+ const isLocalHost =
165
+ process.env.NODE_ENV === 'development' ||
166
+ origin?.slice(-2).join('.') === 'campx.dev'
167
+ const sessionCookie = Cookies.get('campx_session_key')
168
+ const appinit = async () => {
169
+ setLoading(true)
170
+ await axios
171
+ .get('/auth/my-permissions')
172
+ .then((res) => {
173
+ setUsername(res.data.user.fullName)
174
+ PermissionsStore.update((s) => {
175
+ s.permissions = {
176
+ ...res.data?.permissions,
177
+ can_settings_view: 1,
178
+ can_dashboard_view: 1,
179
+ can_individual_pages_view: 1,
180
+ } as any
181
+ })
182
+ setLoading(false)
183
+ })
184
+ .catch((e) => {
185
+ modal({
186
+ title: 'Login',
187
+ content: () => <LoginForm />,
188
+ })
189
+ })
190
+ }
191
+ function LoginPage() {
192
+ if (isLocalHost) {
193
+ if (!sessionCookie) {
194
+ modal({
195
+ title: 'Login',
196
+ content: () => <LoginForm />,
197
+ })
198
+ } else {
199
+ appinit()
200
+ }
201
+ } else {
202
+ if (!sessionCookie) {
203
+ window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`)
204
+ } else {
205
+ appinit()
206
+ }
207
+ }
208
+ }
209
+
210
+ return (
211
+ <>
212
+ <StyledBox>
213
+ <img src={unauth} alt='unauthorized' width={470} />
214
+ <Typography variant='h1' marginTop={'20px'}>
215
+ UnAuthorized.
216
+ </Typography>
217
+ <Box
218
+ sx={{
219
+ display: 'flex',
220
+ marginTop: '20px',
221
+ }}
222
+ >
223
+ <Button
224
+ variant='outlined'
225
+ sx={{marginRight: '10px'}}
226
+ onClick={() => resetBoundary()}
227
+ >
228
+ Try Again
229
+ </Button>
230
+
231
+ <Button onClick={() => LoginPage()}>Click here to Login</Button>
232
+ </Box>
233
+ </StyledBox>
234
+ </>
235
+ )
229
236
  }
@@ -1,9 +1,9 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320" height="320.001" viewBox="0 0 320 320.001">
2
- <defs>
3
- <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
4
- <stop offset="0" stop-color="#596e79"/>
5
- <stop offset="1" stop-color="#7c909b"/>
6
- </linearGradient>
7
- </defs>
8
- <path id="Subtraction_37" data-name="Subtraction 37" d="M2495-5403H2175v-320h320v320Zm-260-260v200h200v-200Z" transform="translate(-2175 5723)" fill="url(#linear-gradient)"/>
9
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320" height="320.001" viewBox="0 0 320 320.001">
2
+ <defs>
3
+ <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
4
+ <stop offset="0" stop-color="#596e79"/>
5
+ <stop offset="1" stop-color="#7c909b"/>
6
+ </linearGradient>
7
+ </defs>
8
+ <path id="Subtraction_37" data-name="Subtraction 37" d="M2495-5403H2175v-320h320v320Zm-260-260v200h200v-200Z" transform="translate(-2175 5723)" fill="url(#linear-gradient)"/>
9
+ </svg>
@@ -1,12 +1,12 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="310.624" height="320" viewBox="0 0 310.624 320">
2
- <defs>
3
- <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
4
- <stop offset="0" stop-color="#d86b00"/>
5
- <stop offset="1" stop-color="#ed9035"/>
6
- </linearGradient>
7
- </defs>
8
- <g id="Group_4477" data-name="Group 4477" transform="translate(-342.295 -263.508)">
9
- <path id="Subtraction_34" data-name="Subtraction 34" d="M310.612,320H233.034l-.016-.023L.015,320,0,319.977,38.785,266.6l.015.019L116.266,160,38.8,53.383l-.015.022L0,.024.015,0H310.609l.015.024L271.837,53.4l-.016-.022L194.354,160l77.467,106.615.016-.019,38.788,53.38-.016.022Zm-155.3-106.994-32.527,44.782,65-.04-32.476-44.742ZM122.788,62.154l32.525,44.783,32.476-44.742-65-.041Z" transform="translate(342.295 263.508)" fill="url(#linear-gradient)"/>
10
- <rect id="Rectangle_4307" data-name="Rectangle 4307" width="3.696" height="133.935" transform="translate(495.759 356.565)" fill="#fff"/>
11
- </g>
12
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="310.624" height="320" viewBox="0 0 310.624 320">
2
+ <defs>
3
+ <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
4
+ <stop offset="0" stop-color="#d86b00"/>
5
+ <stop offset="1" stop-color="#ed9035"/>
6
+ </linearGradient>
7
+ </defs>
8
+ <g id="Group_4477" data-name="Group 4477" transform="translate(-342.295 -263.508)">
9
+ <path id="Subtraction_34" data-name="Subtraction 34" d="M310.612,320H233.034l-.016-.023L.015,320,0,319.977,38.785,266.6l.015.019L116.266,160,38.8,53.383l-.015.022L0,.024.015,0H310.609l.015.024L271.837,53.4l-.016-.022L194.354,160l77.467,106.615.016-.019,38.788,53.38-.016.022Zm-155.3-106.994-32.527,44.782,65-.04-32.476-44.742ZM122.788,62.154l32.525,44.783,32.476-44.742-65-.041Z" transform="translate(342.295 263.508)" fill="url(#linear-gradient)"/>
10
+ <rect id="Rectangle_4307" data-name="Rectangle 4307" width="3.696" height="133.935" transform="translate(495.759 356.565)" fill="#fff"/>
11
+ </g>
12
+ </svg>
@@ -1,13 +1,13 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="464.103" height="320" viewBox="0 0 464.103 320">
2
- <defs>
3
- <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
4
- <stop offset="0" stop-color="#573dab"/>
5
- <stop offset="1" stop-color="#7251dd"/>
6
- </linearGradient>
7
- </defs>
8
- <g id="Group_4511" data-name="Group 4511" transform="translate(-270.758 -251.98)">
9
- <path id="Subtraction_9" data-name="Subtraction 9" d="M79.763,164.484H.016L0,164.46l39.875-54.878.015.021L118.681,1.165,157.727,54.9l.015-.021.827,1.138L79.763,164.483ZM198.442,1.137h0L197.615,0h.431l.8.58-.4.555Z" transform="translate(384.15 407.496)" fill="url(#linear-gradient)"/>
10
- <path id="Union_40" data-name="Union 40" d="M79.765,320H.017L0,319.974,39.878,265.1l.013.019,78.793-108.439.185.253,34.4-47.349.016.022,78.79-108.44.389.534.239-.333L350.791,163.9l-.077.058,73.5,101.155.016-.019L464.1,319.974l-.017.023H384.339L305.533,211.531l.031-.042L265.677,156.63l-.014.019,0,0v0l-.4-.554.02-.014-7.844-10.789.1.016-25.226-34.717-39.155,53.891h-.379l-35.728,49.138L79.765,320v0ZM152.94,1.392l-1-1.367L151.96,0h1.991L152.94,1.392v0Zm158.893-.256L311.008,0h.431l.8.583-.4.554Z" transform="translate(270.757 251.98)" fill="url(#linear-gradient)"/>
11
- <path id="Subtraction_10" data-name="Subtraction 10" d="M198.046,164.484h-78.52L40.883,56.246,80.756,1.366,198.845,163.9l-.8.58ZM1,1.393h0L0,.024.015,0H2.006L1,1.392Z" transform="translate(422.701 407.495)" fill="url(#linear-gradient)"/>
12
- </g>
13
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="464.103" height="320" viewBox="0 0 464.103 320">
2
+ <defs>
3
+ <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
4
+ <stop offset="0" stop-color="#573dab"/>
5
+ <stop offset="1" stop-color="#7251dd"/>
6
+ </linearGradient>
7
+ </defs>
8
+ <g id="Group_4511" data-name="Group 4511" transform="translate(-270.758 -251.98)">
9
+ <path id="Subtraction_9" data-name="Subtraction 9" d="M79.763,164.484H.016L0,164.46l39.875-54.878.015.021L118.681,1.165,157.727,54.9l.015-.021.827,1.138L79.763,164.483ZM198.442,1.137h0L197.615,0h.431l.8.58-.4.555Z" transform="translate(384.15 407.496)" fill="url(#linear-gradient)"/>
10
+ <path id="Union_40" data-name="Union 40" d="M79.765,320H.017L0,319.974,39.878,265.1l.013.019,78.793-108.439.185.253,34.4-47.349.016.022,78.79-108.44.389.534.239-.333L350.791,163.9l-.077.058,73.5,101.155.016-.019L464.1,319.974l-.017.023H384.339L305.533,211.531l.031-.042L265.677,156.63l-.014.019,0,0v0l-.4-.554.02-.014-7.844-10.789.1.016-25.226-34.717-39.155,53.891h-.379l-35.728,49.138L79.765,320v0ZM152.94,1.392l-1-1.367L151.96,0h1.991L152.94,1.392v0Zm158.893-.256L311.008,0h.431l.8.583-.4.554Z" transform="translate(270.757 251.98)" fill="url(#linear-gradient)"/>
11
+ <path id="Subtraction_10" data-name="Subtraction 10" d="M198.046,164.484h-78.52L40.883,56.246,80.756,1.366,198.845,163.9l-.8.58ZM1,1.393h0L0,.024.015,0H2.006L1,1.392Z" transform="translate(422.701 407.495)" fill="url(#linear-gradient)"/>
12
+ </g>
13
+ </svg>
@@ -1,16 +1,16 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="225.228" height="320" viewBox="0 0 225.228 320">
2
- <defs>
3
- <linearGradient id="linear-gradient" x1="0.222" y1="1" x2="0.787" gradientUnits="objectBoundingBox">
4
- <stop offset="0" stop-color="#88b053"/>
5
- <stop offset="1" stop-color="#50840b"/>
6
- </linearGradient>
7
- </defs>
8
- <g id="Group_4464" data-name="Group 4464" transform="translate(-1597.6 -781.55)">
9
- <g id="Group_4461" data-name="Group 4461" transform="translate(1597.6 781.55)">
10
- <g id="Group_4460" data-name="Group 4460" transform="translate(0 0)">
11
- <path id="Subtraction_8" data-name="Subtraction 8" d="M79.79,164.485,198.873.58l-.8-.58H119.553L39.916,109.605l-.015-.022L.026,164.462l.015.023H79.79Z" transform="translate(26.355 155.515)" fill="url(#linear-gradient)"/>
12
- <path id="Subtraction_8-2" data-name="Subtraction 8" d="M119.109,0,.026,163.9l.8.58H79.346L158.983,54.88,159,54.9,198.873.023,198.858,0H119.109Z" transform="translate(-0.026 0)" fill="url(#linear-gradient)"/>
13
- </g>
14
- </g>
15
- </g>
16
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="225.228" height="320" viewBox="0 0 225.228 320">
2
+ <defs>
3
+ <linearGradient id="linear-gradient" x1="0.222" y1="1" x2="0.787" gradientUnits="objectBoundingBox">
4
+ <stop offset="0" stop-color="#88b053"/>
5
+ <stop offset="1" stop-color="#50840b"/>
6
+ </linearGradient>
7
+ </defs>
8
+ <g id="Group_4464" data-name="Group 4464" transform="translate(-1597.6 -781.55)">
9
+ <g id="Group_4461" data-name="Group 4461" transform="translate(1597.6 781.55)">
10
+ <g id="Group_4460" data-name="Group 4460" transform="translate(0 0)">
11
+ <path id="Subtraction_8" data-name="Subtraction 8" d="M79.79,164.485,198.873.58l-.8-.58H119.553L39.916,109.605l-.015-.022L.026,164.462l.015.023H79.79Z" transform="translate(26.355 155.515)" fill="url(#linear-gradient)"/>
12
+ <path id="Subtraction_8-2" data-name="Subtraction 8" d="M119.109,0,.026,163.9l.8.58H79.346L158.983,54.88,159,54.9,198.873.023,198.858,0H119.109Z" transform="translate(-0.026 0)" fill="url(#linear-gradient)"/>
13
+ </g>
14
+ </g>
15
+ </g>
16
+ </svg>
@@ -1,9 +1,9 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="426.29" height="320.001" viewBox="0 0 426.29 320.001">
2
- <defs>
3
- <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
4
- <stop offset="0" stop-color="#d0002b"/>
5
- <stop offset="1" stop-color="#ea4a6b"/>
6
- </linearGradient>
7
- </defs>
8
- <path id="Union_42" data-name="Union 42" d="M-1429.646-7174l-50.322-69.259-9.444,13,40.5,55.514-1.027.747h-182.829l-.021-.03,40.96-56.372-9.342-12.857L-1651.493-7174h-102.486l-.021-.03,51.243-70.524.019.026,101.257-139.358.5.683,0,0,60.424,82.832,60.775-82.837.006.008.306-.421,151.761,208.879-1.027.747Zm-92.314-279.665v0A40.334,40.334,0,0,1-1481.627-7494a40.335,40.335,0,0,1,40.334,40.334v0a40.335,40.335,0,0,1-40.334,40.333A40.333,40.333,0,0,1-1521.96-7453.664Zm-119.905,0v0A40.334,40.334,0,0,1-1601.532-7494a40.335,40.335,0,0,1,40.334,40.334v0a40.335,40.335,0,0,1-40.334,40.333A40.333,40.333,0,0,1-1641.865-7453.664Z" transform="translate(1753.999 7494)" fill="url(#linear-gradient)"/>
9
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="426.29" height="320.001" viewBox="0 0 426.29 320.001">
2
+ <defs>
3
+ <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
4
+ <stop offset="0" stop-color="#d0002b"/>
5
+ <stop offset="1" stop-color="#ea4a6b"/>
6
+ </linearGradient>
7
+ </defs>
8
+ <path id="Union_42" data-name="Union 42" d="M-1429.646-7174l-50.322-69.259-9.444,13,40.5,55.514-1.027.747h-182.829l-.021-.03,40.96-56.372-9.342-12.857L-1651.493-7174h-102.486l-.021-.03,51.243-70.524.019.026,101.257-139.358.5.683,0,0,60.424,82.832,60.775-82.837.006.008.306-.421,151.761,208.879-1.027.747Zm-92.314-279.665v0A40.334,40.334,0,0,1-1481.627-7494a40.335,40.335,0,0,1,40.334,40.334v0a40.335,40.335,0,0,1-40.334,40.333A40.333,40.333,0,0,1-1521.96-7453.664Zm-119.905,0v0A40.334,40.334,0,0,1-1601.532-7494a40.335,40.335,0,0,1,40.334,40.334v0a40.335,40.335,0,0,1-40.334,40.333A40.333,40.333,0,0,1-1641.865-7453.664Z" transform="translate(1753.999 7494)" fill="url(#linear-gradient)"/>
9
+ </svg>
@@ -21,7 +21,8 @@ import { ListItemButton } from "./ListItemButton";
21
21
  import LayoutWrapper from "./LayoutWrapper";
22
22
  import PageNotFound from "./PageNotFound";
23
23
  import ChangePassword from "./ChangePassword";
24
-
24
+ import UploadButton from "./UploadButton";
25
+ import DialogWrapper from "./DrawerWrapper/DialogWrapper";
25
26
  export { default as Image } from "./Image";
26
27
  export { default as PageHeader } from "./PageHeader";
27
28
  export { PageContent } from "./PageContent";
@@ -71,6 +72,8 @@ export {
71
72
  PageNotFound,
72
73
  SideNav,
73
74
  ChangePassword,
75
+ UploadButton,
76
+ DialogWrapper,
74
77
  };
75
78
 
76
79
  export * from "./UploadButton/types";