@visns-studio/visns-components 4.4.4 → 4.4.5
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/components/crm/auth/Login.jsx +1 -1
- package/components/crm/auth/Reset.jsx +22 -12
- package/components/crm/auth/Verify.jsx +23 -15
- package/components/crm/auth/styles/Reset.module.css +218 -0
- package/components/crm/auth/styles/Verify.module.css +218 -0
- package/components/crm/generic/AuditLog.jsx +15 -10
- package/components/crm/generic/AuditLogs.jsx +7 -6
- package/components/crm/generic/GenericSort.jsx +7 -6
- package/components/crm/generic/NotificationList.jsx +6 -6
- package/components/crm/generic/styles/AuditLog.module.css +147 -0
- package/components/crm/generic/styles/AuditLogs.module.css +67 -0
- package/components/crm/generic/styles/GenericSort.module.css +67 -0
- package/components/crm/generic/styles/NotificationList.module.css +67 -0
- package/package.json +1 -1
|
@@ -139,7 +139,7 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
139
139
|
<div className={styles.lcontainer}>
|
|
140
140
|
<div className={styles.lwrap}>
|
|
141
141
|
<aside className={styles.aside}></aside>
|
|
142
|
-
<div className=
|
|
142
|
+
<div className={styles.logincontainer}>
|
|
143
143
|
<form onSubmit={handleSubmit}>
|
|
144
144
|
<Reveal effect="fadeInUp">
|
|
145
145
|
<div className={styles.login}>
|
|
@@ -6,6 +6,8 @@ import { Person } from 'akar-icons';
|
|
|
6
6
|
|
|
7
7
|
import CustomFetch from '../Fetch';
|
|
8
8
|
|
|
9
|
+
import styles from './styles/Reset.module.css';
|
|
10
|
+
|
|
9
11
|
const Reset = ({ logo }) => {
|
|
10
12
|
const [email, setEmail] = useState('');
|
|
11
13
|
const [emailClass, setEmailClass] = useState('');
|
|
@@ -38,23 +40,27 @@ const Reset = ({ logo }) => {
|
|
|
38
40
|
};
|
|
39
41
|
|
|
40
42
|
return (
|
|
41
|
-
<div className=
|
|
42
|
-
<div className=
|
|
43
|
-
<aside className=
|
|
44
|
-
<div className=
|
|
43
|
+
<div className={styles.lcontainer}>
|
|
44
|
+
<div className={styles.lwrap}>
|
|
45
|
+
<aside className={styles.aside}></aside>
|
|
46
|
+
<div className={styles.logincontainer}>
|
|
45
47
|
<form onSubmit={handleSubmit}>
|
|
46
48
|
<Reveal effect="fadeInUp">
|
|
47
|
-
<div className=
|
|
49
|
+
<div className={styles.login}>
|
|
48
50
|
<img
|
|
49
51
|
src={logo}
|
|
50
52
|
alt="CRM"
|
|
51
|
-
className=
|
|
53
|
+
className={styles.loginlogo}
|
|
52
54
|
/>
|
|
53
|
-
<div
|
|
55
|
+
<div
|
|
56
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
57
|
+
>
|
|
54
58
|
<h1>Forgot your password?</h1>
|
|
55
59
|
</div>
|
|
56
|
-
<div
|
|
57
|
-
|
|
60
|
+
<div
|
|
61
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
62
|
+
>
|
|
63
|
+
<label className={styles.fi__label}>
|
|
58
64
|
<input
|
|
59
65
|
type="email"
|
|
60
66
|
name="email"
|
|
@@ -66,15 +72,19 @@ const Reset = ({ logo }) => {
|
|
|
66
72
|
tabIndex="1"
|
|
67
73
|
className={emailClass}
|
|
68
74
|
/>
|
|
69
|
-
<span className=
|
|
75
|
+
<span className={styles.fi__span}>
|
|
76
|
+
Email
|
|
77
|
+
</span>
|
|
70
78
|
<small>
|
|
71
79
|
<Person strokeWidth={2} size={18} />
|
|
72
80
|
</small>
|
|
73
81
|
</label>
|
|
74
82
|
</div>
|
|
75
|
-
<div
|
|
83
|
+
<div
|
|
84
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
|
|
85
|
+
>
|
|
76
86
|
<button
|
|
77
|
-
className=
|
|
87
|
+
className={styles.btn}
|
|
78
88
|
type="submit"
|
|
79
89
|
tabIndex="2"
|
|
80
90
|
>
|
|
@@ -92,23 +92,27 @@ const Verify = ({ logo }) => {
|
|
|
92
92
|
};
|
|
93
93
|
|
|
94
94
|
return (
|
|
95
|
-
<div className=
|
|
96
|
-
<div className=
|
|
97
|
-
<aside className=
|
|
98
|
-
<div className=
|
|
95
|
+
<div className={styles.lcontainer}>
|
|
96
|
+
<div className={styles.lwrap}>
|
|
97
|
+
<aside className={styles.aside}></aside>
|
|
98
|
+
<div className={styles.logincontainer}>
|
|
99
99
|
<form onSubmit={handleSubmit}>
|
|
100
100
|
<Reveal effect="fadeInUp">
|
|
101
|
-
<div className=
|
|
101
|
+
<div className={styles.login}>
|
|
102
102
|
<img
|
|
103
103
|
src={logo}
|
|
104
104
|
alt="CRM"
|
|
105
|
-
className=
|
|
105
|
+
className={styles.loginlogo}
|
|
106
106
|
/>
|
|
107
|
-
<div
|
|
107
|
+
<div
|
|
108
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
109
|
+
>
|
|
108
110
|
<h1>Reset your password</h1>
|
|
109
111
|
</div>
|
|
110
|
-
<div
|
|
111
|
-
|
|
112
|
+
<div
|
|
113
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
114
|
+
>
|
|
115
|
+
<label className={styles.fi__label}>
|
|
112
116
|
<input
|
|
113
117
|
type="password"
|
|
114
118
|
name="password"
|
|
@@ -117,13 +121,15 @@ const Verify = ({ logo }) => {
|
|
|
117
121
|
tabIndex="1"
|
|
118
122
|
className={passwordClass}
|
|
119
123
|
/>
|
|
120
|
-
<span className=
|
|
124
|
+
<span className={styles.fi__span}>
|
|
121
125
|
Password
|
|
122
126
|
</span>
|
|
123
127
|
</label>
|
|
124
128
|
</div>
|
|
125
|
-
<div
|
|
126
|
-
|
|
129
|
+
<div
|
|
130
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
131
|
+
>
|
|
132
|
+
<label className={styles.fi__label}>
|
|
127
133
|
<input
|
|
128
134
|
type="password"
|
|
129
135
|
name="passwordRepeat"
|
|
@@ -132,14 +138,16 @@ const Verify = ({ logo }) => {
|
|
|
132
138
|
tabIndex="2"
|
|
133
139
|
className={passwordRepeatClass}
|
|
134
140
|
/>
|
|
135
|
-
<span className=
|
|
141
|
+
<span className={styles.fi__span}>
|
|
136
142
|
Re-type Password
|
|
137
143
|
</span>
|
|
138
144
|
</label>
|
|
139
145
|
</div>
|
|
140
|
-
<div
|
|
146
|
+
<div
|
|
147
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
|
|
148
|
+
>
|
|
141
149
|
<button
|
|
142
|
-
className=
|
|
150
|
+
className={styles.btn}
|
|
143
151
|
type="submit"
|
|
144
152
|
tabIndex="3"
|
|
145
153
|
>
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
.formItem {
|
|
2
|
+
width: 50%;
|
|
3
|
+
padding: 0.5em;
|
|
4
|
+
position: relative;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
|
|
7
|
+
.fi__label {
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.fi__span {
|
|
12
|
+
position: absolute;
|
|
13
|
+
transition: all 200ms;
|
|
14
|
+
opacity: 0.8;
|
|
15
|
+
left: 0;
|
|
16
|
+
padding: 19px 20px;
|
|
17
|
+
transform-origin: top left;
|
|
18
|
+
cursor: text;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.fi__div {
|
|
22
|
+
transition: all 200ms;
|
|
23
|
+
opacity: 0.8;
|
|
24
|
+
left: 0;
|
|
25
|
+
padding: 19px 13px;
|
|
26
|
+
border-radius: var(--br);
|
|
27
|
+
border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
|
|
28
|
+
box-shadow: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.fi__toggle {
|
|
32
|
+
width: max-content;
|
|
33
|
+
padding: 0px 10px 0px 0;
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
display: inline;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.fi__toggletxt {
|
|
39
|
+
position: relative;
|
|
40
|
+
left: 5px;
|
|
41
|
+
font-size: 0.95em;
|
|
42
|
+
top: -5px;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.fwItem {
|
|
47
|
+
flex-basis: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.lastItem {
|
|
51
|
+
.btn {
|
|
52
|
+
width: 100%;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.loginlogo {
|
|
57
|
+
display: block;
|
|
58
|
+
width: 100%;
|
|
59
|
+
max-width: 140px;
|
|
60
|
+
height: auto;
|
|
61
|
+
margin: 0 auto;
|
|
62
|
+
padding-bottom: 1rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.logincontainer {
|
|
66
|
+
margin-left: var(--sidebar-width);
|
|
67
|
+
min-height: 100vh;
|
|
68
|
+
flex-grow: 1;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
align-content: center;
|
|
73
|
+
flex-wrap: wrap;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.login {
|
|
77
|
+
width: 35rem;
|
|
78
|
+
height: auto;
|
|
79
|
+
padding: 1rem;
|
|
80
|
+
margin: 0;
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-wrap: wrap;
|
|
83
|
+
|
|
84
|
+
> .formItem {
|
|
85
|
+
padding: 0.25em 0;
|
|
86
|
+
|
|
87
|
+
small {
|
|
88
|
+
position: absolute;
|
|
89
|
+
width: 18px;
|
|
90
|
+
height: 18px;
|
|
91
|
+
right: 18px;
|
|
92
|
+
top: 18px;
|
|
93
|
+
opacity: 0.15;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
> .loginitem {
|
|
98
|
+
width: 100%;
|
|
99
|
+
padding: 0.25em 0;
|
|
100
|
+
|
|
101
|
+
label {
|
|
102
|
+
width: 100%;
|
|
103
|
+
padding-bottom: 0.25rem;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
button {
|
|
107
|
+
width: 100%;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.forgotten {
|
|
113
|
+
span {
|
|
114
|
+
display: block;
|
|
115
|
+
text-align: center;
|
|
116
|
+
color: var(--paragraph-color);
|
|
117
|
+
padding: 1rem 0;
|
|
118
|
+
|
|
119
|
+
a {
|
|
120
|
+
color: var(--highlight-color);
|
|
121
|
+
text-decoration: none;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.lcontainer {
|
|
127
|
+
--sidebar-width: 35%;
|
|
128
|
+
min-height: 100vh;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.lwrap {
|
|
132
|
+
display: flex;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.aside {
|
|
136
|
+
background: url('../images/loginbg.jpg') no-repeat;
|
|
137
|
+
background-size: cover;
|
|
138
|
+
opacity: 1;
|
|
139
|
+
position: fixed;
|
|
140
|
+
overflow: hidden;
|
|
141
|
+
height: 101%;
|
|
142
|
+
width: var(--sidebar-width);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.fwItem {
|
|
146
|
+
flex-basis: 100%;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.lastItem .btn {
|
|
150
|
+
width: 100%;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.login .formItem {
|
|
154
|
+
padding: 0.25em 0;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.login .formItem small {
|
|
158
|
+
position: absolute;
|
|
159
|
+
width: 18px;
|
|
160
|
+
height: 18px;
|
|
161
|
+
right: 18px;
|
|
162
|
+
top: 18px;
|
|
163
|
+
opacity: 0.15;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.login .loginitem {
|
|
167
|
+
width: 100%;
|
|
168
|
+
padding: 0.25em 0;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.login .loginitem label {
|
|
172
|
+
width: 100%;
|
|
173
|
+
padding-bottom: 0.25rem;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.login .loginitem button {
|
|
177
|
+
width: 100%;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.forgotten span {
|
|
181
|
+
display: block;
|
|
182
|
+
text-align: center;
|
|
183
|
+
color: var(--paragraph-color);
|
|
184
|
+
padding: 1rem 0;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.forgotten span a {
|
|
188
|
+
color: var(--highlight-color);
|
|
189
|
+
text-decoration: none;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.btn {
|
|
193
|
+
width: max-content;
|
|
194
|
+
display: inline-block;
|
|
195
|
+
position: relative;
|
|
196
|
+
padding: 0.65rem 1rem;
|
|
197
|
+
cursor: pointer;
|
|
198
|
+
font-size: 1rem;
|
|
199
|
+
color: var(--tertiary-color);
|
|
200
|
+
text-decoration: none;
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
background: var(--primary-color);
|
|
203
|
+
border: 1px solid rgba(var(--primary-color--rgb), 1.1);
|
|
204
|
+
border-radius: var(--br);
|
|
205
|
+
outline: none;
|
|
206
|
+
transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
|
|
207
|
+
font-size: 1.25em;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
input:not(:placeholder-shown) + .fi__span,
|
|
211
|
+
textarea:not(:placeholder-shown) + .fi__span,
|
|
212
|
+
select:not(:placeholder-shown) + .fi__span {
|
|
213
|
+
transform: translateY(-40%) translateX(10px) scale(0.75);
|
|
214
|
+
opacity: 1;
|
|
215
|
+
padding: 0 4px;
|
|
216
|
+
background: var(--tertiary-color);
|
|
217
|
+
font-weight: 300;
|
|
218
|
+
}
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
.formItem {
|
|
2
|
+
width: 50%;
|
|
3
|
+
padding: 0.5em;
|
|
4
|
+
position: relative;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
|
|
7
|
+
.fi__label {
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.fi__span {
|
|
12
|
+
position: absolute;
|
|
13
|
+
transition: all 200ms;
|
|
14
|
+
opacity: 0.8;
|
|
15
|
+
left: 0;
|
|
16
|
+
padding: 19px 20px;
|
|
17
|
+
transform-origin: top left;
|
|
18
|
+
cursor: text;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.fi__div {
|
|
22
|
+
transition: all 200ms;
|
|
23
|
+
opacity: 0.8;
|
|
24
|
+
left: 0;
|
|
25
|
+
padding: 19px 13px;
|
|
26
|
+
border-radius: var(--br);
|
|
27
|
+
border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
|
|
28
|
+
box-shadow: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.fi__toggle {
|
|
32
|
+
width: max-content;
|
|
33
|
+
padding: 0px 10px 0px 0;
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
display: inline;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.fi__toggletxt {
|
|
39
|
+
position: relative;
|
|
40
|
+
left: 5px;
|
|
41
|
+
font-size: 0.95em;
|
|
42
|
+
top: -5px;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.fwItem {
|
|
47
|
+
flex-basis: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.lastItem {
|
|
51
|
+
.btn {
|
|
52
|
+
width: 100%;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.loginlogo {
|
|
57
|
+
display: block;
|
|
58
|
+
width: 100%;
|
|
59
|
+
max-width: 140px;
|
|
60
|
+
height: auto;
|
|
61
|
+
margin: 0 auto;
|
|
62
|
+
padding-bottom: 1rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.logincontainer {
|
|
66
|
+
margin-left: var(--sidebar-width);
|
|
67
|
+
min-height: 100vh;
|
|
68
|
+
flex-grow: 1;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
align-content: center;
|
|
73
|
+
flex-wrap: wrap;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.login {
|
|
77
|
+
width: 35rem;
|
|
78
|
+
height: auto;
|
|
79
|
+
padding: 1rem;
|
|
80
|
+
margin: 0;
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-wrap: wrap;
|
|
83
|
+
|
|
84
|
+
> .formItem {
|
|
85
|
+
padding: 0.25em 0;
|
|
86
|
+
|
|
87
|
+
small {
|
|
88
|
+
position: absolute;
|
|
89
|
+
width: 18px;
|
|
90
|
+
height: 18px;
|
|
91
|
+
right: 18px;
|
|
92
|
+
top: 18px;
|
|
93
|
+
opacity: 0.15;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
> .loginitem {
|
|
98
|
+
width: 100%;
|
|
99
|
+
padding: 0.25em 0;
|
|
100
|
+
|
|
101
|
+
label {
|
|
102
|
+
width: 100%;
|
|
103
|
+
padding-bottom: 0.25rem;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
button {
|
|
107
|
+
width: 100%;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.forgotten {
|
|
113
|
+
span {
|
|
114
|
+
display: block;
|
|
115
|
+
text-align: center;
|
|
116
|
+
color: var(--paragraph-color);
|
|
117
|
+
padding: 1rem 0;
|
|
118
|
+
|
|
119
|
+
a {
|
|
120
|
+
color: var(--highlight-color);
|
|
121
|
+
text-decoration: none;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.lcontainer {
|
|
127
|
+
--sidebar-width: 35%;
|
|
128
|
+
min-height: 100vh;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.lwrap {
|
|
132
|
+
display: flex;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.aside {
|
|
136
|
+
background: url('../images/loginbg.jpg') no-repeat;
|
|
137
|
+
background-size: cover;
|
|
138
|
+
opacity: 1;
|
|
139
|
+
position: fixed;
|
|
140
|
+
overflow: hidden;
|
|
141
|
+
height: 101%;
|
|
142
|
+
width: var(--sidebar-width);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.fwItem {
|
|
146
|
+
flex-basis: 100%;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.lastItem .btn {
|
|
150
|
+
width: 100%;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.login .formItem {
|
|
154
|
+
padding: 0.25em 0;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.login .formItem small {
|
|
158
|
+
position: absolute;
|
|
159
|
+
width: 18px;
|
|
160
|
+
height: 18px;
|
|
161
|
+
right: 18px;
|
|
162
|
+
top: 18px;
|
|
163
|
+
opacity: 0.15;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.login .loginitem {
|
|
167
|
+
width: 100%;
|
|
168
|
+
padding: 0.25em 0;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.login .loginitem label {
|
|
172
|
+
width: 100%;
|
|
173
|
+
padding-bottom: 0.25rem;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.login .loginitem button {
|
|
177
|
+
width: 100%;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.forgotten span {
|
|
181
|
+
display: block;
|
|
182
|
+
text-align: center;
|
|
183
|
+
color: var(--paragraph-color);
|
|
184
|
+
padding: 1rem 0;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.forgotten span a {
|
|
188
|
+
color: var(--highlight-color);
|
|
189
|
+
text-decoration: none;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.btn {
|
|
193
|
+
width: max-content;
|
|
194
|
+
display: inline-block;
|
|
195
|
+
position: relative;
|
|
196
|
+
padding: 0.65rem 1rem;
|
|
197
|
+
cursor: pointer;
|
|
198
|
+
font-size: 1rem;
|
|
199
|
+
color: var(--tertiary-color);
|
|
200
|
+
text-decoration: none;
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
background: var(--primary-color);
|
|
203
|
+
border: 1px solid rgba(var(--primary-color--rgb), 1.1);
|
|
204
|
+
border-radius: var(--br);
|
|
205
|
+
outline: none;
|
|
206
|
+
transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
|
|
207
|
+
font-size: 1.25em;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
input:not(:placeholder-shown) + .fi__span,
|
|
211
|
+
textarea:not(:placeholder-shown) + .fi__span,
|
|
212
|
+
select:not(:placeholder-shown) + .fi__span {
|
|
213
|
+
transform: translateY(-40%) translateX(10px) scale(0.75);
|
|
214
|
+
opacity: 1;
|
|
215
|
+
padding: 0 4px;
|
|
216
|
+
background: var(--tertiary-color);
|
|
217
|
+
font-weight: 300;
|
|
218
|
+
}
|
|
@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
|
|
|
3
3
|
import dayjs from 'dayjs';
|
|
4
4
|
import Breadcrumb from '../Breadcrumb';
|
|
5
5
|
import CustomFetch from '../Fetch';
|
|
6
|
+
import styles from './styles/AuditLog.module.css';
|
|
6
7
|
|
|
7
8
|
const AuditLog = ({ userProfile }) => {
|
|
8
9
|
const routeParams = useParams();
|
|
@@ -23,9 +24,9 @@ const AuditLog = ({ userProfile }) => {
|
|
|
23
24
|
|
|
24
25
|
return (
|
|
25
26
|
<div>
|
|
26
|
-
<div className=
|
|
27
|
-
<div className=
|
|
28
|
-
<div className=
|
|
27
|
+
<div className={styles.grid}>
|
|
28
|
+
<div className={styles.grid__row}>
|
|
29
|
+
<div className={`${styles.grid__full} ${styles.crmtitle}`}>
|
|
29
30
|
<Breadcrumb
|
|
30
31
|
data={data}
|
|
31
32
|
page={{
|
|
@@ -37,11 +38,11 @@ const AuditLog = ({ userProfile }) => {
|
|
|
37
38
|
</div>
|
|
38
39
|
</div>
|
|
39
40
|
</div>
|
|
40
|
-
<div className=
|
|
41
|
-
<div className=
|
|
42
|
-
<div className=
|
|
43
|
-
<div className=
|
|
44
|
-
<ul className=
|
|
41
|
+
<div className={styles.grid}>
|
|
42
|
+
<div className={styles.grid__subrow}>
|
|
43
|
+
<div className={styles.grid__full}>
|
|
44
|
+
<div className={styles.gridtxt}>
|
|
45
|
+
<ul className={styles.customer__overview}>
|
|
45
46
|
<li>
|
|
46
47
|
<strong>User:</strong>
|
|
47
48
|
{` ${data?.user?.name}`}
|
|
@@ -68,7 +69,9 @@ const AuditLog = ({ userProfile }) => {
|
|
|
68
69
|
<strong>Event:</strong>
|
|
69
70
|
{` ${data?.formatted_event}`}
|
|
70
71
|
</li>
|
|
71
|
-
<li
|
|
72
|
+
<li
|
|
73
|
+
className={`${styles['fw-grid-item']} ${styles.notecolor}`}
|
|
74
|
+
>
|
|
72
75
|
<strong>Old Value(s):</strong>
|
|
73
76
|
<br />
|
|
74
77
|
<pre>
|
|
@@ -79,7 +82,9 @@ const AuditLog = ({ userProfile }) => {
|
|
|
79
82
|
)}
|
|
80
83
|
</pre>
|
|
81
84
|
</li>
|
|
82
|
-
<li
|
|
85
|
+
<li
|
|
86
|
+
className={`${styles['fw-grid-item']} ${styles.notecolor}`}
|
|
87
|
+
>
|
|
83
88
|
<strong>New Value(s):</strong>
|
|
84
89
|
<br />
|
|
85
90
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Table from '../DataGrid';
|
|
3
|
+
import styles from './styles/AuditLogs.module.css';
|
|
3
4
|
|
|
4
5
|
const AuditLogs = () => {
|
|
5
6
|
const setting = {
|
|
@@ -82,16 +83,16 @@ const AuditLogs = () => {
|
|
|
82
83
|
|
|
83
84
|
return (
|
|
84
85
|
<div>
|
|
85
|
-
<div className=
|
|
86
|
-
<div className=
|
|
87
|
-
<div className=
|
|
86
|
+
<div className={styles.grid}>
|
|
87
|
+
<div className={styles.grid__row}>
|
|
88
|
+
<div className={`${styles.grid__full} ${styles.crmtitle}`}>
|
|
88
89
|
<h1>Audit Log</h1>
|
|
89
90
|
</div>
|
|
90
91
|
</div>
|
|
91
92
|
</div>
|
|
92
|
-
<div className=
|
|
93
|
-
<div className=
|
|
94
|
-
<div className=
|
|
93
|
+
<div className={styles.grid}>
|
|
94
|
+
<div className={styles.grid__row}>
|
|
95
|
+
<div className={styles.grid__full}>
|
|
95
96
|
<Table
|
|
96
97
|
ajaxSetting={setting.ajaxSetting}
|
|
97
98
|
form={setting.form}
|
|
@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
|
|
|
5
5
|
import { CircleChevronRight } from 'akar-icons';
|
|
6
6
|
import CustomFetch from '../../crm/Fetch';
|
|
7
7
|
import SortableList from '../../cms/sorting/List';
|
|
8
|
+
import styles from './styles/GenericSort.module.css';
|
|
8
9
|
|
|
9
10
|
const ChildSort = ({ item, url }) => {
|
|
10
11
|
const [data, setData] = useState(item.child);
|
|
@@ -120,9 +121,9 @@ const GenericSort = ({ category = false }) => {
|
|
|
120
121
|
|
|
121
122
|
return (
|
|
122
123
|
<>
|
|
123
|
-
<div className=
|
|
124
|
-
<div className=
|
|
125
|
-
<div className=
|
|
124
|
+
<div className={styles.grid}>
|
|
125
|
+
<div className={styles.grid__row}>
|
|
126
|
+
<div className={`${styles.grid__full} ${styles.crmtitle}`}>
|
|
126
127
|
<h1>
|
|
127
128
|
<Link
|
|
128
129
|
to={
|
|
@@ -156,9 +157,9 @@ const GenericSort = ({ category = false }) => {
|
|
|
156
157
|
</div>
|
|
157
158
|
</div>
|
|
158
159
|
</div>
|
|
159
|
-
<div className=
|
|
160
|
-
<div className=
|
|
161
|
-
<div className=
|
|
160
|
+
<div className={styles.grid}>
|
|
161
|
+
<div className={styles.grid__row}>
|
|
162
|
+
<div className={styles.grid__full}>
|
|
162
163
|
{category === false ? (
|
|
163
164
|
<SortableList
|
|
164
165
|
items={sortData}
|
|
@@ -38,16 +38,16 @@ const NotificationList = () => {
|
|
|
38
38
|
|
|
39
39
|
return (
|
|
40
40
|
<div>
|
|
41
|
-
<div className=
|
|
42
|
-
<div className=
|
|
43
|
-
<div className=
|
|
41
|
+
<div className={styles.grid}>
|
|
42
|
+
<div className={styles.grid__row}>
|
|
43
|
+
<div className={`${styles.grid__full} ${styles.crmtitle}`}>
|
|
44
44
|
<h1>Notifications</h1>
|
|
45
45
|
</div>
|
|
46
46
|
</div>
|
|
47
47
|
</div>
|
|
48
|
-
<div className=
|
|
49
|
-
<div className=
|
|
50
|
-
<div className=
|
|
48
|
+
<div className={styles.grid}>
|
|
49
|
+
<div className={styles.grid__row}>
|
|
50
|
+
<div className={styles.grid__full}>
|
|
51
51
|
<Table
|
|
52
52
|
ajaxSetting={ajaxSetting}
|
|
53
53
|
form={form}
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
.grid {
|
|
2
|
+
width: 100%;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: flex-start;
|
|
5
|
+
flex-wrap: nowrap;
|
|
6
|
+
height: auto;
|
|
7
|
+
gap: 1rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.grid__row {
|
|
11
|
+
width: 100%;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
flex-wrap: nowrap;
|
|
15
|
+
height: auto;
|
|
16
|
+
gap: 1rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.grid__subrow {
|
|
20
|
+
width: 100%;
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-wrap: wrap;
|
|
23
|
+
height: auto;
|
|
24
|
+
gap: 0.5rem;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.grid__full {
|
|
28
|
+
width: 100%;
|
|
29
|
+
background: var(--item-color);
|
|
30
|
+
border-radius: var(--br);
|
|
31
|
+
border: 1px solid rgba(var(--item-color-rgb), 1.15);
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
overflow: visible;
|
|
34
|
+
position: relative;
|
|
35
|
+
padding: 2px;
|
|
36
|
+
margin: 8px 0;
|
|
37
|
+
box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.crmtitle {
|
|
41
|
+
border: none;
|
|
42
|
+
min-height: auto;
|
|
43
|
+
padding: 5px 20px;
|
|
44
|
+
margin: 0;
|
|
45
|
+
background: var(--primary-color);
|
|
46
|
+
border-radius: var(--br);
|
|
47
|
+
border: 1px solid rgba(var(--item-color-rgb), 1.15);
|
|
48
|
+
position: relative;
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
|
|
52
|
+
h1 {
|
|
53
|
+
color: var(--background-color);
|
|
54
|
+
font-weight: 700;
|
|
55
|
+
font-size: 1.15em;
|
|
56
|
+
margin: 0;
|
|
57
|
+
padding: 0.65rem 0;
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
gap: 0.25rem;
|
|
61
|
+
|
|
62
|
+
a {
|
|
63
|
+
text-decoration: none;
|
|
64
|
+
color: var(--secondary-color);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
svg {
|
|
68
|
+
color: rgba(var(--tertiary-color-rgb), 0.5);
|
|
69
|
+
position: relative;
|
|
70
|
+
top: 0;
|
|
71
|
+
margin: 0 0.5rem;
|
|
72
|
+
max-width: 15px;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.gridtxt__header {
|
|
78
|
+
width: 100%;
|
|
79
|
+
display: block;
|
|
80
|
+
background: rgba(var(--item-color-rgb), 1.05);
|
|
81
|
+
box-sizing: border-box;
|
|
82
|
+
padding: 10px 20px;
|
|
83
|
+
border-radius: 0;
|
|
84
|
+
margin-bottom: 0;
|
|
85
|
+
font-weight: 700;
|
|
86
|
+
text-align: center;
|
|
87
|
+
color: var(--paragraph-color);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.gridtxt__header span {
|
|
91
|
+
font-weight: 700;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.gridtxt > ul {
|
|
95
|
+
width: 100%;
|
|
96
|
+
display: flex;
|
|
97
|
+
justify-content: flex-start;
|
|
98
|
+
flex-direction: row;
|
|
99
|
+
flex-wrap: wrap;
|
|
100
|
+
list-style: none;
|
|
101
|
+
box-sizing: border-box;
|
|
102
|
+
padding: 0.85rem;
|
|
103
|
+
margin: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.gridtxt > ul li {
|
|
107
|
+
flex: 0 0 calc(50% - 10px);
|
|
108
|
+
padding: 0.85rem;
|
|
109
|
+
box-sizing: border-box;
|
|
110
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.15);
|
|
111
|
+
color: var(--paragraph-color);
|
|
112
|
+
background: rgba(var(--tertiary-color-rgb), 0.95);
|
|
113
|
+
margin: 5px;
|
|
114
|
+
border-radius: var(--br);
|
|
115
|
+
line-height: 1.45;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.gridtxt > ul .fw-grid-item {
|
|
119
|
+
flex: 0 0 calc(100% - 10px);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.gridtxt > ul .notecolor {
|
|
123
|
+
border: 1px solid var(--secondary-color);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.customer__overview {
|
|
127
|
+
width: 100%;
|
|
128
|
+
display: flex;
|
|
129
|
+
justify-content: flex-start;
|
|
130
|
+
flex-direction: row;
|
|
131
|
+
flex-wrap: wrap;
|
|
132
|
+
list-style: none;
|
|
133
|
+
box-sizing: border-box;
|
|
134
|
+
padding: 1em;
|
|
135
|
+
margin: 0;
|
|
136
|
+
|
|
137
|
+
li {
|
|
138
|
+
width: 49%;
|
|
139
|
+
padding: 1em;
|
|
140
|
+
box-sizing: border-box;
|
|
141
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.15);
|
|
142
|
+
color: var(--paragraph-color);
|
|
143
|
+
background: rgba(#f4f4f4, 0.65);
|
|
144
|
+
margin: 5px;
|
|
145
|
+
border-radius: 5px;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
.grid {
|
|
2
|
+
width: 100%;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: flex-start;
|
|
5
|
+
flex-wrap: nowrap;
|
|
6
|
+
height: auto;
|
|
7
|
+
gap: 1rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.grid__row {
|
|
11
|
+
width: 100%;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
flex-wrap: nowrap;
|
|
15
|
+
height: auto;
|
|
16
|
+
gap: 1rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.grid__full {
|
|
20
|
+
width: 100%;
|
|
21
|
+
background: var(--item-color);
|
|
22
|
+
border-radius: var(--br);
|
|
23
|
+
border: 1px solid rgba(var(--item-color-rgb), 1.15);
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
overflow: visible;
|
|
26
|
+
position: relative;
|
|
27
|
+
padding: 2px;
|
|
28
|
+
margin: 8px 0;
|
|
29
|
+
box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.crmtitle {
|
|
33
|
+
border: none;
|
|
34
|
+
min-height: auto;
|
|
35
|
+
padding: 5px 20px;
|
|
36
|
+
margin: 0;
|
|
37
|
+
background: var(--primary-color);
|
|
38
|
+
border-radius: var(--br);
|
|
39
|
+
border: 1px solid rgba(var(--item-color-rgb), 1.15);
|
|
40
|
+
position: relative;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
|
|
44
|
+
h1 {
|
|
45
|
+
color: var(--background-color);
|
|
46
|
+
font-weight: 700;
|
|
47
|
+
font-size: 1.15em;
|
|
48
|
+
margin: 0;
|
|
49
|
+
padding: 0.65rem 0;
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 0.25rem;
|
|
53
|
+
|
|
54
|
+
a {
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
color: var(--secondary-color);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
svg {
|
|
60
|
+
color: rgba(var(--tertiary-color-rgb), 0.5);
|
|
61
|
+
position: relative;
|
|
62
|
+
top: 0;
|
|
63
|
+
margin: 0 0.5rem;
|
|
64
|
+
max-width: 15px;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
.grid {
|
|
2
|
+
width: 100%;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: flex-start;
|
|
5
|
+
flex-wrap: nowrap;
|
|
6
|
+
height: auto;
|
|
7
|
+
gap: 1rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.grid__row {
|
|
11
|
+
width: 100%;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
flex-wrap: nowrap;
|
|
15
|
+
height: auto;
|
|
16
|
+
gap: 1rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.grid__full {
|
|
20
|
+
width: 100%;
|
|
21
|
+
background: var(--item-color);
|
|
22
|
+
border-radius: var(--br);
|
|
23
|
+
border: 1px solid rgba(var(--item-color-rgb), 1.15);
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
overflow: visible;
|
|
26
|
+
position: relative;
|
|
27
|
+
padding: 2px;
|
|
28
|
+
margin: 8px 0;
|
|
29
|
+
box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.crmtitle {
|
|
33
|
+
border: none;
|
|
34
|
+
min-height: auto;
|
|
35
|
+
padding: 5px 20px;
|
|
36
|
+
margin: 0;
|
|
37
|
+
background: var(--primary-color);
|
|
38
|
+
border-radius: var(--br);
|
|
39
|
+
border: 1px solid rgba(var(--item-color-rgb), 1.15);
|
|
40
|
+
position: relative;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
|
|
44
|
+
h1 {
|
|
45
|
+
color: var(--background-color);
|
|
46
|
+
font-weight: 700;
|
|
47
|
+
font-size: 1.15em;
|
|
48
|
+
margin: 0;
|
|
49
|
+
padding: 0.65rem 0;
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 0.25rem;
|
|
53
|
+
|
|
54
|
+
a {
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
color: var(--secondary-color);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
svg {
|
|
60
|
+
color: rgba(var(--tertiary-color-rgb), 0.5);
|
|
61
|
+
position: relative;
|
|
62
|
+
top: 0;
|
|
63
|
+
margin: 0 0.5rem;
|
|
64
|
+
max-width: 15px;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
.grid {
|
|
2
|
+
width: 100%;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: flex-start;
|
|
5
|
+
flex-wrap: nowrap;
|
|
6
|
+
height: auto;
|
|
7
|
+
gap: 1rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.grid__row {
|
|
11
|
+
width: 100%;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
flex-wrap: nowrap;
|
|
15
|
+
height: auto;
|
|
16
|
+
gap: 1rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.grid__full {
|
|
20
|
+
width: 100%;
|
|
21
|
+
background: var(--item-color);
|
|
22
|
+
border-radius: var(--br);
|
|
23
|
+
border: 1px solid rgba(var(--item-color-rgb), 1.15);
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
overflow: visible;
|
|
26
|
+
position: relative;
|
|
27
|
+
padding: 2px;
|
|
28
|
+
margin: 8px 0;
|
|
29
|
+
box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.crmtitle {
|
|
33
|
+
border: none;
|
|
34
|
+
min-height: auto;
|
|
35
|
+
padding: 5px 20px;
|
|
36
|
+
margin: 0;
|
|
37
|
+
background: var(--primary-color);
|
|
38
|
+
border-radius: var(--br);
|
|
39
|
+
border: 1px solid rgba(var(--item-color-rgb), 1.15);
|
|
40
|
+
position: relative;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
|
|
44
|
+
h1 {
|
|
45
|
+
color: var(--background-color);
|
|
46
|
+
font-weight: 700;
|
|
47
|
+
font-size: 1.15em;
|
|
48
|
+
margin: 0;
|
|
49
|
+
padding: 0.65rem 0;
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 0.25rem;
|
|
53
|
+
|
|
54
|
+
a {
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
color: var(--secondary-color);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
svg {
|
|
60
|
+
color: rgba(var(--tertiary-color-rgb), 0.5);
|
|
61
|
+
position: relative;
|
|
62
|
+
top: 0;
|
|
63
|
+
margin: 0 0.5rem;
|
|
64
|
+
max-width: 15px;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
package/package.json
CHANGED