@visns-studio/visns-components 4.4.3 → 4.4.4
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 +33 -16
- package/components/crm/auth/styles/Login.module.css +218 -0
- package/components/crm/generic/GenericDetail.jsx +102 -44
- package/components/crm/generic/GenericMain.jsx +6 -5
- package/components/crm/generic/styles/GenericDetail.module.css +578 -0
- package/components/crm/generic/styles/GenericIndex.module.css +178 -183
- package/components/crm/generic/styles/GenericMain.module.css +77 -0
- package/components/crm/styles/AsyncSelect.module.css +6 -10
- package/components/crm/styles/Autocomplete.module.css +3 -3
- package/components/crm/styles/DataGrid.module.css +59 -59
- package/components/crm/styles/Form.module.css +17 -19
- package/components/crm/styles/MultiSelect.module.css +6 -10
- package/components/crm/styles/TableFilter.module.css +1 -0
- package/package.json +1 -1
|
@@ -6,6 +6,8 @@ import { Person, LockOff } from 'akar-icons';
|
|
|
6
6
|
|
|
7
7
|
import CustomFetch from '../Fetch';
|
|
8
8
|
|
|
9
|
+
import styles from './styles/Login.module.css';
|
|
10
|
+
|
|
9
11
|
const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
10
12
|
const location = useLocation();
|
|
11
13
|
|
|
@@ -35,9 +37,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
35
37
|
content = (
|
|
36
38
|
<>
|
|
37
39
|
{content}
|
|
38
|
-
<div
|
|
40
|
+
<div
|
|
41
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
|
|
42
|
+
>
|
|
39
43
|
<button
|
|
40
|
-
className=
|
|
44
|
+
className={styles.btn}
|
|
41
45
|
onClick={(e) => {
|
|
42
46
|
e.preventDefault();
|
|
43
47
|
|
|
@@ -132,20 +136,22 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
132
136
|
};
|
|
133
137
|
|
|
134
138
|
return (
|
|
135
|
-
<div className=
|
|
136
|
-
<div className=
|
|
137
|
-
<aside className=
|
|
139
|
+
<div className={styles.lcontainer}>
|
|
140
|
+
<div className={styles.lwrap}>
|
|
141
|
+
<aside className={styles.aside}></aside>
|
|
138
142
|
<div className="logincontainer">
|
|
139
143
|
<form onSubmit={handleSubmit}>
|
|
140
144
|
<Reveal effect="fadeInUp">
|
|
141
|
-
<div className=
|
|
145
|
+
<div className={styles.login}>
|
|
142
146
|
<img
|
|
143
147
|
src={logo}
|
|
144
148
|
alt="CRM"
|
|
145
|
-
className=
|
|
149
|
+
className={styles.loginlogo}
|
|
146
150
|
/>
|
|
147
|
-
<div
|
|
148
|
-
|
|
151
|
+
<div
|
|
152
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
153
|
+
>
|
|
154
|
+
<label className={styles.fi__label}>
|
|
149
155
|
<input
|
|
150
156
|
type="text"
|
|
151
157
|
name="email"
|
|
@@ -155,14 +161,18 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
155
161
|
className={authClass.username}
|
|
156
162
|
placeholder=" "
|
|
157
163
|
/>
|
|
158
|
-
<span className=
|
|
164
|
+
<span className={styles.fi__span}>
|
|
165
|
+
Email
|
|
166
|
+
</span>
|
|
159
167
|
<small>
|
|
160
168
|
<Person strokeWidth={2} size={18} />
|
|
161
169
|
</small>
|
|
162
170
|
</label>
|
|
163
171
|
</div>
|
|
164
|
-
<div
|
|
165
|
-
|
|
172
|
+
<div
|
|
173
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
174
|
+
>
|
|
175
|
+
<label className={styles.fi__label}>
|
|
166
176
|
<input
|
|
167
177
|
type="password"
|
|
168
178
|
name="password"
|
|
@@ -172,7 +182,7 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
172
182
|
className={authClass.password}
|
|
173
183
|
placeholder=" "
|
|
174
184
|
/>
|
|
175
|
-
<span className=
|
|
185
|
+
<span className={styles.fi__span}>
|
|
176
186
|
Password
|
|
177
187
|
</span>
|
|
178
188
|
<small>
|
|
@@ -183,12 +193,19 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
183
193
|
</small>
|
|
184
194
|
</label>
|
|
185
195
|
</div>
|
|
186
|
-
<div
|
|
187
|
-
|
|
196
|
+
<div
|
|
197
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
|
|
198
|
+
>
|
|
199
|
+
<button
|
|
200
|
+
className={styles.btn}
|
|
201
|
+
type="submit"
|
|
202
|
+
>
|
|
188
203
|
Login
|
|
189
204
|
</button>
|
|
190
205
|
</div>
|
|
191
|
-
<div
|
|
206
|
+
<div
|
|
207
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
|
|
208
|
+
>
|
|
192
209
|
<span>
|
|
193
210
|
Forgot your password?{' '}
|
|
194
211
|
<Link to="/reset">Click Here</Link>
|
|
@@ -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
|
+
}
|
|
@@ -8,6 +8,7 @@ import Dropzone from 'react-dropzone';
|
|
|
8
8
|
import { confirmAlert } from 'react-confirm-alert';
|
|
9
9
|
import truncate from 'truncate';
|
|
10
10
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
11
|
+
import { toast } from 'react-toastify';
|
|
11
12
|
import { CircleCheck, Copy, File, TrashCan } from 'akar-icons';
|
|
12
13
|
|
|
13
14
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
@@ -19,7 +20,8 @@ import GenericDynamic from './GenericDynamic';
|
|
|
19
20
|
import QrCode from '../QrCode';
|
|
20
21
|
import Table from '../DataGrid';
|
|
21
22
|
import TableFilter from '../TableFilter';
|
|
22
|
-
|
|
23
|
+
|
|
24
|
+
import styles from './styles/GenericDetail.module.css';
|
|
23
25
|
|
|
24
26
|
function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
25
27
|
const gridRef = useRef(null);
|
|
@@ -412,15 +414,15 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
412
414
|
};
|
|
413
415
|
|
|
414
416
|
return (
|
|
415
|
-
<div className=
|
|
416
|
-
<div className=
|
|
417
|
+
<div className={styles.gridtxt}>
|
|
418
|
+
<div className={styles.gridtxt__header}>
|
|
417
419
|
{activeTabConfig.label
|
|
418
420
|
? activeTabConfig.label
|
|
419
421
|
: 'Files'}
|
|
420
422
|
</div>
|
|
421
|
-
<div className=
|
|
423
|
+
<div className={styles.progress}>
|
|
422
424
|
<motion.div
|
|
423
|
-
className=
|
|
425
|
+
className={styles.progress__bar}
|
|
424
426
|
initial={{ width: '0%' }}
|
|
425
427
|
animate={{
|
|
426
428
|
width: loadingProgress + '%',
|
|
@@ -477,7 +479,11 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
477
479
|
getInputProps,
|
|
478
480
|
isDragActive,
|
|
479
481
|
}) => (
|
|
480
|
-
<section
|
|
482
|
+
<section
|
|
483
|
+
className={
|
|
484
|
+
styles.dropzone__container
|
|
485
|
+
}
|
|
486
|
+
>
|
|
481
487
|
<div {...getRootProps()}>
|
|
482
488
|
<input
|
|
483
489
|
{...getInputProps()}
|
|
@@ -498,7 +504,11 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
498
504
|
{activeTabConfig.filetype ===
|
|
499
505
|
'image' ? (
|
|
500
506
|
<div>
|
|
501
|
-
<ul
|
|
507
|
+
<ul
|
|
508
|
+
className={
|
|
509
|
+
styles.sortlist
|
|
510
|
+
}
|
|
511
|
+
>
|
|
502
512
|
{files.map(
|
|
503
513
|
(a, b) =>
|
|
504
514
|
a.base64_encoded_image && (
|
|
@@ -508,7 +518,11 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
508
518
|
{
|
|
509
519
|
a.file_name
|
|
510
520
|
}
|
|
511
|
-
<div
|
|
521
|
+
<div
|
|
522
|
+
className={
|
|
523
|
+
styles.sortimg
|
|
524
|
+
}
|
|
525
|
+
>
|
|
512
526
|
<img
|
|
513
527
|
src={
|
|
514
528
|
a.base64_encoded_image
|
|
@@ -540,7 +554,11 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
540
554
|
</ul>
|
|
541
555
|
</div>
|
|
542
556
|
) : (
|
|
543
|
-
<ul
|
|
557
|
+
<ul
|
|
558
|
+
className={
|
|
559
|
+
styles.dropzone__files
|
|
560
|
+
}
|
|
561
|
+
>
|
|
544
562
|
{files.map((a, b) => (
|
|
545
563
|
<li
|
|
546
564
|
onClick={() => {
|
|
@@ -663,9 +681,13 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
663
681
|
return (
|
|
664
682
|
<>
|
|
665
683
|
{formConfig.stages?.data?.length > 0 && (
|
|
666
|
-
<div className=
|
|
667
|
-
<div className=
|
|
668
|
-
<div
|
|
684
|
+
<div className={styles.grid}>
|
|
685
|
+
<div className={styles.grid__row}>
|
|
686
|
+
<div
|
|
687
|
+
className={
|
|
688
|
+
styles.grid__full
|
|
689
|
+
}
|
|
690
|
+
>
|
|
669
691
|
{formConfig.stages.data.map(
|
|
670
692
|
(stage) =>
|
|
671
693
|
parseInt(
|
|
@@ -675,12 +697,20 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
675
697
|
key={`stage-form-${stage.id}`}
|
|
676
698
|
>
|
|
677
699
|
{stage.form && (
|
|
678
|
-
<div
|
|
700
|
+
<div
|
|
701
|
+
className={
|
|
702
|
+
styles.gridtxt
|
|
703
|
+
}
|
|
704
|
+
>
|
|
679
705
|
{stage
|
|
680
706
|
.form
|
|
681
707
|
.update
|
|
682
708
|
.title && (
|
|
683
|
-
<div
|
|
709
|
+
<div
|
|
710
|
+
className={
|
|
711
|
+
styles.gridtxt__header
|
|
712
|
+
}
|
|
713
|
+
>
|
|
684
714
|
<span>
|
|
685
715
|
{
|
|
686
716
|
stage
|
|
@@ -735,8 +765,12 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
735
765
|
)}
|
|
736
766
|
|
|
737
767
|
{formConfig.form && (
|
|
738
|
-
<div className=
|
|
739
|
-
<div
|
|
768
|
+
<div className={styles.gridtxt}>
|
|
769
|
+
<div
|
|
770
|
+
className={
|
|
771
|
+
styles.gridtxt__header
|
|
772
|
+
}
|
|
773
|
+
>
|
|
740
774
|
<span>{formConfig.title}</span>
|
|
741
775
|
</div>
|
|
742
776
|
<Form
|
|
@@ -763,13 +797,17 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
763
797
|
case 'overview':
|
|
764
798
|
return (
|
|
765
799
|
<>
|
|
766
|
-
<div className=
|
|
800
|
+
<div className={styles.gridtxt}>
|
|
767
801
|
{activeTabConfig.sections.map(
|
|
768
802
|
(section, sectionIndex) => (
|
|
769
803
|
<React.Fragment
|
|
770
804
|
key={`section-${activeTabConfig.id}-${sectionIndex}`}
|
|
771
805
|
>
|
|
772
|
-
<div
|
|
806
|
+
<div
|
|
807
|
+
className={
|
|
808
|
+
styles.gridtxt__header
|
|
809
|
+
}
|
|
810
|
+
>
|
|
773
811
|
<span>
|
|
774
812
|
{section.title}
|
|
775
813
|
</span>
|
|
@@ -777,7 +815,11 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
777
815
|
{section.content &&
|
|
778
816
|
section.content.length >
|
|
779
817
|
0 && (
|
|
780
|
-
<ul
|
|
818
|
+
<ul
|
|
819
|
+
className={
|
|
820
|
+
styles.customer__overview
|
|
821
|
+
}
|
|
822
|
+
>
|
|
781
823
|
{section.content.map(
|
|
782
824
|
(
|
|
783
825
|
item,
|
|
@@ -788,7 +830,7 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
788
830
|
className={
|
|
789
831
|
item.size ===
|
|
790
832
|
'full'
|
|
791
|
-
? 'fw-grid-item notecolor
|
|
833
|
+
? `${styles['fw-grid-item']} ${styles.notecolor}`
|
|
792
834
|
: null
|
|
793
835
|
}
|
|
794
836
|
>
|
|
@@ -839,9 +881,9 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
839
881
|
)}
|
|
840
882
|
</div>
|
|
841
883
|
{activeTabConfig.form && (
|
|
842
|
-
<div className=
|
|
884
|
+
<div className={styles.polActions}>
|
|
843
885
|
<button
|
|
844
|
-
className=
|
|
886
|
+
className={styles.btn}
|
|
845
887
|
onClick={() =>
|
|
846
888
|
modalOpen(
|
|
847
889
|
'update',
|
|
@@ -876,8 +918,14 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
876
918
|
.relationship &&
|
|
877
919
|
activeTabConfig.dropzone.url !==
|
|
878
920
|
'' && (
|
|
879
|
-
<div
|
|
880
|
-
|
|
921
|
+
<div
|
|
922
|
+
className={styles.grid__row}
|
|
923
|
+
>
|
|
924
|
+
<div
|
|
925
|
+
className={
|
|
926
|
+
styles.grid__full
|
|
927
|
+
}
|
|
928
|
+
>
|
|
881
929
|
<Dropzone
|
|
882
930
|
onDrop={(
|
|
883
931
|
acceptedFiles
|
|
@@ -956,7 +1004,11 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
956
1004
|
getInputProps,
|
|
957
1005
|
isDragActive,
|
|
958
1006
|
}) => (
|
|
959
|
-
<section
|
|
1007
|
+
<section
|
|
1008
|
+
className={
|
|
1009
|
+
styles.dropzone__container
|
|
1010
|
+
}
|
|
1011
|
+
>
|
|
960
1012
|
<div
|
|
961
1013
|
{...getRootProps()}
|
|
962
1014
|
>
|
|
@@ -990,9 +1042,15 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
990
1042
|
</section>
|
|
991
1043
|
)}
|
|
992
1044
|
</Dropzone>
|
|
993
|
-
<div
|
|
1045
|
+
<div
|
|
1046
|
+
className={
|
|
1047
|
+
styles.progress
|
|
1048
|
+
}
|
|
1049
|
+
>
|
|
994
1050
|
<motion.div
|
|
995
|
-
className=
|
|
1051
|
+
className={
|
|
1052
|
+
styles.progress__bar
|
|
1053
|
+
}
|
|
996
1054
|
initial={{
|
|
997
1055
|
width: '0%',
|
|
998
1056
|
}}
|
|
@@ -1015,8 +1073,8 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
1015
1073
|
</div>
|
|
1016
1074
|
</div>
|
|
1017
1075
|
)}
|
|
1018
|
-
<div className=
|
|
1019
|
-
<div className=
|
|
1076
|
+
<div className={styles.grid__row}>
|
|
1077
|
+
<div className={styles.grid__full}>
|
|
1020
1078
|
<Table
|
|
1021
1079
|
{...config}
|
|
1022
1080
|
ref={gridRef}
|
|
@@ -1048,7 +1106,7 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
1048
1106
|
|
|
1049
1107
|
{activeTabConfig.functions
|
|
1050
1108
|
?.checkboxUpdate && (
|
|
1051
|
-
<div className=
|
|
1109
|
+
<div className={styles.polActions}>
|
|
1052
1110
|
<button
|
|
1053
1111
|
className="btn"
|
|
1054
1112
|
onClick={
|
|
@@ -1281,12 +1339,12 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
1281
1339
|
|
|
1282
1340
|
return (
|
|
1283
1341
|
<>
|
|
1284
|
-
<div className=
|
|
1285
|
-
<div className=
|
|
1286
|
-
<div className=
|
|
1342
|
+
<div className={styles.grid}>
|
|
1343
|
+
<div className={styles.grid__row}>
|
|
1344
|
+
<div className={`${styles.grid__full} ${styles.crmtitle}`}>
|
|
1287
1345
|
<Breadcrumb data={data} page={page} />
|
|
1288
1346
|
{total > 0 && (
|
|
1289
|
-
<div className=
|
|
1347
|
+
<div className={styles.titleInfo}>
|
|
1290
1348
|
<span>
|
|
1291
1349
|
[<strong>{total}</strong> Total]
|
|
1292
1350
|
</span>
|
|
@@ -1297,11 +1355,11 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
1297
1355
|
</div>
|
|
1298
1356
|
|
|
1299
1357
|
{stages?.data?.length > 0 && (
|
|
1300
|
-
<div className=
|
|
1301
|
-
<div className=
|
|
1302
|
-
<div className=
|
|
1303
|
-
<div className=
|
|
1304
|
-
<ul className=
|
|
1358
|
+
<div className={styles.grid}>
|
|
1359
|
+
<div className={styles.grid__row}>
|
|
1360
|
+
<div className={styles.grid__full}>
|
|
1361
|
+
<div className={styles.oppstatus}>
|
|
1362
|
+
<ul className={styles.opppath}>
|
|
1305
1363
|
{stages.data.map((stage) => {
|
|
1306
1364
|
if (!stage.id) {
|
|
1307
1365
|
return null; // Skip rendering this stage
|
|
@@ -1315,7 +1373,7 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
1315
1373
|
key={`stage-${stage.id}`}
|
|
1316
1374
|
className={
|
|
1317
1375
|
isStageComplete
|
|
1318
|
-
? 'opp-complete'
|
|
1376
|
+
? `${styles['opp-complete']}`
|
|
1319
1377
|
: ''
|
|
1320
1378
|
}
|
|
1321
1379
|
onClick={(e) => {
|
|
@@ -1346,12 +1404,12 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
|
|
|
1346
1404
|
</div>
|
|
1347
1405
|
)}
|
|
1348
1406
|
|
|
1349
|
-
<div className=
|
|
1350
|
-
<div className=
|
|
1351
|
-
<div className=
|
|
1407
|
+
<div className={styles.grid}>
|
|
1408
|
+
<div className={styles.grid__subrow}>
|
|
1409
|
+
<div className={styles.grid__subnav}>
|
|
1352
1410
|
<TableFilter filters={subnav} setFilters={setSubnav} />
|
|
1353
1411
|
</div>
|
|
1354
|
-
<div className=
|
|
1412
|
+
<div className={styles.grid__subcontent}>
|
|
1355
1413
|
{config ? renderContent() : null}
|
|
1356
1414
|
</div>
|
|
1357
1415
|
</div>
|