@visns-studio/visns-components 4.4.4 → 4.4.6
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/Fetch.jsx +26 -0
- package/components/crm/Field.jsx +2 -0
- package/components/crm/auth/Login.jsx +3 -1
- package/components/crm/auth/Reset.jsx +24 -12
- package/components/crm/auth/Verify.jsx +25 -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/GenericDetail.jsx +2 -0
- package/components/crm/generic/GenericIndex.jsx +2 -0
- 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/components/styles/global.css +52 -1
- package/package.json +3 -2
package/components/crm/Fetch.jsx
CHANGED
|
@@ -16,6 +16,32 @@ const CustomFetch = (
|
|
|
16
16
|
'Content-Type': 'application/json',
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
+
const MAX_PAYLOAD_SIZE = 4.5 * 1024 * 1024; // 4.5MB in bytes
|
|
20
|
+
|
|
21
|
+
// Estimate headers size
|
|
22
|
+
const headersSize = JSON.stringify(headers).length;
|
|
23
|
+
|
|
24
|
+
// Estimate cookies size (if any)
|
|
25
|
+
const cookies = document.cookie;
|
|
26
|
+
const cookiesSize = cookies ? cookies.length : 0;
|
|
27
|
+
|
|
28
|
+
// Check payload size
|
|
29
|
+
const payloadSize = new Blob([JSON.stringify(formData)]).size;
|
|
30
|
+
const totalRequestSize = payloadSize + headersSize + cookiesSize;
|
|
31
|
+
|
|
32
|
+
console.info(totalRequestSize);
|
|
33
|
+
|
|
34
|
+
if (totalRequestSize > MAX_PAYLOAD_SIZE) {
|
|
35
|
+
const errorMessage =
|
|
36
|
+
'The request is too large. Please try again with a smaller payload.';
|
|
37
|
+
if (errorCallback) {
|
|
38
|
+
errorCallback(errorMessage);
|
|
39
|
+
} else {
|
|
40
|
+
toast.error(errorMessage);
|
|
41
|
+
}
|
|
42
|
+
return Promise.reject(new Error(errorMessage));
|
|
43
|
+
}
|
|
44
|
+
|
|
19
45
|
if (method.toUpperCase() === 'PUT' || method.toUpperCase() === 'PATCH') {
|
|
20
46
|
formData = {
|
|
21
47
|
...formData,
|
package/components/crm/Field.jsx
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import '../../styles/global.css';
|
|
2
|
+
|
|
1
3
|
import React, { useState } from 'react';
|
|
2
4
|
import { Link, useLocation } from 'react-router-dom';
|
|
3
5
|
import Reveal from 'react-reveal/Reveal';
|
|
@@ -139,7 +141,7 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
139
141
|
<div className={styles.lcontainer}>
|
|
140
142
|
<div className={styles.lwrap}>
|
|
141
143
|
<aside className={styles.aside}></aside>
|
|
142
|
-
<div className=
|
|
144
|
+
<div className={styles.logincontainer}>
|
|
143
145
|
<form onSubmit={handleSubmit}>
|
|
144
146
|
<Reveal effect="fadeInUp">
|
|
145
147
|
<div className={styles.login}>
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import '../../styles/global.css';
|
|
2
|
+
|
|
1
3
|
import React, { useState } from 'react';
|
|
2
4
|
import Reveal from 'react-reveal/Reveal';
|
|
3
5
|
import { toast } from 'react-toastify';
|
|
@@ -6,6 +8,8 @@ import { Person } from 'akar-icons';
|
|
|
6
8
|
|
|
7
9
|
import CustomFetch from '../Fetch';
|
|
8
10
|
|
|
11
|
+
import styles from './styles/Reset.module.css';
|
|
12
|
+
|
|
9
13
|
const Reset = ({ logo }) => {
|
|
10
14
|
const [email, setEmail] = useState('');
|
|
11
15
|
const [emailClass, setEmailClass] = useState('');
|
|
@@ -38,23 +42,27 @@ const Reset = ({ logo }) => {
|
|
|
38
42
|
};
|
|
39
43
|
|
|
40
44
|
return (
|
|
41
|
-
<div className=
|
|
42
|
-
<div className=
|
|
43
|
-
<aside className=
|
|
44
|
-
<div className=
|
|
45
|
+
<div className={styles.lcontainer}>
|
|
46
|
+
<div className={styles.lwrap}>
|
|
47
|
+
<aside className={styles.aside}></aside>
|
|
48
|
+
<div className={styles.logincontainer}>
|
|
45
49
|
<form onSubmit={handleSubmit}>
|
|
46
50
|
<Reveal effect="fadeInUp">
|
|
47
|
-
<div className=
|
|
51
|
+
<div className={styles.login}>
|
|
48
52
|
<img
|
|
49
53
|
src={logo}
|
|
50
54
|
alt="CRM"
|
|
51
|
-
className=
|
|
55
|
+
className={styles.loginlogo}
|
|
52
56
|
/>
|
|
53
|
-
<div
|
|
57
|
+
<div
|
|
58
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
59
|
+
>
|
|
54
60
|
<h1>Forgot your password?</h1>
|
|
55
61
|
</div>
|
|
56
|
-
<div
|
|
57
|
-
|
|
62
|
+
<div
|
|
63
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
64
|
+
>
|
|
65
|
+
<label className={styles.fi__label}>
|
|
58
66
|
<input
|
|
59
67
|
type="email"
|
|
60
68
|
name="email"
|
|
@@ -66,15 +74,19 @@ const Reset = ({ logo }) => {
|
|
|
66
74
|
tabIndex="1"
|
|
67
75
|
className={emailClass}
|
|
68
76
|
/>
|
|
69
|
-
<span className=
|
|
77
|
+
<span className={styles.fi__span}>
|
|
78
|
+
Email
|
|
79
|
+
</span>
|
|
70
80
|
<small>
|
|
71
81
|
<Person strokeWidth={2} size={18} />
|
|
72
82
|
</small>
|
|
73
83
|
</label>
|
|
74
84
|
</div>
|
|
75
|
-
<div
|
|
85
|
+
<div
|
|
86
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
|
|
87
|
+
>
|
|
76
88
|
<button
|
|
77
|
-
className=
|
|
89
|
+
className={styles.btn}
|
|
78
90
|
type="submit"
|
|
79
91
|
tabIndex="2"
|
|
80
92
|
>
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import '../../styles/global.css';
|
|
2
|
+
|
|
1
3
|
import React, { useState } from 'react';
|
|
2
4
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
3
5
|
import { toast } from 'react-toastify';
|
|
@@ -92,23 +94,27 @@ const Verify = ({ logo }) => {
|
|
|
92
94
|
};
|
|
93
95
|
|
|
94
96
|
return (
|
|
95
|
-
<div className=
|
|
96
|
-
<div className=
|
|
97
|
-
<aside className=
|
|
98
|
-
<div className=
|
|
97
|
+
<div className={styles.lcontainer}>
|
|
98
|
+
<div className={styles.lwrap}>
|
|
99
|
+
<aside className={styles.aside}></aside>
|
|
100
|
+
<div className={styles.logincontainer}>
|
|
99
101
|
<form onSubmit={handleSubmit}>
|
|
100
102
|
<Reveal effect="fadeInUp">
|
|
101
|
-
<div className=
|
|
103
|
+
<div className={styles.login}>
|
|
102
104
|
<img
|
|
103
105
|
src={logo}
|
|
104
106
|
alt="CRM"
|
|
105
|
-
className=
|
|
107
|
+
className={styles.loginlogo}
|
|
106
108
|
/>
|
|
107
|
-
<div
|
|
109
|
+
<div
|
|
110
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
111
|
+
>
|
|
108
112
|
<h1>Reset your password</h1>
|
|
109
113
|
</div>
|
|
110
|
-
<div
|
|
111
|
-
|
|
114
|
+
<div
|
|
115
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
116
|
+
>
|
|
117
|
+
<label className={styles.fi__label}>
|
|
112
118
|
<input
|
|
113
119
|
type="password"
|
|
114
120
|
name="password"
|
|
@@ -117,13 +123,15 @@ const Verify = ({ logo }) => {
|
|
|
117
123
|
tabIndex="1"
|
|
118
124
|
className={passwordClass}
|
|
119
125
|
/>
|
|
120
|
-
<span className=
|
|
126
|
+
<span className={styles.fi__span}>
|
|
121
127
|
Password
|
|
122
128
|
</span>
|
|
123
129
|
</label>
|
|
124
130
|
</div>
|
|
125
|
-
<div
|
|
126
|
-
|
|
131
|
+
<div
|
|
132
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
133
|
+
>
|
|
134
|
+
<label className={styles.fi__label}>
|
|
127
135
|
<input
|
|
128
136
|
type="password"
|
|
129
137
|
name="passwordRepeat"
|
|
@@ -132,14 +140,16 @@ const Verify = ({ logo }) => {
|
|
|
132
140
|
tabIndex="2"
|
|
133
141
|
className={passwordRepeatClass}
|
|
134
142
|
/>
|
|
135
|
-
<span className=
|
|
143
|
+
<span className={styles.fi__span}>
|
|
136
144
|
Re-type Password
|
|
137
145
|
</span>
|
|
138
146
|
</label>
|
|
139
147
|
</div>
|
|
140
|
-
<div
|
|
148
|
+
<div
|
|
149
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
|
|
150
|
+
>
|
|
141
151
|
<button
|
|
142
|
-
className=
|
|
152
|
+
className={styles.btn}
|
|
143
153
|
type="submit"
|
|
144
154
|
tabIndex="3"
|
|
145
155
|
>
|
|
@@ -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
|
+
}
|
|
@@ -1,3 +1,55 @@
|
|
|
1
|
+
@import '@fontsource/barlow/index.css';
|
|
2
|
+
@import '@fontsource/barlow/300.css';
|
|
3
|
+
@import '@fontsource/barlow/700.css';
|
|
4
|
+
|
|
5
|
+
/* Apply the crop mixin manually */
|
|
6
|
+
.crop::before {
|
|
7
|
+
content: '';
|
|
8
|
+
display: block;
|
|
9
|
+
height: 0;
|
|
10
|
+
width: 0;
|
|
11
|
+
margin-top: calc((1 - 1.25) * 0.5em);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-size: 100%;
|
|
16
|
+
background: var(--tertiary-color);
|
|
17
|
+
font-family: 'Barlow', sans-serif;
|
|
18
|
+
font-weight: 300;
|
|
19
|
+
font-style: normal;
|
|
20
|
+
letter-spacing: 0.018em;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.loginbg {
|
|
24
|
+
background: var(--tertiary-color);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
h1,
|
|
28
|
+
h2,
|
|
29
|
+
h3,
|
|
30
|
+
h4,
|
|
31
|
+
h5 {
|
|
32
|
+
font-size: 1.675em;
|
|
33
|
+
color: var(--primary-color);
|
|
34
|
+
font-weight: 700;
|
|
35
|
+
font-style: normal;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
p {
|
|
39
|
+
font-weight: 300;
|
|
40
|
+
font-style: normal;
|
|
41
|
+
margin: 0 0 calc(var(--padding) / 2); /* Replace with actual padding value */
|
|
42
|
+
color: var(--paragraph-color);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
p::before {
|
|
46
|
+
content: '';
|
|
47
|
+
display: block;
|
|
48
|
+
height: 0;
|
|
49
|
+
width: 0;
|
|
50
|
+
margin-top: calc((1 - 1.25) * 0.5em);
|
|
51
|
+
}
|
|
52
|
+
|
|
1
53
|
textarea,
|
|
2
54
|
select,
|
|
3
55
|
input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
|
|
@@ -18,7 +70,6 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
|
|
|
18
70
|
background: rgba(white, 0.5);
|
|
19
71
|
color: var(--paragraph-color);
|
|
20
72
|
transition: border 0.15s linear;
|
|
21
|
-
font-size: 1.25em;
|
|
22
73
|
|
|
23
74
|
&:hover {
|
|
24
75
|
border: 1px solid var(--primary-color);
|
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"dependencies": {
|
|
3
|
+
"@fontsource/barlow": "^5.0.13",
|
|
3
4
|
"@inovua/reactdatagrid-community": "^5.10.2",
|
|
4
5
|
"@nivo/bar": "^0.87.0",
|
|
5
6
|
"@nivo/core": "^0.87.0",
|
|
@@ -13,7 +14,7 @@
|
|
|
13
14
|
"axios": "^1.7.2",
|
|
14
15
|
"dayjs": "^1.11.11",
|
|
15
16
|
"file-saver": "^2.0.5",
|
|
16
|
-
"framer-motion": "^11.
|
|
17
|
+
"framer-motion": "^11.3.4",
|
|
17
18
|
"html-react-parser": "^5.1.10",
|
|
18
19
|
"lodash": "^4.17.21",
|
|
19
20
|
"lodash.debounce": "^4.0.8",
|
|
@@ -57,7 +58,7 @@
|
|
|
57
58
|
"react-dom": "^17.0.1"
|
|
58
59
|
},
|
|
59
60
|
"name": "@visns-studio/visns-components",
|
|
60
|
-
"version": "4.4.
|
|
61
|
+
"version": "4.4.6",
|
|
61
62
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
62
63
|
"main": "index.js",
|
|
63
64
|
"scripts": {
|