@bjsdistribution/dms-client-return 0.1.63-prod → 0.1.64-prod

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 (10) hide show
  1. package/dist/dms-client-return.cjs.development.js +123 -36
  2. package/dist/dms-client-return.cjs.development.js.map +1 -1
  3. package/dist/dms-client-return.cjs.production.min.js +1 -1
  4. package/dist/dms-client-return.cjs.production.min.js.map +1 -1
  5. package/dist/dms-client-return.esm.js +123 -36
  6. package/dist/dms-client-return.esm.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx +2 -0
  9. package/src/components/order-daily-overview/table/ReturnTable.tsx +41 -39
  10. package/src/components/order-daily-overview/table/table-data/styles.ts +4 -1
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.1.63-prod",
2
+ "version": "0.1.64-prod",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx CHANGED
@@ -346,6 +346,7 @@ const ReturnOrderTable = () => {
346
346
  Recipient {renderSortIcon('recipient_name')}
347
347
  </div>
348
348
  </th>
349
+ <th>Client</th>
349
350
  <th>Return Action</th>
350
351
  <th>Code</th>
351
352
  <th>Description</th>
@@ -437,6 +438,7 @@ const ReturnOrderTable = () => {
437
438
  </li>
438
439
  </ul>
439
440
  </td>
441
+ <td title={item?.client_name ?? ''}>{displayValueOrNA(item?.client_name)}</td>
440
442
  <td>{displayValueOrNA(item?.product_return_action)}</td>
441
443
  <td>{displayValueOrNA(item?.code)}</td>
442
444
  <td>{displayValueOrNA(item?.description)}</td>
package/src/components/order-daily-overview/table/ReturnTable.tsx CHANGED
@@ -167,21 +167,21 @@ const ReturnTable: React.FC = () => {
167
167
  <thead>
168
168
  <tr>
169
169
  {[
170
- { label: 'Trading Name', key: 'trading_as' },
171
- { label: 'Client', key: 'customer_name' },
172
- { label: 'Orders', key: 'orders' },
173
- { label: 'Products', key: 'return_order_products' },
174
- { label: 'RTS', key: 'RTS' },
175
- { label: 'Pending', key: 'PENDING' },
176
- { label: 'Claims Paid', key: 'CLAIMS PAID' },
177
- { label: 'Dispose', key: 'DISPOSE' },
178
- { label: 'Re-allocate', key: 'RE-ALLOCATE' },
179
- { label: 'Re-Del', key: 'RE-DEL' },
180
- { label: 'Recycle', key: 'RECYCLE' },
181
- { label: 'Unknown', key: 'UNKNOWN' },
182
- ].map(({ label, key }) => (
183
- <th key={key} onClick={() => handleSort(key)}>
184
- <div style={{ display: 'flex', cursor: 'pointer' }}>
170
+ { label: 'Trading Name', key: 'trading_as', width: '180px', align: 'left' },
171
+ { label: 'Client', key: 'customer_name', width: '180px', align: 'center' },
172
+ { label: 'Orders', key: 'orders', width: '90px', align: 'center' },
173
+ { label: 'Products', key: 'return_order_products', width: '90px', align: 'center' },
174
+ { label: 'RTS', key: 'RTS', width: '80px', align: 'center' },
175
+ { label: 'Pending', key: 'PENDING', width: '90px', align: 'center' },
176
+ { label: 'Claims Paid', key: 'CLAIMS PAID', width: '110px', align: 'center' },
177
+ { label: 'Dispose', key: 'DISPOSE', width: '90px', align: 'center' },
178
+ { label: 'Re-allocate', key: 'RE-ALLOCATE', width: '110px', align: 'center' },
179
+ { label: 'Re-Del', key: 'RE-Del', width: '90px', align: 'center' },
180
+ { label: 'Recycle', key: 'RECYCLE', width: '90px', align: 'center' },
181
+ { label: 'Unknown', key: 'UNKNOWN', width: '90px', align: 'center' },
182
+ ].map(({ label, key, width, align }) => (
183
+ <th key={key} onClick={() => handleSort(key)} style={{ whiteSpace: 'nowrap', width, textAlign: align as any }}>
184
+ <div style={{ display: 'flex', cursor: 'pointer', justifyContent: align === 'left' ? 'flex-start' : 'center' }}>
185
185
  {label} <span>{renderSortIcon(key)}</span>
186
186
  </div>
187
187
  </th>
@@ -229,18 +229,19 @@ const ReturnTable: React.FC = () => {
229
229
  color: '#0099ff',
230
230
  fontWeight: 600,
231
231
  cursor: 'pointer',
232
+ textAlign: 'center',
232
233
  }}
233
234
  >
234
235
  <span>{rowKey?.customer_name}</span>
235
236
  </td>
236
237
 
237
- <td>
238
+ <td style={{ textAlign: 'center' }}>
238
239
  <ColumStyle>
239
240
  <GreyBox>{rowKey?.orders ?? 0}</GreyBox>
240
241
  </ColumStyle>
241
242
  </td>
242
243
 
243
- <td>
244
+ <td style={{ textAlign: 'center' }}>
244
245
  <ColumStyle>
245
246
  <GreyBox>{rowKey?.return_order_products ?? 0}</GreyBox>
246
247
  </ColumStyle>
@@ -250,6 +251,7 @@ const ReturnTable: React.FC = () => {
250
251
  color: rowKey?.RTS > 0 ? '#0099ff' : 'inherit',
251
252
  fontWeight: rowKey?.RTS > 0 ? 600 : 'normal',
252
253
  cursor: rowKey?.RTS > 0 ? 'pointer' : 'default',
254
+ textAlign: 'center',
253
255
  }}
254
256
  onClick={
255
257
  rowKey?.RTS > 0
@@ -271,37 +273,37 @@ const ReturnTable: React.FC = () => {
271
273
  </ColumStyle>
272
274
  </td>
273
275
 
274
- <td>
276
+ <td style={{ textAlign: 'center' }}>
275
277
  <ColumStyle>
276
278
  <GreyBox>{rowKey?.PENDING ?? 0}</GreyBox>
277
279
  </ColumStyle>
278
280
  </td>
279
- <td>
281
+ <td style={{ textAlign: 'center' }}>
280
282
  <ColumStyle>
281
283
  <GreyBox>{rowKey?.['CLAIMS PAID'] ?? 0}</GreyBox>
282
284
  </ColumStyle>
283
285
  </td>
284
- <td>
286
+ <td style={{ textAlign: 'center' }}>
285
287
  <ColumStyle>
286
288
  <GreyBox>{rowKey?.DISPOSE ?? 0}</GreyBox>
287
289
  </ColumStyle>
288
290
  </td>
289
- <td>
291
+ <td style={{ textAlign: 'center' }}>
290
292
  <ColumStyle>
291
- <GreyBox>{rowKey?.['RE-ALLOCATE'] ?? 0}</GreyBox>{' '}
293
+ <GreyBox>{rowKey?.['RE-ALLOCATE'] ?? 0}</GreyBox>
292
294
  </ColumStyle>
293
295
  </td>
294
- <td>
296
+ <td style={{ textAlign: 'center' }}>
295
297
  <ColumStyle>
296
298
  <GreyBox>{rowKey?.['RE-DEL'] ?? 0}</GreyBox>
297
299
  </ColumStyle>
298
300
  </td>
299
- <td>
301
+ <td style={{ textAlign: 'center' }}>
300
302
  <ColumStyle>
301
303
  <GreyBox>{rowKey?.RECYCLE ?? 0}</GreyBox>
302
304
  </ColumStyle>
303
305
  </td>
304
- <td>
306
+ <td style={{ textAlign: 'center' }}>
305
307
  <ColumStyle>
306
308
  <GreyBox>{rowKey?.UNKNOWN ?? 0}</GreyBox>
307
309
  </ColumStyle>
@@ -335,20 +337,20 @@ const ReturnTable: React.FC = () => {
335
337
  <thead style={{ visibility: 'collapse' }}>
336
338
  <tr>
337
339
  {[
338
- { label: 'Trading Name', key: 'trading_as' },
339
- { label: 'Client', key: 'customer_name' },
340
- { label: 'Orders', key: 'orders' },
341
- { label: 'Products', key: 'return_order_products' },
342
- { label: 'RTS', key: 'RTS' },
343
- { label: 'Pending', key: 'PENDING' },
344
- { label: 'Claims Paid', key: 'CLAIMS PAID' },
345
- { label: 'Dispose', key: 'DISPOSE' },
346
- { label: 'Re-allocate', key: 'RE-ALLOCATE' },
347
- { label: 'Re-Del', key: 'RE-DEL' },
348
- { label: 'Recycle', key: 'RECYCLE' },
349
- { label: 'Unknown', key: 'UNKNOWN' },
350
- ].map(({ label, key: thKey }) => (
351
- <th key={`hidden-${thKey}`} style={{ padding: '0 15px', border: 'none', height: 0 }}>
340
+ { label: 'Trading Name', key: 'trading_as', width: '180px' },
341
+ { label: 'Client', key: 'customer_name', width: '180px' },
342
+ { label: 'Orders', key: 'orders', width: '90px' },
343
+ { label: 'Products', key: 'return_order_products', width: '90px' },
344
+ { label: 'RTS', key: 'RTS', width: '80px' },
345
+ { label: 'Pending', key: 'PENDING', width: '90px' },
346
+ { label: 'Claims Paid', key: 'CLAIMS PAID', width: '110px' },
347
+ { label: 'Dispose', key: 'DISPOSE', width: '90px' },
348
+ { label: 'Re-allocate', key: 'RE-ALLOCATE', width: '110px' },
349
+ { label: 'Re-Del', key: 'RE-Del', width: '90px' },
350
+ { label: 'Recycle', key: 'RECYCLE', width: '90px' },
351
+ { label: 'Unknown', key: 'UNKNOWN', width: '90px' },
352
+ ].map(({ label, key: thKey, width }) => (
353
+ <th key={`hidden-${thKey}`} style={{ padding: '0 15px', border: 'none', height: 0, width }}>
352
354
  <div style={{ display: 'flex' }}>{label}</div>
353
355
  </th>
354
356
  ))}
package/src/components/order-daily-overview/table/table-data/styles.ts CHANGED
@@ -2,8 +2,9 @@ import styled from 'styled-components';
2
2
 
3
3
  export const ColumStyle = styled.div`
4
4
  display: flex;
5
- width: 67px;
5
+ width: 100%;
6
6
  align-items: center;
7
+ justify-content: center;
7
8
  gap: 7px;
8
9
  `;
9
10
 
@@ -44,6 +45,7 @@ export const StyledTableWrapper = styled.div`
44
45
  export const StyledTable = styled.table`
45
46
  border-spacing: 0 10px;
46
47
  width: 100%;
48
+ table-layout: fixed;
47
49
  /* min-width: 1600px; */
48
50
  thead {
49
51
  position: sticky;
@@ -107,6 +109,7 @@ export const StyledTable = styled.table`
107
109
  border: 1px solid rgba(0, 0, 0, 0.08);
108
110
  border-right: none;
109
111
  border-left: none;
112
+ word-break: break-word;
110
113
 
111
114
  .shareIconContainer {
112
115
  display: flex;