@visns-studio/visns-components 4.4.3 → 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.
Files changed (26) hide show
  1. package/components/crm/auth/Login.jsx +34 -17
  2. package/components/crm/auth/Reset.jsx +22 -12
  3. package/components/crm/auth/Verify.jsx +23 -15
  4. package/components/crm/auth/styles/Login.module.css +218 -0
  5. package/components/crm/auth/styles/Reset.module.css +218 -0
  6. package/components/crm/auth/styles/Verify.module.css +218 -0
  7. package/components/crm/generic/AuditLog.jsx +15 -10
  8. package/components/crm/generic/AuditLogs.jsx +7 -6
  9. package/components/crm/generic/GenericDetail.jsx +102 -44
  10. package/components/crm/generic/GenericMain.jsx +6 -5
  11. package/components/crm/generic/GenericSort.jsx +7 -6
  12. package/components/crm/generic/NotificationList.jsx +6 -6
  13. package/components/crm/generic/styles/AuditLog.module.css +147 -0
  14. package/components/crm/generic/styles/AuditLogs.module.css +67 -0
  15. package/components/crm/generic/styles/GenericDetail.module.css +578 -0
  16. package/components/crm/generic/styles/GenericIndex.module.css +178 -183
  17. package/components/crm/generic/styles/GenericMain.module.css +77 -0
  18. package/components/crm/generic/styles/GenericSort.module.css +67 -0
  19. package/components/crm/generic/styles/NotificationList.module.css +67 -0
  20. package/components/crm/styles/AsyncSelect.module.css +6 -10
  21. package/components/crm/styles/Autocomplete.module.css +3 -3
  22. package/components/crm/styles/DataGrid.module.css +59 -59
  23. package/components/crm/styles/Form.module.css +17 -19
  24. package/components/crm/styles/MultiSelect.module.css +6 -10
  25. package/components/crm/styles/TableFilter.module.css +1 -0
  26. package/package.json +1 -1
package/components/crm/auth/Login.jsx CHANGED
@@ -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 className="formItem fwItem lastItem forgotten">
40
+ <div
41
+ className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
42
+ >
39
43
  <button
40
- className="btn"
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="lcontainer">
136
- <div className="lwrap">
137
- <aside className="aside"></aside>
138
- <div className="logincontainer">
139
+ <div className={styles.lcontainer}>
140
+ <div className={styles.lwrap}>
141
+ <aside className={styles.aside}></aside>
142
+ <div className={styles.logincontainer}>
139
143
  <form onSubmit={handleSubmit}>
140
144
  <Reveal effect="fadeInUp">
141
- <div className="login">
145
+ <div className={styles.login}>
142
146
  <img
143
147
  src={logo}
144
148
  alt="CRM"
145
- className="loginlogo"
149
+ className={styles.loginlogo}
146
150
  />
147
- <div className="formItem fwItem">
148
- <label className="fi__label">
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="fi__span">Email</span>
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 className="formItem fwItem">
165
- <label className="fi__label">
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="fi__span">
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 className="formItem fwItem lastItem">
187
- <button className="btn" type="submit">
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 className="formItem fwItem lastItem forgotten">
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>
package/components/crm/auth/Reset.jsx CHANGED
@@ -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="lcontainer">
42
- <div className="lwrap">
43
- <aside className="aside"></aside>
44
- <div className="logincontainer">
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="login">
49
+ <div className={styles.login}>
48
50
  <img
49
51
  src={logo}
50
52
  alt="CRM"
51
- className="loginlogo"
53
+ className={styles.loginlogo}
52
54
  />
53
- <div className="formItem fwItem">
55
+ <div
56
+ className={`${styles.formItem} ${styles.fwItem}`}
57
+ >
54
58
  <h1>Forgot your password?</h1>
55
59
  </div>
56
- <div className="formItem fwItem">
57
- <label className="fi__label">
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="fi__span">Email</span>
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 className="formItem fwItem lastItem">
83
+ <div
84
+ className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
85
+ >
76
86
  <button
77
- className="btn"
87
+ className={styles.btn}
78
88
  type="submit"
79
89
  tabIndex="2"
80
90
  >
package/components/crm/auth/Verify.jsx CHANGED
@@ -92,23 +92,27 @@ const Verify = ({ logo }) => {
92
92
  };
93
93
 
94
94
  return (
95
- <div className="lcontainer">
96
- <div className="lwrap">
97
- <aside className="aside"></aside>
98
- <div className="logincontainer">
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="login">
101
+ <div className={styles.login}>
102
102
  <img
103
103
  src={logo}
104
104
  alt="CRM"
105
- className="loginlogo"
105
+ className={styles.loginlogo}
106
106
  />
107
- <div className="formItem fwItem">
107
+ <div
108
+ className={`${styles.formItem} ${styles.fwItem}`}
109
+ >
108
110
  <h1>Reset your password</h1>
109
111
  </div>
110
- <div className="formItem fwItem">
111
- <label className="fi__label">
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="fi__span">
124
+ <span className={styles.fi__span}>
121
125
  Password
122
126
  </span>
123
127
  </label>
124
128
  </div>
125
- <div className="formItem fwItem">
126
- <label className="fi__label">
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="fi__span">
141
+ <span className={styles.fi__span}>
136
142
  Re-type Password
137
143
  </span>
138
144
  </label>
139
145
  </div>
140
- <div className="formItem fwItem lastItem">
146
+ <div
147
+ className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
148
+ >
141
149
  <button
142
- className="btn"
150
+ className={styles.btn}
143
151
  type="submit"
144
152
  tabIndex="3"
145
153
  >
package/components/crm/auth/styles/Login.module.css ADDED
@@ -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
+ }
package/components/crm/auth/styles/Reset.module.css ADDED
@@ -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
+ }