inboxlookup_screen 1.0.2 → 1.0.3

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