@visns-studio/visns-components 5.0.24 → 5.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -77,7 +77,7 @@
77
77
  "react-dom": "^17.0.0 || ^18.0.0"
78
78
  },
79
79
  "name": "@visns-studio/visns-components",
80
- "version": "5.0.24",
80
+ "version": "5.0.26",
81
81
  "description": "Various packages to assist in the development of our Custom Applications.",
82
82
  "main": "src/index.js",
83
83
  "files": [
@@ -391,6 +391,7 @@ const DataGrid = forwardRef(
391
391
  case 'envelope':
392
392
  case 'file':
393
393
  case 'image':
394
+ case 'undo':
394
395
  CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
395
396
  toast.success(result.message);
396
397
  });
@@ -1144,6 +1145,8 @@ const DataGrid = forwardRef(
1144
1145
  return getIconComponent(SoundOn);
1145
1146
  case 'ssa':
1146
1147
  return getIconComponent(Clock);
1148
+ case 'undo':
1149
+ return getIconComponent(ArrowCounterClockwise);
1147
1150
  case 'update':
1148
1151
  return getIconComponent(Edit);
1149
1152
  default:
@@ -35,7 +35,7 @@ function GenericDashboard({ setting }) {
35
35
  const initialFilterData = await CustomFetch(
36
36
  filter.url,
37
37
  'POST',
38
- filter.defaultParams || {}
38
+ filter.params || {}
39
39
  );
40
40
  setDropdowns((prevFilters) => ({
41
41
  ...prevFilters,
@@ -0,0 +1,227 @@
1
+ import '../../styles/global.css';
2
+
3
+ import React, { useState, useEffect } from 'react';
4
+ import { Link, useParams } from 'react-router-dom';
5
+ import moment from 'moment';
6
+ import get from 'lodash/get';
7
+
8
+ import Breadcrumb from '../../crm/Breadcrumb';
9
+ import CustomFetch from '../../crm/Fetch';
10
+ import TableFilter from '../TableFilter';
11
+ import MultiSelect from '../../crm/MultiSelect';
12
+
13
+ import styles from './styles/GenericQuote.module.scss';
14
+
15
+ function GenericQuote({
16
+ extraUrlParam,
17
+ layout = 'full',
18
+ setting,
19
+ setActiveNav = null,
20
+ urlParam,
21
+ userProfile,
22
+ }) {
23
+ const routeParams = useParams();
24
+
25
+ const { filters, page, tables } = setting;
26
+
27
+ const [data, setData] = useState({});
28
+ const [subnav, setSubnav] = useState(filters || []);
29
+
30
+ useEffect(() => {
31
+ setSubnav(filters);
32
+ }, [filters]);
33
+
34
+ useEffect(() => {
35
+ const fetchData = async () => {
36
+ if (routeParams[urlParam] && routeParams[urlParam] > 0) {
37
+ try {
38
+ const res = await CustomFetch(
39
+ `${page.fetchUrl}/${routeParams[urlParam]}`,
40
+ 'GET',
41
+ {}
42
+ );
43
+ setData(res.data); // Assuming res is the data to set
44
+ } catch (error) {
45
+ console.error('Error fetching data:', error);
46
+ }
47
+ }
48
+ };
49
+
50
+ fetchData();
51
+ }, [routeParams['*']]);
52
+
53
+ return (
54
+ <>
55
+ <div className={styles.grid}>
56
+ <div className={styles.grid__row}>
57
+ <div className={`${styles.grid__full} ${styles.crmtitle}`}>
58
+ <Breadcrumb data={data} page={page} />
59
+ </div>
60
+ </div>
61
+ </div>
62
+ <div className={styles.grid}>
63
+ <div className={styles.grid__row}>
64
+ <div className={styles.grid__subnav}>
65
+ <TableFilter filters={subnav} setFilters={setSubnav} />
66
+ </div>
67
+ <div className={styles.grid__subcontent}>
68
+ <div className={styles.quotestatus}>
69
+ <div>
70
+ <span
71
+ className={
72
+ styles[
73
+ 'q__' +
74
+ (data.status
75
+ ? data.status.name.toLowerCase()
76
+ : '')
77
+ ]
78
+ }
79
+ >
80
+ {data.status ? data.status.name : ''} - #
81
+ {data.task ? data.task.ticket_id : ''}
82
+ </span>
83
+ </div>
84
+ </div>
85
+ <div className={styles.quotecontainer}>
86
+ <div className={styles.qitem}>
87
+ <div
88
+ className={`${styles.qitem__half} ${styles.quoteimg}`}
89
+ >
90
+ <span>
91
+ <img
92
+ // src={logo}
93
+ alt="Visns Studio Quote"
94
+ />
95
+ </span>
96
+ </div>
97
+ <div className={styles.qitem__half}>
98
+ <div className={styles.qtitle}>
99
+ Quote #{data.id || ''}
100
+ </div>
101
+ </div>
102
+ </div>
103
+ <div className={styles.qitem}>
104
+ <div className={styles.qitem__half}>
105
+ <div className={styles.qdate}>
106
+ <strong>Date:</strong>{' '}
107
+ {data.created_at
108
+ ? moment(data.created_at).format(
109
+ 'DD-MM-YYYY'
110
+ )
111
+ : ''}
112
+ </div>
113
+ </div>
114
+ <div className={styles.qitem__half}>
115
+ <div className={styles.qno}>
116
+ <strong>{data.label}</strong>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ <div className={styles.qitem}>
121
+ <div className={styles.qitem__half}>
122
+ <div className={styles.qdetails}>
123
+ <p style={{ margin: 0 }}>
124
+ <strong>Quote To:</strong>
125
+ <br />
126
+ {data.customer
127
+ ? data.customer.name
128
+ : ''}
129
+ </p>
130
+ </div>
131
+ </div>
132
+ <div className={styles.qitem__half}>
133
+ <div className={styles.qvisns}>
134
+ <p style={{ margin: 0 }}>
135
+ <strong>Quote From:</strong>
136
+ <br />
137
+ Visns Studio
138
+ <br />
139
+ 660C Newcastle Street
140
+ <br />
141
+ Leederville, WA, 6007
142
+ <br />
143
+ 08 6383 6600
144
+ <br />
145
+ team@visns.studio
146
+ <br />
147
+ ABN: 41 994 317 718
148
+ </p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ <div className={styles.qitem}>
154
+ {tables.length > 0 &&
155
+ tables.map((table) => (
156
+ <table
157
+ key={`table-${table.id}`} // Adding a key to identify each table in the list
158
+ className={`${styles['content-table']} ${styles['quote-table']}`}
159
+ >
160
+ <thead>
161
+ <tr className={styles.splitheader}>
162
+ <th colSpan="8">
163
+ <h1
164
+ className={
165
+ styles.splittitle
166
+ }
167
+ >
168
+ {table.label}
169
+ </h1>
170
+ </th>
171
+ </tr>
172
+ <tr>
173
+ <th></th>
174
+ {table.columns.map((column) => (
175
+ <th
176
+ key={`${table.id}-column-${column.id}`}
177
+ style={
178
+ column.style || {}
179
+ }
180
+ >
181
+ {column.label}
182
+ </th>
183
+ ))}
184
+ </tr>
185
+ </thead>
186
+ <tbody>
187
+ {data[table.id] &&
188
+ data[table.id].map(
189
+ (row, index) => (
190
+ <tr
191
+ key={`row-${index}`}
192
+ >
193
+ <td></td>
194
+ {table.columns.map(
195
+ (column) => (
196
+ <td
197
+ key={`row-${index}-column-${column.id}`}
198
+ style={
199
+ column.style ||
200
+ {}
201
+ }
202
+ >
203
+ {
204
+ get(
205
+ row,
206
+ column.id,
207
+ ''
208
+ ) // Safely access nested properties
209
+ }
210
+ </td>
211
+ )
212
+ )}
213
+ </tr>
214
+ )
215
+ )}
216
+ </tbody>
217
+ </table>
218
+ ))}
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </>
224
+ );
225
+ }
226
+
227
+ export default GenericQuote;
@@ -0,0 +1,460 @@
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__three {
20
+ width: 33%;
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: 20px;
28
+ margin: 8px 0;
29
+ box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
30
+ }
31
+
32
+ .grid__half {
33
+ width: 50%;
34
+ background: var(--item-color);
35
+ border-radius: 6px;
36
+ border: 1px solid #dadce0;
37
+ box-sizing: border-box;
38
+ overflow: visible;
39
+ position: relative;
40
+ padding: 20px;
41
+ margin: 8px 0;
42
+ box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
43
+ }
44
+
45
+ .grid__full {
46
+ width: 100%;
47
+ background: var(--item-color);
48
+ border-radius: var(--br);
49
+ border: 1px solid rgba(var(--item-color-rgb), 1.15);
50
+ box-sizing: border-box;
51
+ overflow: visible;
52
+ position: relative;
53
+ padding: 2px;
54
+ margin: 8px 0;
55
+ box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
56
+ }
57
+
58
+ .grid__dashfull {
59
+ width: 100%;
60
+ background: var(--item-color);
61
+ border-radius: 6px;
62
+ border: 1px solid #dadce0;
63
+ box-sizing: border-box;
64
+ overflow: visible;
65
+ position: relative;
66
+ padding: 20px;
67
+ margin: 8px 0;
68
+ box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
69
+ }
70
+
71
+ .grid__subrow {
72
+ width: 100%;
73
+ display: flex;
74
+ flex-wrap: wrap;
75
+ height: auto;
76
+ gap: 0.5rem;
77
+ }
78
+
79
+ .grid__subnav {
80
+ flex: 1;
81
+ background: white;
82
+ border-radius: var(--br);
83
+ box-sizing: border-box;
84
+ padding: 5px;
85
+ margin: 8px 0;
86
+ height: auto;
87
+ box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
88
+ }
89
+
90
+ .grid__subnav > ul {
91
+ width: 100%;
92
+ list-style: none;
93
+ padding: 0;
94
+ margin: 0;
95
+ display: flex;
96
+ flex-wrap: wrap;
97
+ }
98
+
99
+ .grid__subnav > ul li {
100
+ width: 100%;
101
+ margin-bottom: 3px;
102
+ }
103
+
104
+ .grid__subnav > ul li a {
105
+ width: 100%;
106
+ padding: 0.35rem 1rem;
107
+ box-sizing: border-box;
108
+ display: block;
109
+ text-decoration: none;
110
+ background: rgba(var(--primary-rgb), 0.05);
111
+ color: var(--primary-color);
112
+ border-radius: 5px;
113
+ transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
114
+ outline: none;
115
+ cursor: pointer;
116
+ }
117
+
118
+ .grid__subnav > ul li:hover a {
119
+ background: var(--primary-color);
120
+ color: var(--background-color);
121
+ }
122
+
123
+ .grid__subnav > ul li .subactive {
124
+ font-weight: 700;
125
+ background: var(--primary-color);
126
+ color: var(--background-color);
127
+ }
128
+
129
+ .grid__minheight {
130
+ min-height: 300px;
131
+ }
132
+
133
+ .noborder {
134
+ border: none !important;
135
+ }
136
+
137
+ .grid__subcontent {
138
+ flex: 0 1 80%;
139
+ background: var(--tertiary-color);
140
+ border-radius: var(--br);
141
+ border: 1px solid rgba(var(--primary-rgb), 0.05);
142
+ box-sizing: border-box;
143
+ padding: 2px;
144
+ margin: 8px 0;
145
+ height: auto;
146
+ position: relative;
147
+ }
148
+
149
+ .grid__subcontent h2 {
150
+ color: var(--primary-color);
151
+ font-size: 1.35em;
152
+ padding: 0;
153
+ margin: 0 0 30px 0;
154
+ }
155
+
156
+ .gridtxt__header {
157
+ width: 100%;
158
+ display: block;
159
+ background: rgba(var(--primary-rgb), 0.05);
160
+ box-sizing: border-box;
161
+ padding: 10px 20px;
162
+ border-radius: var(--br);
163
+ margin-bottom: 0;
164
+ font-weight: 700;
165
+ text-align: center;
166
+ color: var(--paragraph-color);
167
+ }
168
+
169
+ .gridtxt__header span {
170
+ font-weight: 700;
171
+ }
172
+
173
+ .gridtxt > ul {
174
+ width: 100%;
175
+ display: flex;
176
+ justify-content: flex-start;
177
+ flex-direction: row;
178
+ flex-wrap: wrap;
179
+ list-style: none;
180
+ box-sizing: border-box;
181
+ padding: 0.85rem;
182
+ margin: 0;
183
+ }
184
+
185
+ .gridtxt > ul li {
186
+ flex: 0 0 calc(50% - 10px);
187
+ padding: 0.65rem;
188
+ box-sizing: border-box;
189
+ border: 1px solid rgba(var(--primary-rgb), 0.095);
190
+ color: var(--paragraph-color);
191
+ background: rgba(var(--primary-rgb), 0.015);
192
+ margin: 3px;
193
+ border-radius: var(--br);
194
+ line-height: 1.45;
195
+ font-size: 0.85rem;
196
+ }
197
+
198
+ .gridtxt > ul .fw-grid-item {
199
+ flex: 0 0 calc(100% - 10px);
200
+ }
201
+
202
+ .gridtxt > ul .notecolor {
203
+ border: 1px solid var(--secondary-color);
204
+ }
205
+
206
+ .btn {
207
+ width: max-content;
208
+ display: inline-block;
209
+ position: relative;
210
+ padding: 0.65rem 1rem;
211
+ cursor: pointer;
212
+ font-size: 1rem;
213
+ color: var(--tertiary-color);
214
+ text-decoration: none;
215
+ overflow: hidden;
216
+ background: var(--primary-color);
217
+ border: 1px solid rgba(var(--primary-color--rgb), 1.1);
218
+ border-radius: var(--br);
219
+ outline: none;
220
+ transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
221
+ font-size: 1.25em;
222
+ }
223
+
224
+ .btn:hover {
225
+ color: var(--primary-color);
226
+ background: var(--highlight-color);
227
+ border: 1px solid rgba(var(--highlight-rgb), 1.05);
228
+ }
229
+
230
+ .crmtitle {
231
+ min-height: auto;
232
+ padding: 1rem;
233
+ margin: 0;
234
+ background: white;
235
+ border-radius: var(--br);
236
+ border: 1px solid rgba(var(--primary-rgb), 0.15);
237
+ position: relative;
238
+ display: flex;
239
+ align-items: center;
240
+ justify-content: space-between;
241
+
242
+ h1 {
243
+ font-weight: 700;
244
+ font-size: 1.25rem;
245
+ margin: 0;
246
+ padding: 0;
247
+ line-height: 1;
248
+
249
+ a {
250
+ text-decoration: none;
251
+ color: var(--secondary-color);
252
+ font-weight: 400;
253
+ }
254
+
255
+ svg {
256
+ color: rgba(var(--primary-rgb), 0.5);
257
+ position: relative;
258
+ top: 2px;
259
+ margin: 0 0.5rem;
260
+ max-width: 15px;
261
+ }
262
+ }
263
+ }
264
+
265
+ .titleInfo {
266
+ position: absolute;
267
+ right: 2em;
268
+
269
+ span {
270
+ font-size: 0.875em;
271
+ color: rgba(var(--background-color-rgb), 0.65);
272
+ }
273
+ }
274
+
275
+ .quotecontainer {
276
+ width: 100%;
277
+ max-width: 1450px;
278
+ margin: 0 auto;
279
+ margin-bottom: 20px;
280
+ box-sizing: border-box;
281
+ display: flex;
282
+ flex-wrap: wrap;
283
+ border: 1px solid rgba(var(--primary-rgb), 0.65);
284
+ border-radius: 3px;
285
+ }
286
+
287
+ .qitem {
288
+ width: 100%;
289
+ display: flex;
290
+ flex-wrap: wrap;
291
+ box-sizing: border-box;
292
+ padding: 30px;
293
+ border-bottom: 1px solid rgba(var(--primary-rgb), 0.65);
294
+ color: var(--paragraph-color);
295
+
296
+ &__half {
297
+ width: 50%;
298
+ box-sizing: border-box;
299
+
300
+ .qtitle {
301
+ display: block;
302
+ font-size: 2rem;
303
+ text-align: right;
304
+ color: var(--primary-color);
305
+ }
306
+
307
+ .qno,
308
+ .qdate {
309
+ display: block;
310
+ font-size: 1rem;
311
+ text-align: right;
312
+ }
313
+
314
+ .qdate {
315
+ text-align: left;
316
+ }
317
+
318
+ .qvisns {
319
+ text-align: right;
320
+ }
321
+ }
322
+
323
+ td {
324
+ input,
325
+ select,
326
+ textarea {
327
+ padding: 0.65rem !important;
328
+ }
329
+
330
+ .q-sort {
331
+ display: flex;
332
+ flex-wrap: nowrap;
333
+ justify-content: flex-start;
334
+ align-content: flex-start;
335
+
336
+ svg {
337
+ font-size: 0.95em;
338
+ padding: 8px;
339
+ background: #f0f0f0;
340
+ border-radius: 8px;
341
+ margin-right: 2px;
342
+ }
343
+
344
+ > a {
345
+ text-decoration: none;
346
+ }
347
+ }
348
+ }
349
+ }
350
+
351
+ .quoteimg {
352
+ img {
353
+ width: 100%;
354
+ max-width: 250px;
355
+ height: auto;
356
+ display: block;
357
+ }
358
+ }
359
+
360
+ .quotestatus {
361
+ width: 100%;
362
+ padding: 30px;
363
+ text-align: center;
364
+ font-size: 1.65em;
365
+ box-sizing: border-box;
366
+
367
+ .q__accepted {
368
+ color: #84c333;
369
+ }
370
+
371
+ .q__pending {
372
+ color: #d4c141;
373
+ }
374
+
375
+ .q__declined {
376
+ color: #c33333;
377
+ }
378
+ }
379
+
380
+ .splitheader {
381
+ background: var(--primary-color) !important;
382
+ border-bottom: 1px solid #dfe3eb;
383
+ }
384
+
385
+ .splittitle {
386
+ font-size: 0.975em;
387
+ text-transform: uppercase;
388
+ font-weight: 700;
389
+ color: #3dd87c;
390
+ padding: 0;
391
+ margin: 0;
392
+ }
393
+
394
+ .content-table {
395
+ width: 100%;
396
+ border-collapse: collapse;
397
+ margin: 0 auto;
398
+ font-size: 1em;
399
+ border-radius: 5px 5px 0 0;
400
+ overflow: hidden;
401
+ border: none;
402
+ border-spacing: 0;
403
+ border-collapse: collapse;
404
+ box-sizing: border-box;
405
+
406
+ thead {
407
+ display: table-row-group;
408
+ }
409
+
410
+ thead tr {
411
+ background: var(--table-color);
412
+ color: var(--primary-color);
413
+ text-align: left;
414
+ font-weight: 700;
415
+ text-transform: capitalize;
416
+ font-size: 1em;
417
+ }
418
+
419
+ .filterRow {
420
+ th {
421
+ padding: 5px;
422
+ }
423
+ }
424
+
425
+ th,
426
+ td {
427
+ font-size: 0.95em;
428
+ padding: 8px 15px;
429
+ color: var(--paragraph-color);
430
+ border-right: 1px solid var(--table-border);
431
+ line-height: 1;
432
+ border-spacing: 0;
433
+ border-collapse: collapse;
434
+
435
+ &:last-of-type {
436
+ border-right: none;
437
+ }
438
+
439
+ &:last-child {
440
+ border-right: none;
441
+ }
442
+ }
443
+
444
+ td {
445
+ .tdaction {
446
+ background: #f0f0f0;
447
+ display: block;
448
+ line-height: 1;
449
+ padding: 0.05rem;
450
+ border-radius: 5px;
451
+ margin: 0 0.25rem;
452
+ }
453
+ }
454
+
455
+ tbody tr {
456
+ border-bottom: 1px solid var(--table-border);
457
+ cursor: pointer;
458
+ background: var(--tertiary-color);
459
+ }
460
+ }
package/src/index.js CHANGED
@@ -43,6 +43,7 @@ import GenericDynamic from './components/crm/generic/GenericDynamic';
43
43
  import GenericFormBuilder from './components/crm/generic/GenericFormBuilder';
44
44
  import GenericIndex from './components/crm/generic/GenericIndex';
45
45
  import GenericMain from './components/crm/generic/GenericMain';
46
+ import GenericQuote from './components/crm/generic/GenericQuote';
46
47
  import GenericSort from './components/crm/generic/GenericSort';
47
48
  import NotificationList from './components/crm/generic/NotificationList';
48
49
 
@@ -70,6 +71,7 @@ export {
70
71
  GenericFormBuilder,
71
72
  GenericIndex,
72
73
  GenericMain,
74
+ GenericQuote,
73
75
  GenericSort,
74
76
  Loader,
75
77
  Login,