@campxdev/shared 1.10.90 → 1.10.91
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 +1 -1
- package/src/assets/images/index.tsx +17 -0
- package/src/components/CustomizeReport/CustomizeReport.tsx +154 -0
- package/src/components/CustomizeReport/Report.tsx +153 -0
- package/src/components/ReactJoyRide.tsx +4 -1
- package/src/components/ReportHeader.tsx +37 -0
- package/src/components/index.ts +2 -0
- package/src/config/axios.ts +4 -5
- package/src/constants/isDevelopment.ts +2 -0
- package/src/utils/logout.ts +2 -4
package/package.json
CHANGED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
const avatarImage = require('./avatar.png')
|
|
2
|
+
const pagenotfound = require('./notfound.png')
|
|
3
|
+
const permissiondenied = require('./403.png')
|
|
4
|
+
const internalserver = require('./500.png')
|
|
5
|
+
const unauth = require('./401.png')
|
|
6
|
+
const nointernet = require('./nointernet.png')
|
|
7
|
+
const campxLogoPrimary = require('./campx_logo__full_primary.png')
|
|
8
|
+
|
|
9
|
+
export {
|
|
10
|
+
avatarImage,
|
|
11
|
+
campxLogoPrimary,
|
|
12
|
+
internalserver,
|
|
13
|
+
nointernet,
|
|
14
|
+
pagenotfound,
|
|
15
|
+
permissiondenied,
|
|
16
|
+
unauth,
|
|
17
|
+
}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { Close } from '@mui/icons-material'
|
|
2
|
+
import {
|
|
3
|
+
Box,
|
|
4
|
+
Dialog,
|
|
5
|
+
DialogProps,
|
|
6
|
+
DialogTitle,
|
|
7
|
+
Grow,
|
|
8
|
+
IconButton,
|
|
9
|
+
styled,
|
|
10
|
+
} from '@mui/material'
|
|
11
|
+
import { TransitionProps } from '@mui/material/transitions'
|
|
12
|
+
import { forwardRef, useState } from 'react'
|
|
13
|
+
import { SCROLLBAR_DARK } from '../../theme/muiTheme'
|
|
14
|
+
import ActionButton from '../ActionButton'
|
|
15
|
+
import ErrorBoundary from '../ErrorBoundary/ErrorBoundary'
|
|
16
|
+
import Report from './Report'
|
|
17
|
+
|
|
18
|
+
const StyledDialogHeader = styled(Box)(() => ({
|
|
19
|
+
height: '64px',
|
|
20
|
+
backgroundColor: '#f7f7f7',
|
|
21
|
+
display: 'flex',
|
|
22
|
+
justifyContent: 'space-between',
|
|
23
|
+
alignItems: 'end',
|
|
24
|
+
padding: '0.6rem 1rem',
|
|
25
|
+
paddingBottom: '10px',
|
|
26
|
+
}))
|
|
27
|
+
|
|
28
|
+
const StyledDialogContent = styled(Box)(() => ({
|
|
29
|
+
width: '100%',
|
|
30
|
+
padding: '1rem',
|
|
31
|
+
maxHeight: 'calc(100vh - 64px)',
|
|
32
|
+
overflow: 'auto',
|
|
33
|
+
...SCROLLBAR_DARK,
|
|
34
|
+
}))
|
|
35
|
+
|
|
36
|
+
export const Transition = forwardRef(function Transition(
|
|
37
|
+
props: TransitionProps & {
|
|
38
|
+
children: React.ReactElement
|
|
39
|
+
},
|
|
40
|
+
ref: React.Ref<unknown>,
|
|
41
|
+
) {
|
|
42
|
+
return <Grow timeout={1000} ref={ref} {...props} />
|
|
43
|
+
})
|
|
44
|
+
|
|
45
|
+
interface ButtonProps {
|
|
46
|
+
title: string
|
|
47
|
+
dialogProps?: Omit<DialogProps, 'open'>
|
|
48
|
+
onDialogClose?: () => void
|
|
49
|
+
header: string[]
|
|
50
|
+
onSubmit: (data: any) => void
|
|
51
|
+
changeHeader: string[]
|
|
52
|
+
btnTitle?: string
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export default function CustomizeReport({
|
|
56
|
+
title,
|
|
57
|
+
dialogProps,
|
|
58
|
+
onDialogClose,
|
|
59
|
+
|
|
60
|
+
header,
|
|
61
|
+
onSubmit,
|
|
62
|
+
changeHeader,
|
|
63
|
+
btnTitle,
|
|
64
|
+
}: ButtonProps) {
|
|
65
|
+
const [open, setOpen] = useState(false)
|
|
66
|
+
|
|
67
|
+
const onClose = () => {
|
|
68
|
+
onDialogClose && onDialogClose()
|
|
69
|
+
setOpen(false)
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
const onOpen = () => {
|
|
73
|
+
setOpen(true)
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return (
|
|
77
|
+
<>
|
|
78
|
+
<ActionButton onClick={onOpen} sx={{ marginRight: '10px' }}>
|
|
79
|
+
{btnTitle || 'Customize Header'}
|
|
80
|
+
</ActionButton>
|
|
81
|
+
|
|
82
|
+
<CustomDialog
|
|
83
|
+
open={open}
|
|
84
|
+
dialogProps={dialogProps}
|
|
85
|
+
onClose={onClose}
|
|
86
|
+
title={title}
|
|
87
|
+
header={header}
|
|
88
|
+
onSubmit={onSubmit}
|
|
89
|
+
changeHeader={changeHeader}
|
|
90
|
+
/>
|
|
91
|
+
</>
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
interface CustomDialogProps {
|
|
96
|
+
title?: string
|
|
97
|
+
onClose: () => void
|
|
98
|
+
open: boolean
|
|
99
|
+
dialogProps?: Omit<DialogProps, 'open'>
|
|
100
|
+
header: string[]
|
|
101
|
+
onSubmit: (data: any) => void
|
|
102
|
+
changeHeader: string[]
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export const CustomDialog = ({
|
|
106
|
+
onClose,
|
|
107
|
+
dialogProps,
|
|
108
|
+
title,
|
|
109
|
+
header,
|
|
110
|
+
open,
|
|
111
|
+
onSubmit,
|
|
112
|
+
changeHeader,
|
|
113
|
+
}: CustomDialogProps) => {
|
|
114
|
+
const props = {
|
|
115
|
+
PaperProps: {
|
|
116
|
+
...dialogProps?.PaperProps,
|
|
117
|
+
elevation: 2,
|
|
118
|
+
sx: { borderRadius: '10px' },
|
|
119
|
+
},
|
|
120
|
+
fullWidth: true,
|
|
121
|
+
onClose: onClose,
|
|
122
|
+
open: open,
|
|
123
|
+
transitionDuration: 140,
|
|
124
|
+
TransitionComponent: Transition,
|
|
125
|
+
sx: {
|
|
126
|
+
...dialogProps?.sx,
|
|
127
|
+
'& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
|
|
128
|
+
},
|
|
129
|
+
...dialogProps,
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
return (
|
|
133
|
+
<Dialog {...props}>
|
|
134
|
+
{title && (
|
|
135
|
+
<StyledDialogHeader>
|
|
136
|
+
<DialogTitle>{title}</DialogTitle>
|
|
137
|
+
<IconButton onClick={onClose} sx={{ color: 'black' }}>
|
|
138
|
+
<Close />
|
|
139
|
+
</IconButton>
|
|
140
|
+
</StyledDialogHeader>
|
|
141
|
+
)}
|
|
142
|
+
<StyledDialogContent>
|
|
143
|
+
<ErrorBoundary>
|
|
144
|
+
<Report
|
|
145
|
+
close={onClose}
|
|
146
|
+
header={header}
|
|
147
|
+
onSubmit={onSubmit}
|
|
148
|
+
changeHeader={changeHeader}
|
|
149
|
+
/>
|
|
150
|
+
</ErrorBoundary>
|
|
151
|
+
</StyledDialogContent>
|
|
152
|
+
</Dialog>
|
|
153
|
+
)
|
|
154
|
+
}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import { Box, Button, Stack, Typography } from '@mui/material'
|
|
2
|
+
import { useState } from 'react'
|
|
3
|
+
import { DeleteButton } from '../IconButtons'
|
|
4
|
+
|
|
5
|
+
function Report({ close, header, onSubmit, changeHeader }) {
|
|
6
|
+
const formatted = header?.map((item) => {
|
|
7
|
+
return {
|
|
8
|
+
label: item,
|
|
9
|
+
show: changeHeader?.includes(item),
|
|
10
|
+
}
|
|
11
|
+
})
|
|
12
|
+
const [data, setData] = useState(formatted)
|
|
13
|
+
const toggleShow = (index) => {
|
|
14
|
+
const updatedData = [...data]
|
|
15
|
+
updatedData[index].show = !updatedData[index].show
|
|
16
|
+
setData(updatedData)
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<>
|
|
21
|
+
<Box
|
|
22
|
+
sx={{
|
|
23
|
+
display: 'flex',
|
|
24
|
+
flexWrap: 'wrap',
|
|
25
|
+
alignItems: 'center',
|
|
26
|
+
}}
|
|
27
|
+
>
|
|
28
|
+
{data?.map((item, index) => (
|
|
29
|
+
<Card
|
|
30
|
+
key={item.label}
|
|
31
|
+
title={item.label}
|
|
32
|
+
show={item?.show}
|
|
33
|
+
onToggle={() => toggleShow(index)}
|
|
34
|
+
/>
|
|
35
|
+
))}
|
|
36
|
+
</Box>
|
|
37
|
+
<Box
|
|
38
|
+
sx={{
|
|
39
|
+
display: 'flex',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
justifyContent: 'center',
|
|
42
|
+
marginY: '20px',
|
|
43
|
+
}}
|
|
44
|
+
>
|
|
45
|
+
<Stack direction={'row'} gap={'20px'}>
|
|
46
|
+
<Button variant="outlined" onClick={close}>
|
|
47
|
+
Cancel
|
|
48
|
+
</Button>
|
|
49
|
+
<Button
|
|
50
|
+
onClick={() => {
|
|
51
|
+
onSubmit(
|
|
52
|
+
data.filter((item) => item.show).map((item) => item.label),
|
|
53
|
+
)
|
|
54
|
+
close()
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
57
|
+
Generate Report
|
|
58
|
+
</Button>
|
|
59
|
+
</Stack>
|
|
60
|
+
</Box>
|
|
61
|
+
</>
|
|
62
|
+
)
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export default Report
|
|
66
|
+
|
|
67
|
+
export const Card = ({ title, show, onToggle }) => {
|
|
68
|
+
return (
|
|
69
|
+
<>
|
|
70
|
+
<Box
|
|
71
|
+
sx={{
|
|
72
|
+
flexBasis: [
|
|
73
|
+
'100%',
|
|
74
|
+
'calc(50% - 10px)',
|
|
75
|
+
'calc(33.33% - 10px)',
|
|
76
|
+
'calc(25% - 10px)',
|
|
77
|
+
],
|
|
78
|
+
maxWidth: '100%',
|
|
79
|
+
padding: '10px',
|
|
80
|
+
}}
|
|
81
|
+
>
|
|
82
|
+
<Stack sx={{ border: '1px solid #1212121A', width: '100%' }}>
|
|
83
|
+
<Box
|
|
84
|
+
sx={{
|
|
85
|
+
backgroundColor: '#1212121A',
|
|
86
|
+
padding: '20px',
|
|
87
|
+
borderRight: '1px solid #1212121A',
|
|
88
|
+
width: '100%',
|
|
89
|
+
}}
|
|
90
|
+
>
|
|
91
|
+
<Typography sx={{ opacity: show ? 1 : '0.5' }} variant="h4">
|
|
92
|
+
{title}
|
|
93
|
+
</Typography>
|
|
94
|
+
</Box>
|
|
95
|
+
{show ? (
|
|
96
|
+
<Box
|
|
97
|
+
sx={{
|
|
98
|
+
padding: '10px',
|
|
99
|
+
display: 'flex',
|
|
100
|
+
alignItems: 'center',
|
|
101
|
+
gap: '10px',
|
|
102
|
+
cursor: 'pointer',
|
|
103
|
+
width: '100%',
|
|
104
|
+
}}
|
|
105
|
+
onClick={onToggle}
|
|
106
|
+
>
|
|
107
|
+
<DeleteButton />
|
|
108
|
+
<Typography sx={{ color: 'red' }}> Delete</Typography>
|
|
109
|
+
</Box>
|
|
110
|
+
) : (
|
|
111
|
+
<Box
|
|
112
|
+
sx={{
|
|
113
|
+
padding: '10px',
|
|
114
|
+
display: 'flex',
|
|
115
|
+
alignItems: 'center',
|
|
116
|
+
gap: '10px',
|
|
117
|
+
cursor: 'pointer',
|
|
118
|
+
width: '100%',
|
|
119
|
+
}}
|
|
120
|
+
onClick={onToggle}
|
|
121
|
+
>
|
|
122
|
+
<RestoreIcon />
|
|
123
|
+
<Typography sx={{ color: '#1C1C1C' }}>Restore</Typography>
|
|
124
|
+
</Box>
|
|
125
|
+
)}
|
|
126
|
+
</Stack>
|
|
127
|
+
</Box>
|
|
128
|
+
</>
|
|
129
|
+
)
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
export const RestoreIcon = () => {
|
|
133
|
+
return (
|
|
134
|
+
<>
|
|
135
|
+
<svg
|
|
136
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
137
|
+
width="17.375"
|
|
138
|
+
height="17.375"
|
|
139
|
+
viewBox="0 0 17.375 17.375"
|
|
140
|
+
>
|
|
141
|
+
<path
|
|
142
|
+
id="Path_19300"
|
|
143
|
+
data-name="Path 19300"
|
|
144
|
+
d="M17.9,9.564A8.347,8.347,0,0,0,9.564,17.9a.333.333,0,0,0,.667,0,7.675,7.675,0,1,1,2.324,5.5h1.74a.333.333,0,1,0,0-.667h-2.5a.321.321,0,0,0-.08.016c-.01,0-.02,0-.03.006a.323.323,0,0,0-.076.042.312.312,0,0,0-.034.019s0,.006-.007.009a.9.9,0,0,0-.08.111s0,0,0,.007a.328.328,0,0,0-.025.129v2.5a.333.333,0,0,0,.667,0V23.914A8.337,8.337,0,1,0,17.9,9.564Z"
|
|
145
|
+
transform="translate(-9.214 -9.214)"
|
|
146
|
+
fill="#1c1c1c"
|
|
147
|
+
stroke="#1c1c1c"
|
|
148
|
+
stroke-width="0.7"
|
|
149
|
+
/>
|
|
150
|
+
</svg>
|
|
151
|
+
</>
|
|
152
|
+
)
|
|
153
|
+
}
|
|
@@ -11,10 +11,12 @@ function ReactJoyRide({
|
|
|
11
11
|
steps,
|
|
12
12
|
children,
|
|
13
13
|
tourName,
|
|
14
|
+
iconPosition,
|
|
14
15
|
}: {
|
|
15
16
|
steps: Step[]
|
|
16
17
|
children?: ReactNode
|
|
17
18
|
tourName: string
|
|
19
|
+
iconPosition?: 'left' | 'right'
|
|
18
20
|
}) {
|
|
19
21
|
const [run, setRun] = useState(false)
|
|
20
22
|
|
|
@@ -123,7 +125,8 @@ function ReactJoyRide({
|
|
|
123
125
|
sx={{
|
|
124
126
|
position: 'fixed',
|
|
125
127
|
bottom: '85px',
|
|
126
|
-
|
|
128
|
+
left: iconPosition === 'left' ? '235px' : 'auto',
|
|
129
|
+
right: iconPosition === 'right' ? '20px' : 'auto',
|
|
127
130
|
zIndex: 1000,
|
|
128
131
|
borderRadius: '50%',
|
|
129
132
|
width: '50px',
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Box, Typography } from '@mui/material'
|
|
2
|
+
|
|
3
|
+
interface ReportHeaderProps {
|
|
4
|
+
logo: any
|
|
5
|
+
address: string
|
|
6
|
+
title?: string
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const ReportHeader = ({ logo, address, title }: ReportHeaderProps) => {
|
|
10
|
+
return (
|
|
11
|
+
<Box
|
|
12
|
+
sx={{
|
|
13
|
+
display: 'flex',
|
|
14
|
+
flexDirection: 'column',
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
gap: '5px',
|
|
17
|
+
}}
|
|
18
|
+
>
|
|
19
|
+
<img
|
|
20
|
+
style={{
|
|
21
|
+
height: '40px',
|
|
22
|
+
objectFit: 'contain',
|
|
23
|
+
}}
|
|
24
|
+
src={logo}
|
|
25
|
+
/>
|
|
26
|
+
|
|
27
|
+
<Typography variant="h5" style={{ fontSize: '15px' }}>
|
|
28
|
+
{address}
|
|
29
|
+
</Typography>
|
|
30
|
+
{title && (
|
|
31
|
+
<Typography variant="h2" style={{ fontSize: '13px' }}>
|
|
32
|
+
{title}
|
|
33
|
+
</Typography>
|
|
34
|
+
)}
|
|
35
|
+
</Box>
|
|
36
|
+
)
|
|
37
|
+
}
|
package/src/components/index.ts
CHANGED
|
@@ -39,11 +39,13 @@ import TabsContainer from './Tabs/TabsContainer'
|
|
|
39
39
|
import UploadButton from './UploadButton'
|
|
40
40
|
import UploadDocument from './UploadDocument'
|
|
41
41
|
import UploadFileDialog from './UploadFileDialog'
|
|
42
|
+
|
|
42
43
|
export { default as ActionButton } from './ActionButton'
|
|
43
44
|
export { default as AutocompleteSearch } from './AutocompleteSearch'
|
|
44
45
|
export { default as Breadcrumbs } from './Breadcrumbs'
|
|
45
46
|
export { default as Card } from './Card'
|
|
46
47
|
export { default as CardsGrid } from './CardsGrid'
|
|
48
|
+
export { default as CustomizeReport } from './CustomizeReport/CustomizeReport'
|
|
47
49
|
export { default as DividerHeading } from './DividerHeading'
|
|
48
50
|
export { default as DropDownButton } from './DropDownButton'
|
|
49
51
|
export { default as FeeCard } from './FeeCard'
|
package/src/config/axios.ts
CHANGED
|
@@ -2,7 +2,7 @@ import Axios, { AxiosRequestConfig } from 'axios'
|
|
|
2
2
|
import Cookies from 'js-cookie'
|
|
3
3
|
import { toast } from 'react-toastify'
|
|
4
4
|
import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
|
|
5
|
-
import { isDevelopment } from '../constants'
|
|
5
|
+
import { isDevelopment, isSetup } from '../constants'
|
|
6
6
|
import { InsititutionsStore } from '../shared-state/InstitutionsStore'
|
|
7
7
|
|
|
8
8
|
const sessionKey = Cookies.get('campx_session_key')
|
|
@@ -23,10 +23,9 @@ let axios = Axios.create({
|
|
|
23
23
|
withCredentials: true,
|
|
24
24
|
headers: {
|
|
25
25
|
'x-tenant-id': clientId,
|
|
26
|
-
...(isDevelopment &&
|
|
27
|
-
sessionKey
|
|
28
|
-
|
|
29
|
-
}),
|
|
26
|
+
...(isDevelopment || (isSetup && sessionKey)
|
|
27
|
+
? { campx_session_key: sessionKey }
|
|
28
|
+
: {}),
|
|
30
29
|
},
|
|
31
30
|
})
|
|
32
31
|
|
package/src/utils/logout.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import Cookies from 'js-cookie'
|
|
2
2
|
import axios, { axiosErrorToast } from '../config/axios'
|
|
3
|
+
import { isDevelopment, isSetup } from '../constants'
|
|
3
4
|
|
|
4
5
|
export default function logout() {
|
|
5
6
|
axios({
|
|
@@ -8,10 +9,7 @@ export default function logout() {
|
|
|
8
9
|
url: '/auth-server/auth/logout',
|
|
9
10
|
})
|
|
10
11
|
.then((res) => {
|
|
11
|
-
if (
|
|
12
|
-
process.env.NODE_ENV === 'development' ||
|
|
13
|
-
window.location.origin.split('campx')[1] === '.dev'
|
|
14
|
-
) {
|
|
12
|
+
if (isDevelopment || isSetup) {
|
|
15
13
|
Cookies.remove('campx_tenant')
|
|
16
14
|
Cookies.remove('campx_session_key')
|
|
17
15
|
window.location.href = window.location.origin
|