diff --git a/src/components/common/MyTable/MyTable.tsx b/src/components/common/MyTable/MyTable.tsx index a962314..633a5c5 100644 --- a/src/components/common/MyTable/MyTable.tsx +++ b/src/components/common/MyTable/MyTable.tsx @@ -1,7 +1,8 @@ +'use client'; + import Loader from '@/components/common/Loader'; import { Scrollbar } from '@/components/common/Scrollbar'; import { box_requests } from '@/data/box/box.requests'; -import useRequest from '@/hooks/useRequest'; import { Box, styled, SxProps, Table, TableBody, TableCell, TableHead, TableRow, Theme } from '@mui/material'; import React from 'react'; @@ -50,6 +51,7 @@ const StyledTable = styled(Table)` } } `; + const StyledTableRow = styled(TableRow)``; const StyledTableCell = styled(TableCell)` flex-shrink: 0; @@ -64,10 +66,47 @@ type Props = { }; const MyTable = (props: Props) => { - const { columns, data, loading, onClickRow, color } = props; + const { columns, data, loading, onClickRow } = props; const isEmpty = !data?.length && !loading; + const [boxStatuses, setBoxStatuses] = React.useState>({}); + + React.useEffect(() => { + const fetchBoxStatuses = async () => { + const statuses: Record = {}; + + await Promise.all( + data.map(async row => { + try { + const res = await box_requests.find({ packetId: row.id }); + const boxData = res.data.data; + + const total = boxData.items.reduce( + (acc: { totalAmount: number; totalAccepted: number }, item: any) => { + acc.totalAmount += +item.amount || 0; + acc.totalAccepted += +item.acceptedNumber || 0; + return acc; + }, + { totalAmount: 0, totalAccepted: 0 } + ); + + statuses[row.id] = total.totalAmount === total.totalAccepted; + } catch (error) { + console.error('Error fetching box status:', error); + statuses[row.id] = false; + } + }) + ); + + setBoxStatuses(statuses); + }; + + if (!loading && data.length > 0) { + fetchBoxStatuses(); + } + }, [data, loading]); + return ( @@ -76,10 +115,9 @@ const MyTable = (props: Props) => { {columns.map((column, index) => ( (props: Props) => { {isEmpty ? ( - 'Empty' + + Empty + ) : loading ? ( - - - + + + + + ) : ( data.map((row: any, rowIndex) => { - let status = undefined; - const getOneBox = useRequest( - () => { - return box_requests.find({ packetId: row.id }); - }, - { - selectData(data) { - const boxData = data.data.data; - - return { - products_list: [ - ...boxData.items.map(item => { - let name = item.name; - let nameRu = item.nameRu; - - return { - id: item.id, - price: item.price, - - cargoId: item.cargoId, - trekId: item.trekId, - name: name, - acceptedNumber: item.acceptedNumber, - nameRu: nameRu, - amount: +item.amount, - weight: +item.weight, - }; - }), - ], - }; - }, - } - ); - { - (() => { - const total = getOneBox.data?.products_list.reduce( - (acc, product) => { - console.log(product, 'totalAccepted'); - acc.totalAmount += +product.amount || 0; - acc.totalAccepted += +product.acceptedNumber || 0; - return acc; - }, - { totalAmount: 0, totalAccepted: 0 } - ); - - status = total?.totalAmount === total?.totalAccepted; - })(); - } - - console.log(row, 'clent'); + const status = boxStatuses[row.id]; return ( (props: Props) => { } : {}), }} - onClick={() => { - onClickRow?.(row); - }} + onClick={() => onClickRow?.(row)} > {columns.map((column, index) => ( - {column.renderCell ? column.renderCell(row, rowIndex) : row[column.dataKey]} + {column.renderCell ? column.renderCell(row, rowIndex) : row[column.dataKey as keyof Data]} ))} diff --git a/src/data/item/item.mode.ts b/src/data/item/item.mode.ts index 3492ed3..6f5dd40 100644 --- a/src/data/item/item.mode.ts +++ b/src/data/item/item.mode.ts @@ -29,5 +29,5 @@ export type UpdateProductBodyType = { nameRu: string; amount: number; weight: number; - acceptedNumber: number; + acceptedNumber: number | null; }; diff --git a/src/routes/private/boxes/DashboardBoxesPage.tsx b/src/routes/private/boxes/DashboardBoxesPage.tsx index 6286eed..7a528c3 100644 --- a/src/routes/private/boxes/DashboardBoxesPage.tsx +++ b/src/routes/private/boxes/DashboardBoxesPage.tsx @@ -57,6 +57,7 @@ const DashboardBoxesPage = (props: Props) => { const [deleteIds, setDeleteIds] = useState([]); const [downloadIds, setDownloadIds] = useState([]); const [changeStatusIds, setChangeStatusIds] = useState([]); + const [boxAmounts, setBoxAmounts] = useState>({}); const boxStatusOptions = useMemo(() => { const p = ['READY_TO_INVOICE'] as BoxStatus[]; @@ -192,6 +193,40 @@ const DashboardBoxesPage = (props: Props) => { return () => clearTimeout(timeoutId); }, [keyword]); + useEffect(() => { + const fetchAmounts = async () => { + const result: Record = {}; + + await Promise.all( + list.map(async box => { + try { + const res = await box_requests.find({ packetId: box.id }); + const boxData = res.data.data; + + const total = boxData.items.reduce( + (acc: { totalAmount: number; totalAccepted: number }, item: any) => { + acc.totalAmount += +item.amount || 0; + acc.totalAccepted += +item.acceptedNumber || 0; + return acc; + }, + { totalAmount: 0, totalAccepted: 0 } + ); + + result[box.id] = total; + } catch (e) { + console.error(`Failed to fetch box ${box.id}`, e); + } + }) + ); + + setBoxAmounts(result); + }; + + if (list.length > 0 && !loading) { + fetchAmounts(); + } + }, [list, loading]); + // No, PartyName, PacketName, PartyTozaOg'irlik, CountOfItems, WeightOfItems, CargoID, PassportNameFamily - PacketStatusForInvoice const columns: ColumnData[] = [ { @@ -233,59 +268,12 @@ const DashboardBoxesPage = (props: Props) => { label: t('count_of_items'), width: 120, renderCell: data => { - const getOneBox = useRequest( - () => { - return box_requests.find({ packetId: data.id }); - }, - { - selectData(data) { - const boxData = data.data.data; - - return { - products_list: [ - ...boxData.items.map(item => { - let name = item.name; - let nameRu = item.nameRu; - - return { - id: item.id, - price: item.price, - - cargoId: item.cargoId, - trekId: item.trekId, - name: name, - acceptedNumber: item.acceptedNumber, - nameRu: nameRu, - amount: +item.amount, - weight: +item.weight, - }; - }), - ], - }; - }, - } - ); - + const total = boxAmounts[data.id]; + if (!total) return ...; return ( -
- {(() => { - const total = getOneBox.data?.products_list.reduce( - (acc, product) => { - console.log(product, 'totalAccepted'); - acc.totalAmount += +product.amount || 0; - acc.totalAccepted += +product.acceptedNumber || 0; - return acc; - }, - { totalAmount: 0, totalAccepted: 0 } - ); - - return ( - - {total?.totalAmount} | {total?.totalAccepted} - - ); - })()} -
+ + {total.totalAmount} | {total.totalAccepted} + ); }, }, diff --git a/src/routes/private/items/components/EditItemModal.tsx b/src/routes/private/items/components/EditItemModal.tsx index fd581ce..9f84886 100644 --- a/src/routes/private/items/components/EditItemModal.tsx +++ b/src/routes/private/items/components/EditItemModal.tsx @@ -1,15 +1,13 @@ import BaseButton from '@/components/ui-kit/BaseButton'; import BaseInput from '@/components/ui-kit/BaseInput'; import BaseModal from '@/components/ui-kit/BaseModal'; -import BaseReactSelect from '@/components/ui-kit/BaseReactSelect'; import { Product } from '@/data/item/item.mode'; import { item_requests } from '@/data/item/item.requests'; -import { staff_requests } from '@/data/staff/staff.requests'; import { useMyTranslation } from '@/hooks/useMyTranslation'; import { notifyUnknownError } from '@/services/notification'; import { Box, Grid, Stack, Typography, styled } from '@mui/material'; -import React, { useState } from 'react'; -import { Controller, useForm } from 'react-hook-form'; +import { useState } from 'react'; +import { useForm } from 'react-hook-form'; const StyledBox = styled(Box)` .title { @@ -52,6 +50,8 @@ const EditItemModal = ({ onClose, open, onSuccess, item }: Props) => { name: string; amount: number; weight: number; + acceptedNumber: number | null; + nameRu: string; }>({ defaultValues: { amount: item.amount, @@ -59,6 +59,8 @@ const EditItemModal = ({ onClose, open, onSuccess, item }: Props) => { name: item.name, trekId: item.trekId, weight: item.weight, + acceptedNumber: item.acceptedNumber, + nameRu: item.nameRu, }, });