@bjsdistribution/dms-client-return 0.1.60-prod → 0.1.61-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.
- package/dist/components/store.d.ts +2 -1
- package/dist/dms-client-return.cjs.development.js +223 -60
- package/dist/dms-client-return.cjs.development.js.map +1 -1
- package/dist/dms-client-return.cjs.production.min.js +1 -1
- package/dist/dms-client-return.cjs.production.min.js.map +1 -1
- package/dist/dms-client-return.esm.js +223 -60
- package/dist/dms-client-return.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/order-daily-overview/header/route-header/search/SearchType.tsx +11 -1
- package/src/components/order-daily-overview/header-filters/SelectionFilter.tsx +81 -56
- package/src/components/order-daily-overview/header-filters/filterStore.ts +1 -1
- package/src/components/order-daily-overview/index.tsx +1 -1
- package/src/components/order-daily-overview/table/ReturnTable.tsx +188 -104
- package/src/components/store.ts +7 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import { useAtom, useClientData } from '../../order-view/store';
|
|
1
|
+
import React, { useMemo, useState } from 'react';
|
|
2
|
+
import { useAtom, useClientData, useInternalSearchText } from '../../order-view/store';
|
|
3
3
|
import { useStatsLoading } from '../store/store';
|
|
4
4
|
import {
|
|
5
5
|
ColumStyle,
|
|
@@ -17,11 +17,11 @@ import CaretDownFilledIcon from '../../../common/CaretDownFilledIcon';
|
|
|
17
17
|
|
|
18
18
|
const ReturnTable: React.FC = () => {
|
|
19
19
|
const [clientData] = useClientData();
|
|
20
|
-
const [updatedData, setUpdatedData] = useState<any>([]);
|
|
21
20
|
const [statsLoading] = useStatsLoading();
|
|
22
21
|
const [, dispatch] = useAtom(filtersReducerAtom);
|
|
23
22
|
const navigate = useNavigate();
|
|
24
23
|
const [customers] = useCustomerData();
|
|
24
|
+
const [debouncedSearchText] = useInternalSearchText();
|
|
25
25
|
// const [searchParams] = useSearchParams();
|
|
26
26
|
|
|
27
27
|
//sorting
|
|
@@ -39,6 +39,39 @@ const ReturnTable: React.FC = () => {
|
|
|
39
39
|
});
|
|
40
40
|
};
|
|
41
41
|
|
|
42
|
+
//updated client data
|
|
43
|
+
const updatedData = useMemo(() => {
|
|
44
|
+
|
|
45
|
+
let baseCustomers = (debouncedSearchText && debouncedSearchText?.length > 0)
|
|
46
|
+
? (clientData || [])
|
|
47
|
+
: (customers || []);
|
|
48
|
+
|
|
49
|
+
const mappedCustomers = baseCustomers?.map((customer: any) => {
|
|
50
|
+
// Normal state: Merge aggregate stats from the stats API onto the generic customers list
|
|
51
|
+
const matchingClientStats = clientData?.find((client: any) =>
|
|
52
|
+
client?.customer_id != null && client?.customer_id.toString() === customer?.customer_id?.toString()
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
let processedChildren = customer?.children?.map((child: any) => {
|
|
56
|
+
const matchingChildStats = clientData?.find((client: any) =>
|
|
57
|
+
client?.customer_id != null && client?.customer_id.toString() === child?.customer_id?.toString()
|
|
58
|
+
);
|
|
59
|
+
return {
|
|
60
|
+
...child,
|
|
61
|
+
...matchingChildStats,
|
|
62
|
+
};
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
return {
|
|
66
|
+
...customer,
|
|
67
|
+
...matchingClientStats,
|
|
68
|
+
children: processedChildren,
|
|
69
|
+
};
|
|
70
|
+
}) || [];
|
|
71
|
+
|
|
72
|
+
return mappedCustomers;
|
|
73
|
+
}, [customers, clientData, debouncedSearchText]);
|
|
74
|
+
|
|
42
75
|
const sortedData = useMemo(() => {
|
|
43
76
|
if (!updatedData || !sortConfig) return updatedData;
|
|
44
77
|
|
|
@@ -70,22 +103,6 @@ const ReturnTable: React.FC = () => {
|
|
|
70
103
|
);
|
|
71
104
|
};
|
|
72
105
|
|
|
73
|
-
//updated client data
|
|
74
|
-
useEffect(() => {
|
|
75
|
-
const updatedClientData = clientData?.map(client => {
|
|
76
|
-
const matchingCustomer = customers?.find(
|
|
77
|
-
(customer: any) => customer?.customer_id === client?.customer_id
|
|
78
|
-
);
|
|
79
|
-
return {
|
|
80
|
-
...client,
|
|
81
|
-
account_number: matchingCustomer
|
|
82
|
-
? matchingCustomer?.account_number
|
|
83
|
-
: null,
|
|
84
|
-
};
|
|
85
|
-
});
|
|
86
|
-
setUpdatedData(updatedClientData);
|
|
87
|
-
}, [customers, clientData]);
|
|
88
|
-
|
|
89
106
|
//handle Redirect
|
|
90
107
|
const handleRedirect = (customerId: number) => {
|
|
91
108
|
if (customerId) {
|
|
@@ -188,95 +205,162 @@ const ReturnTable: React.FC = () => {
|
|
|
188
205
|
</tr>
|
|
189
206
|
) : (
|
|
190
207
|
sortedData?.map((key: any, index: number) => {
|
|
191
|
-
return
|
|
192
|
-
<tr key={index}>
|
|
193
|
-
<td>{key?.trading_as}</td>
|
|
208
|
+
if (!key) return null; // Safe rendering fallback
|
|
194
209
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
style={{
|
|
198
|
-
color: '#0099ff',
|
|
199
|
-
fontWeight: 600,
|
|
200
|
-
cursor: 'pointer',
|
|
201
|
-
}}
|
|
202
|
-
>
|
|
203
|
-
<span>{key?.customer_name}</span>
|
|
204
|
-
</td>
|
|
210
|
+
const renderDataRow = (rowKey: any, isChild: boolean = false) => {
|
|
211
|
+
if (!rowKey) return null; // Prevent properties of undefined UI crashes
|
|
205
212
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
213
|
+
return (
|
|
214
|
+
<tr key={isChild ? `child-${rowKey?.customer_id}` : rowKey?.customer_id} style={isChild ? { backgroundColor: '#ffffff' } : {}}>
|
|
215
|
+
<td
|
|
216
|
+
style={{
|
|
217
|
+
paddingLeft: '15px',
|
|
218
|
+
color: 'inherit',
|
|
219
|
+
}}
|
|
220
|
+
>
|
|
221
|
+
<span style={{ fontWeight: !isChild && rowKey?.children?.length > 0 ? 600 : 400 }}>
|
|
222
|
+
{rowKey?.trading_as}
|
|
223
|
+
</span>
|
|
224
|
+
</td>
|
|
214
225
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
}}
|
|
226
|
-
onClick={
|
|
227
|
-
key?.RTS > 0
|
|
228
|
-
? () => handleRedirectRTS(key?.customer_id, 'RTS')
|
|
229
|
-
: undefined
|
|
230
|
-
}
|
|
231
|
-
>
|
|
232
|
-
<ColumStyle>
|
|
233
|
-
<GreyBox
|
|
234
|
-
style={{
|
|
235
|
-
backgroundColor:
|
|
236
|
-
key?.RTS > 0
|
|
237
|
-
? 'rgba(99, 150, 229, 0.1)'
|
|
238
|
-
: 'rgba(153, 153, 153, 0.1)',
|
|
239
|
-
}}
|
|
240
|
-
>
|
|
241
|
-
{key?.RTS}
|
|
242
|
-
</GreyBox>
|
|
243
|
-
</ColumStyle>
|
|
244
|
-
</td>
|
|
226
|
+
<td
|
|
227
|
+
onClick={() => handleRedirect(rowKey?.customer_id)}
|
|
228
|
+
style={{
|
|
229
|
+
color: '#0099ff',
|
|
230
|
+
fontWeight: 600,
|
|
231
|
+
cursor: 'pointer',
|
|
232
|
+
}}
|
|
233
|
+
>
|
|
234
|
+
<span>{rowKey?.customer_name}</span>
|
|
235
|
+
</td>
|
|
245
236
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
<
|
|
253
|
-
<
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
<
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
237
|
+
<td>
|
|
238
|
+
<ColumStyle>
|
|
239
|
+
<GreyBox>{rowKey?.orders ?? 0}</GreyBox>
|
|
240
|
+
</ColumStyle>
|
|
241
|
+
</td>
|
|
242
|
+
|
|
243
|
+
<td>
|
|
244
|
+
<ColumStyle>
|
|
245
|
+
<GreyBox>{rowKey?.return_order_products ?? 0}</GreyBox>
|
|
246
|
+
</ColumStyle>
|
|
247
|
+
</td>
|
|
248
|
+
<td
|
|
249
|
+
style={{
|
|
250
|
+
color: rowKey?.RTS > 0 ? '#0099ff' : 'inherit',
|
|
251
|
+
fontWeight: rowKey?.RTS > 0 ? 600 : 'normal',
|
|
252
|
+
cursor: rowKey?.RTS > 0 ? 'pointer' : 'default',
|
|
253
|
+
}}
|
|
254
|
+
onClick={
|
|
255
|
+
rowKey?.RTS > 0
|
|
256
|
+
? () => handleRedirectRTS(rowKey?.customer_id, 'RTS')
|
|
257
|
+
: undefined
|
|
258
|
+
}
|
|
259
|
+
>
|
|
260
|
+
<ColumStyle>
|
|
261
|
+
<GreyBox
|
|
262
|
+
style={{
|
|
263
|
+
backgroundColor:
|
|
264
|
+
rowKey?.RTS > 0
|
|
265
|
+
? 'rgba(99, 150, 229, 0.1)'
|
|
266
|
+
: 'rgba(153, 153, 153, 0.1)',
|
|
267
|
+
}}
|
|
268
|
+
>
|
|
269
|
+
{rowKey?.RTS ?? 0}
|
|
270
|
+
</GreyBox>
|
|
271
|
+
</ColumStyle>
|
|
272
|
+
</td>
|
|
273
|
+
|
|
274
|
+
<td>
|
|
275
|
+
<ColumStyle>
|
|
276
|
+
<GreyBox>{rowKey?.PENDING ?? 0}</GreyBox>
|
|
277
|
+
</ColumStyle>
|
|
278
|
+
</td>
|
|
279
|
+
<td>
|
|
280
|
+
<ColumStyle>
|
|
281
|
+
<GreyBox>{rowKey?.['CLAIMS PAID'] ?? 0}</GreyBox>
|
|
282
|
+
</ColumStyle>
|
|
283
|
+
</td>
|
|
284
|
+
<td>
|
|
285
|
+
<ColumStyle>
|
|
286
|
+
<GreyBox>{rowKey?.DISPOSE ?? 0}</GreyBox>
|
|
287
|
+
</ColumStyle>
|
|
288
|
+
</td>
|
|
289
|
+
<td>
|
|
290
|
+
<ColumStyle>
|
|
291
|
+
<GreyBox>{rowKey?.['RE-ALLOCATE'] ?? 0}</GreyBox>{' '}
|
|
292
|
+
</ColumStyle>
|
|
293
|
+
</td>
|
|
294
|
+
<td>
|
|
295
|
+
<ColumStyle>
|
|
296
|
+
<GreyBox>{rowKey?.['RE-DEL'] ?? 0}</GreyBox>
|
|
297
|
+
</ColumStyle>
|
|
298
|
+
</td>
|
|
299
|
+
<td>
|
|
300
|
+
<ColumStyle>
|
|
301
|
+
<GreyBox>{rowKey?.RECYCLE ?? 0}</GreyBox>
|
|
302
|
+
</ColumStyle>
|
|
303
|
+
</td>
|
|
304
|
+
<td>
|
|
305
|
+
<ColumStyle>
|
|
306
|
+
<GreyBox>{rowKey?.UNKNOWN ?? 0}</GreyBox>
|
|
307
|
+
</ColumStyle>
|
|
308
|
+
</td>
|
|
309
|
+
</tr>
|
|
310
|
+
);
|
|
311
|
+
};
|
|
312
|
+
|
|
313
|
+
if (!key?.children || key?.children?.length === 0) {
|
|
314
|
+
return <React.Fragment key={index}>{renderDataRow(key, false)}</React.Fragment>;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
return (
|
|
318
|
+
<tr key={`group-${index}`}>
|
|
319
|
+
<td colSpan={12} style={{ padding: 0, border: 'none', background: 'transparent' }}>
|
|
320
|
+
<div style={{
|
|
321
|
+
margin: '12px 10px',
|
|
322
|
+
backgroundColor: '#f8fafc',
|
|
323
|
+
borderRadius: '16px',
|
|
324
|
+
border: '1px solid rgba(0,0,0,0.08)',
|
|
325
|
+
borderLeft: '4px solid #0099ff',
|
|
326
|
+
boxShadow: 'inset 0 1px 4px rgba(0,0,0,0.02)'
|
|
327
|
+
}}>
|
|
328
|
+
<StyledTableWrapper style={{
|
|
329
|
+
margin: '0',
|
|
330
|
+
border: 'none',
|
|
331
|
+
borderRadius: '15px',
|
|
332
|
+
overflow: 'hidden'
|
|
333
|
+
}}>
|
|
334
|
+
<StyledTable style={{ marginBottom: 0 }}>
|
|
335
|
+
<thead style={{ visibility: 'collapse' }}>
|
|
336
|
+
<tr>
|
|
337
|
+
{[
|
|
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 }}>
|
|
352
|
+
<div style={{ display: 'flex' }}>{label}</div>
|
|
353
|
+
</th>
|
|
354
|
+
))}
|
|
355
|
+
</tr>
|
|
356
|
+
</thead>
|
|
357
|
+
<tbody>
|
|
358
|
+
{renderDataRow(key, false)}
|
|
359
|
+
{key?.children?.map((child: any) => renderDataRow(child, true))}
|
|
360
|
+
</tbody>
|
|
361
|
+
</StyledTable>
|
|
362
|
+
</StyledTableWrapper>
|
|
363
|
+
</div>
|
|
280
364
|
</td>
|
|
281
365
|
</tr>
|
|
282
366
|
);
|
package/src/components/store.ts
CHANGED
|
@@ -41,6 +41,8 @@ const inQueueDataAtom = atom<any>({});
|
|
|
41
41
|
|
|
42
42
|
const customerData = atom<any>([]);
|
|
43
43
|
|
|
44
|
+
const flatCustomerData = atom<any>([]);
|
|
45
|
+
|
|
44
46
|
const actionTypeData = atom<any>([]);
|
|
45
47
|
|
|
46
48
|
const locationData = atom<any>([]);
|
|
@@ -185,6 +187,10 @@ function useCustomerData() {
|
|
|
185
187
|
return useAtom(customerData);
|
|
186
188
|
}
|
|
187
189
|
|
|
190
|
+
function useFlatCustomerData() {
|
|
191
|
+
return useAtom(flatCustomerData);
|
|
192
|
+
}
|
|
193
|
+
|
|
188
194
|
function useActionType() {
|
|
189
195
|
return useAtom(actionTypeData);
|
|
190
196
|
}
|
|
@@ -323,4 +329,5 @@ export {
|
|
|
323
329
|
useSelectedClientAfterOrders,
|
|
324
330
|
useClientLoading,
|
|
325
331
|
useSendEmailNotification,
|
|
332
|
+
useFlatCustomerData,
|
|
326
333
|
};
|