inboxlookup_screen 1.0.2 → 1.0.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "inboxlookup_screen",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "A React component using DevExtreme",
5
5
  "main": "dist/index.js",
6
6
  "homepage": "./",
@@ -1,4 +1,4 @@
1
- .orders-container {
1
+ .lookupscreen-container {
2
2
  display: flex;
3
3
  gap: 16px;
4
4
  padding: 16px;
@@ -6,7 +6,7 @@
6
6
  }
7
7
 
8
8
  /* LEFT PANEL */
9
- .orders-left {
9
+ .lookupscreen-left {
10
10
  max-width: 15%;
11
11
  background: #ffffff;
12
12
  border-radius: 12px;
@@ -15,13 +15,13 @@
15
15
  height: 100%;
16
16
  }
17
17
 
18
- .panel-title {
18
+ .lookupscreenpanel-title {
19
19
  font-size: 18px;
20
20
  font-weight: 600;
21
21
  margin-bottom: 12px;
22
22
  }
23
23
 
24
- .order-item {
24
+ .lookupscreen-item {
25
25
  padding: 7px;
26
26
  border-radius: 10px;
27
27
  /* margin-bottom: 8px; */
@@ -30,12 +30,12 @@
30
30
  transition: all 0.2s ease;
31
31
  }
32
32
 
33
- .order-item:hover {
33
+ .lookupscreen-item:hover {
34
34
  background: #fff;
35
35
  }
36
36
 
37
37
  /* RIGHT PANEL CARD */
38
- .excel-card {
38
+ .lookupscreenexcel-card {
39
39
  background: #ffffff;
40
40
  border-radius: 12px;
41
41
  padding: 12px;
@@ -44,87 +44,59 @@
44
44
  }
45
45
 
46
46
  /* HEADER */
47
- .excel-header {
47
+ .lookupscreenexcel-header {
48
48
  display: flex;
49
49
  align-items: center;
50
50
  justify-content: space-between;
51
- margin-bottom: 12px;
52
51
  }
53
52
 
54
- .excel-header h2 {
53
+ .lookupscreenexcel-header h2 {
55
54
  margin: 0;
56
55
  font-size: 18px;
57
56
  font-weight: 600;
58
57
  color: #2c2c2c;
59
58
  }
60
59
 
61
- /* ACTION BUTTONS */
62
- .excel-actions {
63
- display: flex;
64
- gap: 10px;
65
- }
66
60
 
67
61
  /* Improve DataGrid appearance */
68
- .dx-datagrid {
62
+ .arcflow-lookupscreen .dx-datagrid {
69
63
  border-radius: 8px;
70
64
  }
71
65
 
72
66
  /* Header look like Excel */
73
- .dx-datagrid-headers {
67
+ .arcflow-lookupscreen .dx-datagrid-headers {
74
68
  background-color: #f5f7fa;
75
69
  font-weight: 600;
76
70
  }
77
71
 
78
72
  /* Row hover */
79
- .dx-row:hover {
73
+ .arcflow-lookupscreen .dx-row:hover {
80
74
  background-color: #f0f6ff;
81
75
  }
82
76
 
83
77
  /* Focused cell (Excel-like) */
84
- .dx-datagrid-focus-overlay {
78
+ .arcflow-lookupscreen .dx-datagrid-focus-overlay {
85
79
  border-color: #4a90e2;
86
80
  }
87
81
 
88
- .order-item.active {
82
+ .lookupscreen-item.active {
89
83
  background: #e0ecff;
90
84
  border-left: 4px solid #3b82f6;
91
85
  }
92
86
 
93
- .order-id {
87
+ .lookupscreen-id {
94
88
  font-weight: 600;
95
89
  color: #2563eb;
96
90
  }
97
91
 
98
- .order-customer {
99
- font-size: 14px;
100
- margin: 4px 0;
101
- }
102
-
103
- .status {
104
- font-size: 12px;
105
- padding: 4px 10px;
106
- border-radius: 20px;
107
- display: inline-block;
108
- }
109
-
110
- .status.pending {
111
- background: #fef3c7;
112
- color: #92400e;
113
- }
114
-
115
- .status.completed {
116
- background: #d1fae5;
117
- color: #065f46;
118
- }
119
-
120
- .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused.dx-list-item-selected {
92
+ .arcflow-lookupscreen .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused.dx-list-item-selected {
121
93
  /* background-color: rgba(0, 0, 0, .1); */
122
94
  background-color: white !important;
123
95
 
124
96
  color: #333;
125
97
  }
126
98
 
127
- .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
99
+ .arcflow-lookupscreen .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
128
100
  /* background-color: rgba(0, 0, 0, .1); */
129
101
  color: #333;
130
102
  }
@@ -135,7 +107,7 @@
135
107
  }
136
108
 
137
109
  /* RIGHT PANEL */
138
- .orders-right {
110
+ .lookupscreen-right {
139
111
  flex: 1;
140
112
  max-width: 82%;
141
113
  background: #ffffff;
@@ -144,34 +116,16 @@
144
116
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
145
117
  }
146
118
 
147
- .details-grid {
148
- display: grid;
149
- grid-template-columns: 150px 1fr;
150
- row-gap: 16px;
151
- margin-top: 24px;
152
- }
153
119
 
154
- .label {
155
- font-weight: 600;
156
- color: #6b7280;
157
- }
158
-
159
- .value {
160
- font-weight: 500;
161
- }
162
-
163
- .edit-btn {
164
- margin-top: 32px;
165
- }
166
120
 
167
121
  /* Make popup stick to right side */
168
- .right-side-popup .dx-overlay-content {
122
+ .lookupscreenright-side-popup .dx-overlay-content {
169
123
  padding: 0;
170
124
  border-radius: 0;
171
125
  }
172
126
 
173
127
  /* Popup body full height */
174
- .popup-content {
128
+ .lookupscreenpopup-content {
175
129
  height: calc(100vh - 48px);
176
130
  /* adjust for title bar */
177
131
  overflow-y: auto;
@@ -180,19 +134,19 @@
180
134
  }
181
135
 
182
136
  /* Form styling */
183
- .popup-content .form-group {
137
+ .lookupscreenpopup-content .form-group {
184
138
  display: flex;
185
139
  flex-direction: column;
186
140
  margin-bottom: 12px;
187
141
  }
188
142
 
189
- .popup-content label {
143
+ .lookupscreenpopup-content label {
190
144
  font-size: 13px;
191
145
  font-weight: 500;
192
146
  margin-bottom: 4px;
193
147
  }
194
148
 
195
- .popup-content input {
149
+ .lookupscreenpopup-contentt input {
196
150
  height: 36px;
197
151
  padding: 6px 8px;
198
152
  border: 1px solid #dcdcdc;
@@ -200,122 +154,55 @@
200
154
  background: #f9f9f9;
201
155
  }
202
156
 
203
- .custom-search-wrapper {
204
- width: 100%;
205
- margin: 12px 0 16px;
206
- }
207
-
208
- .custom-search-bar {
209
- display: flex;
210
- align-items: center;
211
- gap: 8px;
212
- }
213
-
214
- .custom-search-history {
215
- margin-top: 6px;
216
- background: #ffffff;
217
- border-radius: 10px;
218
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
219
- padding: 6px;
220
- max-height: 240px;
221
- overflow-y: auto;
222
- }
223
-
224
- .custom-history-item {
225
- padding: 10px 14px;
226
- border-radius: 8px;
227
- font-size: 14px;
228
- cursor: pointer;
229
- transition: all 0.2s ease;
230
- color: #333;
231
- }
232
-
233
- .custom-history-item:hover {
234
- background: #eef4ff;
235
- }
236
-
237
- .custom-no-history {
238
- padding: 14px;
239
- text-align: center;
240
- font-size: 13px;
241
- color: #999;
242
- }
243
157
 
244
158
  /* Make DataGrid search panel full width */
245
- .dx-datagrid-search-panel {
159
+ .arcflow-lookupscreen .dx-datagrid-search-panel {
246
160
  width: 100% !important;
247
161
  }
248
162
 
249
163
  /* Stretch input inside search panel */
250
- .dx-datagrid-search-panel .dx-texteditor {
164
+ .arcflow-lookupscreen .dx-datagrid-search-panel .dx-texteditor {
251
165
  width: 100% !important;
252
166
  }
253
167
 
254
- .grid-search-wrapper {
168
+ .arcflow-lookupscreen .grid-search-wrapper {
255
169
  position: relative;
256
170
  }
257
171
 
258
- /* Accordion below search panel */
259
- .search-history-accordion {
260
- background: #fff;
261
- border: 1px solid #e0e0e0;
262
- border-radius: 0 0 6px 6px;
263
- margin-bottom: 8px;
264
- max-height: 220px;
265
- overflow-y: auto;
266
- }
267
-
268
- /* Item */
269
- .search-history-item {
270
- padding: 10px 14px;
271
- cursor: pointer;
272
- font-size: 14px;
273
- }
274
-
275
- .search-history-item:hover {
276
- background-color: #e6f0ff;
277
- }
278
-
279
- .no-history {
280
- padding: 12px;
281
- text-align: center;
282
- color: #999;
283
- }
284
-
285
172
  /*orderMaster*/
286
- .Ordermaster {
173
+ .lookupscreensearch {
287
174
  display: flex;
288
175
  gap: 30px;
289
176
  width: 100%;
290
177
  }
291
178
 
292
- .ordermasterbox {
179
+ .lookupscreensearchbox {
293
180
  Box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
294
181
  padding: 30px;
295
182
  MARGIN: 10PX 0;
296
183
  border-radius: 5px;
297
184
  }
298
185
 
299
- .levellist>label {
186
+ .lookupscreenlevellist>label {
300
187
  display: block;
301
188
  }
302
189
 
303
- .levellist.first {
190
+ .lookupscreenlevellist.first {
304
191
  max-width: 70%;
305
192
  flex: 1;
306
193
  }
307
194
 
308
- .levellist.second {
195
+ .lookupscreenlevellist.second {
309
196
  max-width: 15%;
310
197
  flex: 1;
311
198
  }
312
199
 
313
- .levellist.third {
200
+ .lookupscreenlevellist.third {
314
201
  max-width: 15%;
315
202
  flex: 1;
316
203
  }
317
204
 
318
- .orderbutton {
205
+ .lookupscreenbutton {
319
206
  border: none;
320
207
  background: #113e70;
321
208
  padding: 6px 15px;
@@ -326,15 +213,14 @@
326
213
  }
327
214
 
328
215
 
329
- .Ordermaster input,
330
- select {
216
+ .lookupscreensearch input select {
331
217
  width: 100%;
332
218
  padding: 5px;
333
219
  height: 25px;
334
220
  }
335
221
 
336
222
  /* Container */
337
- .ordermasterbox {
223
+ .lookupscreensearchbox {
338
224
  background: #ffffff;
339
225
  padding: 16px 20px;
340
226
  border-radius: 10px;
@@ -343,7 +229,7 @@ select {
343
229
  }
344
230
 
345
231
  /* Main row */
346
- .Ordermaster {
232
+ .lookupscreensearch {
347
233
  display: flex;
348
234
  align-items: flex-end;
349
235
  gap: 20px;
@@ -351,37 +237,37 @@ select {
351
237
  }
352
238
 
353
239
  /* Each field */
354
- .levellist {
240
+ .lookupscreenlevellist {
355
241
  display: flex;
356
242
  flex-direction: column;
357
243
  gap: 6px;
358
244
  }
359
245
 
360
246
  /* Width control */
361
- .levellist.first {
247
+ .lookupscreenlevellist.first {
362
248
  flex: 2;
363
249
  min-width: 260px;
364
250
  }
365
251
 
366
- .levellist.second,
367
- .levellist.third {
252
+ .lookupscreenlevellist.second,
253
+ .lookupscreenlevellist.third {
368
254
  flex: 1;
369
255
  min-width: 160px;
370
256
  }
371
257
 
372
- .levellist.action {
258
+ .lookupscreenlevellist.action {
373
259
  min-width: 120px;
374
260
  }
375
261
 
376
262
  /* Labels */
377
- .levellist label {
263
+ .lookupscreenlevellist label {
378
264
  font-size: 13px;
379
265
  font-weight: 500;
380
266
  color: #555;
381
267
  }
382
268
 
383
269
  /* Inputs */
384
- .form-control {
270
+ .lookupscreen-searchcontrol {
385
271
  height: 38px;
386
272
  padding: 6px 10px;
387
273
  font-size: 14px;
@@ -390,13 +276,13 @@ select {
390
276
  outline: none;
391
277
  }
392
278
 
393
- .form-control:focus {
279
+ .lookupscreen-searchcontrol:focus {
394
280
  border-color: #1976d2;
395
281
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
396
282
  }
397
283
 
398
284
  /* Search button */
399
- .orderbutton {
285
+ .lookupscreenbutton {
400
286
  height: 38px;
401
287
  padding: 0 20px;
402
288
  background: #1976d2;
@@ -410,18 +296,18 @@ select {
410
296
  transition: background 0.2s ease;
411
297
  }
412
298
 
413
- .orderbutton:hover {
299
+ .lookupscreenbutton:hover {
414
300
  background: #125aa3;
415
301
  }
416
302
 
417
303
  /* Responsive */
418
304
  @media (max-width: 900px) {
419
- .Ordermaster {
305
+ .lookupscreensearch {
420
306
  flex-direction: column;
421
307
  align-items: stretch;
422
308
  }
423
309
 
424
- .levellist {
310
+ .lookupscreenlevellist {
425
311
  width: 100%;
426
312
  }
427
313
  }