File "ArticleReadDrawer.tsx"
Full Path: /var/www/html/gitep_front/src/pages/CashPage/ArticleReadDrawer.tsx/ArticleReadDrawer.tsx
File size: 32.29 KB
MIME-type: text/x-java
Charset: utf-8
import { StatusValue } from "@/entities/payment-card/model";
import { $filterStore, addPaymentCardToPayments } from "@/shared";
import TableComponent from "@/shared/ui/TableComponent/TableComponent";
import { CustomStatus } from "@/shared/ui/Tags/tags";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import ArrowShowRight from "@shared/assets/images/icons/arrow-show-right.svg?react";
import ArrowShow from "@shared/assets/images/icons/arrow-show.svg?react";
import iconCalendar from "@shared/assets/images/icons/calendar-new.svg";
import {TableColumnsType, Tooltip} from "antd";
import { Button, Checkbox, Flex, Input, Segmented, Select, Typography } from "antd";
import { TableRowSelection } from "antd/es/table/interface";
import { useUnit } from "effector-react";
import React, { useEffect, useMemo, useRef, useState } from "react";
import styles from './ArticleReadDrawer.module.scss';
import { DeleteArticleModal } from "@/entities/project-page/ui/deleteArticleModal/DeleteArticleModal";
import { getWithPaymentsProject, getWithPaymentsProjectCurrent } from "@/entities/project/api/getWithPayments";
import { getWithArticleProject } from "@/entities/project/api/getWithArticle";
import { getWithContragent } from "@/entities/project/api/getWithContragent";
import { deleteArticleProject, deleteArticleWithPaymentProject } from "@/entities/article/api/deleteArticle";
import { openPaymentDrawer } from "@/entities/payment-card/stores/payment/payment-drawer-store";
import { PaymentСard } from "@/entities/payment-card/ui";
import { getDefaultPayment } from "@/pages/main/ui/Table";
import { addArticle, updateArticle } from "@/entities/project/api/updateArticle";
import { updateArticleGroupLimit, updateArticleLimit, updateArticleProjectLimit } from "@/entities/article/api/updateArticleLimit";
import { getProjects } from "@/entities/project/api/getProjectsGroups";
import { getPaymentCard } from "@/entities/payment-card/api/getPaymentCard";
import { cleanAndValidatePayment, updatePayment } from "@/entities/payment-card/api/updatePayment";
import { createPayment } from "@/entities/payment-card/api/createPayment";
import { TotalBlock } from "@/pages/ProjectPage/TotalBlock/TotalBlock";
import { $roleStore, $permissionStore } from "@features/roles/store/stores"
import { formatNumber } from '@/shared/lib';
const { Title, Text } = Typography
interface ArticleGroup {
key: string;
type: 'income' | 'expense';
articleType: string
name: string;
amount: number;
limit: number;
children?: ArticleItem[];
expanded?: boolean;
}
interface ArticleItem {
key: string;
name: string;
amount: number;
limit: any;
articleType?: string
parentKey?: string
payment?: any
}
const segmentOptions = [
{
label: (
<Flex align="center" gap={10}>
По дате
{/* <Badge className={styles.badge_counter} count={12} color="#667085" /> */}
</Flex>
),
value: 'date'
},
{
label: (
<Flex align="center" gap={10}>
По контрагентам
{/* <Badge className={styles.badge_counter} count={12} color="#667085" /> */}
</Flex>
),
value: 'contragent',
},
]
const contragentColumns: TableColumnsType<any> = [
{
title: <Text style={{ marginLeft: '28px', color: '#98A2B3'}}>Дата</Text>,
dataIndex: 'date',
width: 140,
render: (_: any, record: any) => {
if (record.children) return null;
return (<Text style={{ marginLeft: '12px'}}>{record.date}</Text>);
},
},
{
title: 'Назначение',
width: 200,
dataIndex: 'purpose',
render: (_: any, record: any) => {
if (record.children) return null;
const fullDescription = `${record.offer_number} | ${record.object_address} | ${record.short_description}`;
return (
<Flex vertical>
<Text ellipsis title={record.purpose}>{record.purpose}</Text>
<Text type="secondary" ellipsis title={fullDescription} style={{ fontSize: 12 }}>{fullDescription}</Text>
</Flex>
);
},
ellipsis: true
},
{
title: 'Сумма, ₽',
dataIndex: 'amount',
align: 'right',
width: 120,
render: (value: string, record: any) => {
return record.children ? (
<Text strong>{formatNumber(record.totalAmount)}</Text>
) : (
<Text>{formatNumber(record.amount)}</Text>
)
}
},
{
title: 'Статус',
dataIndex: 'status',
width: 150,
render: (status, record: any) =>
record.children ? null : (
<CustomStatus prefixIcon status={status} width='120' />
)
}
];
interface IProjectReadDrawer {
projectData?: any
openChildRow?: any
isPaymentPage?: boolean
detailDrawerData?: any
dateInfo?: any
filters?: any
selectedDate: string | undefined
selectedStatus: string | undefined
typeOfCell?: string | null
}
const formatDate = (dateString: string) => {
if (!dateString) return '-';
const date = new Date(dateString);
if (isNaN(date.getTime())) return '-';
const options: Intl.DateTimeFormatOptions = { day: '2-digit', month: '2-digit', year: 'numeric' };
return date.toLocaleDateString('ru-RU', options);
};
const formatAmount = (amount: string) => {
const number = parseFloat(amount);
return isNaN(number) ? '0' : number.toLocaleString('ru-RU', { maximumFractionDigits: 0 });
};
const transformArticles = (data: any): ArticleGroup[] => {
const incomeGroup: ArticleGroup = {
key: 'income',
type: 'income',
name: 'Доходы',
articleType: 'credit',
amount: 0,
limit: data.data.project_limits_debit,
children: []
};
const expenseGroup: ArticleGroup = {
key: 'expense',
type: 'expense',
name: 'Расходы',
articleType: 'debit',
amount: 0,
limit: data.data.project_limits_credit,
children: []
};
const paymentsData = data.data.payments_by_article;
let articles: any[] = [];
if (Array.isArray(paymentsData)) {
articles = paymentsData;
} else if (typeof paymentsData === 'object' && paymentsData !== null) {
articles = Object.values(paymentsData);
}
articles.forEach((item) => {
const articleItem: ArticleItem = {
key: item.id,
name: item.name,
amount: item.payment ? +item.payment.amount : 0,
limit: +item.payment_limits || +item.amount_limit || 0,
articleType: item.article_type,
parentKey: item.article_type !== 'debit' ? 'income' : 'expense',
payment: item.payment ? item.payment : null
};
if (item.article_type === 'credit') {
incomeGroup.children!.push(articleItem);
incomeGroup.amount += articleItem.amount;
} else if (item.article_type === 'debit') {
expenseGroup.children!.push(articleItem);
expenseGroup.amount += articleItem.amount;
}
});
return [incomeGroup, expenseGroup];
};
const transformContragentData = (data: any, paymentsByDate: any) => {
const paymentsList = Array.isArray(paymentsByDate) ? paymentsByDate : [];
const validPaymentIds = paymentsList
.map((p: any) => p?.payment?.id)
.filter((id: any) => id != null);
const paymentAmounts = new Map<number, number>();
paymentsList.forEach((p: any) => {
const pid = p?.payment?.id;
if (pid != null) {
paymentAmounts.set(pid, parseFloat(p?.payment?.amount || '0'));
}
});
const contragents = Array.isArray(data) ? data : [];
return contragents.map((contragent: any) => {
const contragentPayments = Array.isArray(contragent?.payments) ? contragent.payments : [];
const filteredPayments = contragentPayments
.filter((payment: any) => payment && validPaymentIds.includes(payment.id));
const totalAmount = filteredPayments.reduce((sum: number, payment: any) => {
return sum + (paymentAmounts.get(payment.id) || 0);
}, 0);
return {
key: contragent?.id,
contragent: contragent?.name || '-',
totalAmount: totalAmount,
amount: 0,
children: contragentPayments
.filter((payment: any) => payment && validPaymentIds.includes(payment.id))
.map((payment: any) => ({
key: 'child-' + payment.id,
date: payment?.payment_date ? formatDate(payment.payment_date) : '-',
purpose: payment?.name || '-',
project: contragent?.name || "-",
object_address: payment?.project?.object_address || "-",
offer_number: payment?.project?.offer_number || "-",
short_description: payment?.project?.short_description || "-",
amount: String(payment?.amount),
status: payment?.status,
type: payment?.payment_type
}))
};
});
};
export const ArticleReadDrawer = ({ selectedStatus, selectedDate, projectData, openChildRow, isPaymentPage, detailDrawerData, dateInfo, filters, typeOfCell }: IProjectReadDrawer) => {
const [currentTab, setCurrentTab] = useState('date')
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
const [articles, setArticles] = useState<ArticleGroup[]>([]);
const [articlesSelect, setArticlesSelect] = useState([]);
const [availableArticles, setAvailableArticles] = useState([]);
const [editingLimit, setEditingLimit] = useState<{ key: string; isGroup: boolean; initialValue: number;} | null>(null);
const [deleteArticle, setDeleteArticle]: any = useState(null)
const [deleteCurrentArticle, setDeleteCurrentArticle]: any = useState(null)
const [projectsData, setProjectsData]: any = useState(null)
const [contragentData, setContragentData]: any = useState(null)
const [articleDeleteId, setArticleDeleteId]: any = useState(null)
const [articlesDeleteSelect, setArticlesDeleteSelect]: any = useState()
const [tempSelectRow, setTempSelectRow] = useState<{ parentKey: string | null; type: 'debit' | 'credit' } | null>(null);
const [articlesAmount, setArticlesAmount]: any = useState({})
const [deleteArticlePaymentId, setDeleteArticlePaymentId] = useState(null)
const [projectsLimitCredit, setProjectsLimitCredit]: any = useState(null)
const [projectsLimitDebit, setProjectsLimitDebit]: any = useState(null)
const [isPaymentOpen, setIsPaymentOpen] = useState(false);
const [paymentCard, changePaymentCard] = useState(getDefaultPayment());
const [openedPaymentCard, setOpenedPaymentCard] = useState()
const [openedArticleSelectKey, setOpenedArticleSelectKey] = useState<string | null>(null);
const articleSelectRef = useRef<HTMLDivElement>(null);
const roleStore = useUnit($roleStore).role
useEffect(() => {
if (!articles) return;
const calculateTotals = (items: any) => {
const totals: any = {};
items.forEach((item: any) => {
if (item.children && item.children.length > 0) {
const debit = { amount: 0, limit: 0 };
const credit = { amount: 0, limit: 0 };
item.children.forEach((child: any) => {
if (child.articleType === 'debit') {
debit.amount += child.amount || 0;
debit.limit += child.limit || 0;
} else if (child.articleType === 'credit') {
credit.amount += child.amount || 0;
credit.limit += child.limit || 0;
}
});
totals[item.key] = { debit, credit };
}
});
return totals;
};
setArticlesAmount(calculateTotals(articles));
}, [articles]);
const getArticle = async(articleType: string) => {
const { data }: any = await getWithArticleProject(articleType)
if (data?.data) {
const articleFormated = data.data.map((it: any) => ({label: it.name, value: it.id}))
setArticlesSelect(articleFormated)
}
}
const getProject = async() => {
if (!projectData?.id) {
console.warn('ArticleReadDrawer - projectData.id is undefined');
return;
}
const { data }: any = await getWithPaymentsProjectCurrent(projectData.id)
setProjectsData(data.data)
setContragentData(data.data.payments_by_counterparty)
setProjectsLimitDebit(+data.data.project_limits_debit)
setProjectsLimitCredit(+data.data.project_limits_credit)
const art = transformArticles(data)
setArticles(art);
changePaymentCard({...paymentCard, distributions: [{...paymentCard.distributions[0], project_id: projectData.id}]})
}
useEffect(() => {
if(!openChildRow) {
setSelectedRowKeys([])
return
}
getProject()
}, [openChildRow])
const payments = useMemo(() => {
if(detailDrawerData?.payments_by_date) {
return detailDrawerData?.payments_by_date?.map((payment: any, index: number) => ({
key: payment.payment?.id,
uId: Date.now() + index,
date: formatDate(payment.date),
purpose: payment.payment?.name || "-",
contragent: payment.payment?.counterparty?.name || "-",
project: payment.project?.short_description,
amount: String(payment?.payment?.amount),
status: payment?.payment?.status === 'active' ? 'paid' : payment?.payment?.status as StatusValue,
type: payment.payment?.payment_type,
}))
} else {
return detailDrawerData?.map((payment: any, index: number) => ({
key: payment?.id,
uId: Date.now() + index,
date: formatDate(payment?.payment_date),
purpose: payment?.name || "-",
// contragent: payment.payment?.counterparty?.name || "-",
project: payment?.projectTitle,
amount: String(payment?.amount),
status: payment?.status === 'active' ? 'paid' : payment?.status as StatusValue,
type: payment?.payment_type,
}))
}
}, [detailDrawerData]);
const contragent = useMemo(() => {
if (!detailDrawerData?.payments_by_counterparty) return [];
return transformContragentData(detailDrawerData.payments_by_counterparty, detailDrawerData.payments_by_date);
}, [detailDrawerData]);
const onSelectChange = (key: React.Key, checked: boolean, record: any) => {
const keysToUpdate = [key];
if (record.children) {
const childKeys = record.children.map((child: any) => child.key);
keysToUpdate.push(...childKeys);
}
setSelectedRowKeys(prev => {
const newKeys = new Set(prev);
if (checked) {
keysToUpdate.forEach(k => newKeys.add(k));
} else {
keysToUpdate.forEach(k => newKeys.delete(k));
}
return Array.from(newKeys);
});
};
const handleSegmentChange = (value: string) => {
if(value === 'date') {
setCurrentTab('date')
setSelectedRowKeys([])
}
if(value === 'article') {
setCurrentTab('article')
setSelectedRowKeys([])
}
if(value === 'contragent') {
setCurrentTab('contragent')
setSelectedRowKeys([])
}
};
const rowSelection: TableRowSelection<any> = {
selectedRowKeys,
onChange: setSelectedRowKeys,
columnWidth: 48,
renderCell: (checked, record) => (
<div onClick={(e) => e.stopPropagation()}>
<Checkbox
className={styles.checkbox}
checked={checked}
onChange={(e) => onSelectChange(record.uId, e.target.checked, record)}
/>
</div>
)
}
const selectedCount = selectedRowKeys.length;
const { totalIncome, totalExpense } = useMemo(() => {
let income = 0;
let expense = 0;
const processAmount = (amount: string) => Number(amount.replace(/\s/g, '')) || 0;
if (currentTab === 'date') {
payments
?.filter((payment: any) => selectedRowKeys.includes(payment.uId))
?.forEach(({ amount, type }: any) => {
if (type === 'issueance') {
expense += processAmount(amount);
} else if (type === 'payment') {
expense += processAmount(amount);
} else if (type === 'moving') {
typeOfCell === 'income' ? income += processAmount(amount) : expense += processAmount(amount);
}else {
income += processAmount(amount);
}
});
}
if (currentTab === 'contragent') {
contragent.forEach((contragent:any) => {
contragent.children?.forEach((child: any) => {
if (selectedRowKeys.includes(child.key)) {
typeOfCell=== 'income' ?
(child.type === 'issueance'? expense += processAmount(child.amount) : child.type === 'payment'? expense += processAmount(child.amount) : income += processAmount(child.amount)) :
(child.type === 'issueance'? expense += processAmount(child.amount) : child.type === 'payment'? expense += processAmount(child.amount) : child.type === 'moving'? expense += processAmount(child.amount) : expense += processAmount(child.amount));
}
});
});
}
return { totalIncome: income, totalExpense: expense };
}, [selectedRowKeys, currentTab, payments]);
const handleDeleteArticle = (articleType: string, articleID: string, value: string, currentArticlePaymentId: boolean) => {
setArticleDeleteId(articleID);
let isPaymentId = null
// Формируем отфильтрованные данные с добавлением isPayment
const articlesDeleteData = articles
.flatMap(article => article.children || [])
.filter(child => child.key !== articleID)
.map(child => ({
value: child.key,
label: child.name,
payment: child.payment,
isPayment: !!child.payment
}));
setDeleteArticle(value);
setDeleteCurrentArticle(currentArticlePaymentId)
setArticlesDeleteSelect(articlesDeleteData);
};
const updateArticleHandler = async(option: any, articleType: string) => {
await addArticle(projectData.id, option)
getProject()
setOpenedArticleSelectKey(null)
}
const columns: TableColumnsType<any> = [
{
title: "Дата",
dataIndex: "date",
render: (_, record) => <Text style={{ color: '#98A2B3' }}>{record.date}</Text>,
width: 100
},
{
title: "Назначение",
dataIndex: "purpose",
width: 198,
render: (_, record) => {
return (
<Flex vertical>
<Text ellipsis title={record.purpose}>{record.purpose}</Text>
<Text ellipsis title={record.contragent} style={{ fontSize: 14, color: '#98A2B3' }}>{record.contragent}</Text>
</Flex>
);
},
ellipsis: true
},
{
title: "Проект",
dataIndex: "project",
width: 156,
render: (_, record) => {
return <Text style={{ color: '#98A2B3' }} title={record.project}>{record.project}</Text>},
ellipsis: true
},
{
title: "Сумма, ₽",
dataIndex: "amount",
align: "right",
width: 130,
render: (value: string, record: any) => {
return <Text strong>{formatNumber(record.amount)}</Text>
}
},
{
title: "Статус",
dataIndex: "status",
render: (status: StatusValue | undefined) =>
status ? <CustomStatus prefixIcon status={status} width='160'/> : null,
width: 170
}
]
const handleToggleSelectRow = (record: any) => {
if (tempSelectRow?.parentKey === record.key) {
setTempSelectRow(null);
} else {
setTempSelectRow({
parentKey: record.key,
type: record.articleType || (record.name !== 'Доходы' ? 'debit' : 'credit'),
});
getArticle(record.name !== 'Доходы' ? 'debit' : 'credit')
}
};
const getModifiedArticles = useMemo(() => {
if (!tempSelectRow) return articles;
return articles.map(group => {
if (group.key === tempSelectRow.parentKey) {
return {
...group,
children: [
{
key: `temp-row-${tempSelectRow.parentKey}`,
isTempRow: true,
parentKey: tempSelectRow.parentKey,
articleType: tempSelectRow.type,
},
...(group.children || []),
],
};
}
return group;
});
}, [articles, tempSelectRow]);
const commonRowSelection: TableRowSelection<any> = {
selectedRowKeys,
onChange: setSelectedRowKeys,
columnWidth: 48,
renderCell: (checked, record) => (
<Checkbox
className={styles.checkbox}
checked={checked}
onChange={(e) =>{
e.stopPropagation()
onSelectChange(record.key, e.target.checked, record)}}
/>
)
};
const contragentRowSelection: TableRowSelection<any> = {
selectedRowKeys,
onChange: setSelectedRowKeys,
columnWidth: 48,
renderCell: (checked, record) => {
const isParent = record.children;
if (isParent) {
const childKeys = record.children.map((child: any) => child.key);
const allChildrenSelected = childKeys.every((key: React.Key) => selectedRowKeys.includes(key));
return (
<Checkbox
className={styles.checkbox}
checked={allChildrenSelected}
onChange={(e) => {
if (e.target.checked) {
setSelectedRowKeys(prev => [...new Set([...prev, ...childKeys])]);
} else {
setSelectedRowKeys(prev => prev.filter(k => !childKeys.includes(k)));
}
}}
/>
);
} else {
return (
<div onClick={(e) => e.stopPropagation()}>
<Checkbox
className={styles.checkbox}
checked={checked}
onChange={(e) => onSelectChange(record.key, e.target.checked, record)}
/>
</div>
);
}
}
};
const deleteArticleHandler = async(selectId: any, deleteId: any, articleId: any) => {
try {
if(articleId) {
await deleteArticleWithPaymentProject(deleteId, selectId, projectData.id)
await getProject()
setDeleteArticle(null)
return
}
await deleteArticleProject(deleteId, selectId, projectData.id)
await getProject()
setDeleteArticle(null)
}catch(err) {
console.error(err)
}
}
const plusLeft: any = formatAmount(String(articles[0]?.amount))
const plusRigth: any = formatAmount(String(articles[1]?.limit))
const plusLeft2: any = formatAmount(String(articles[1]?.amount))
const plusRigth2: any = formatAmount(String(articles[0]?.limit))
const closePaymentCard = async() => {
changePaymentCard(getDefaultPayment())
setIsPaymentOpen(false)
}
const openDraftPayment = () => {
setIsPaymentOpen(true);
};
const savePayment = async () => {
try {
let newPayment
if (paymentCard?.id !== null) {
const validPayment = await cleanAndValidatePayment(paymentCard);
const response = await updatePayment(validPayment);
newPayment = response?.data?.data
} else {
const validPayment = await cleanAndValidatePayment(paymentCard);
const response = await createPayment(validPayment);
newPayment = response?.data?.data
}
if (newPayment) {
addPaymentCardToPayments(newPayment);
} else {
console.warn("Ошибка: newPayment не создан");
}
return newPayment
} catch (error) {
console.error("Ошибка при сохранении платежа:", error);
setIsPaymentOpen(false);
return null;
}
}
const onSaveClick = async () => {
try {
const newPayment:any = await savePayment()
if (!newPayment) {
setIsPaymentOpen(false);
alert("Ошибка. Карточка не создана1")
return;
}
changePaymentCard(newPayment);
setOpenedPaymentCard(newPayment)
return newPayment;
} catch (error) {
alert(error);
}
}
const openPayment = async (paymentId: any) => {
const paymentIdStr = paymentId.toString();
const numericId = paymentIdStr.replace(/\D/g, '');
const properId = Number(numericId);
const paymentcard = await getPaymentCard(properId)
changePaymentCard(paymentcard?.data)
setIsPaymentOpen(true);
}
const sortedPayments = payments.sort((a:any, b: any) => {
// Проверяем, что дата не равна '-' (некорректная дата)
if (a.date === '-' || b.date === '-') {
return a.date === '-' ? 1 : -1; // Некорректные даты в конец
}
const dateA = new Date(a.date.split('.').reverse().join('-'));
const dateB = new Date(b.date.split('.').reverse().join('-'));
// Проверяем валидность дат
if (isNaN(dateA.getTime()) || isNaN(dateB.getTime())) {
return 0; // Если даты некорректные, не меняем порядок
}
return dateB.valueOf() - dateA.valueOf();
});
contragent.map((item:any) => {
const updatedItem = { ...item };
if(item.children.length > 1) {
item.children.sort((a:any, b:any) => {
// Проверяем, что дата не равна '-' (некорректная дата)
if (a.date === '-' || b.date === '-') {
return a.date === '-' ? 1 : -1; // Некорректные даты в конец
}
const dateA = new Date(a.date.split('.').reverse().join('-'));
const dateB = new Date(b.date.split('.').reverse().join('-'));
// Проверяем валидность дат
if (isNaN(dateA.getTime()) || isNaN(dateB.getTime())) {
return 0; // Если даты некорректные, не меняем порядок
}
return dateB.valueOf() - dateA.valueOf();
});
}
return updatedItem;
});
return (
<Flex vertical gap={7} className={styles.groupReadContainer}>
<Flex className={styles.filterInfo} gap={8}>
<Flex className={styles.filterButtons}><img src={iconCalendar}/>
<Text ellipsis style={{maxWidth: '150px', color: '#531DAB'}} title={selectedDate? selectedDate: dateInfo}>{selectedDate? selectedDate: dateInfo}</Text>
</Flex>
<Flex className={styles.filterButtons}>{detailDrawerData?.name}</Flex>
{/* <Flex className={styles.filterButtons}>{filters.statuses?.length && filters.statuses[0] === 'payments_in_progress_all' ? 'Платежи в работе' : 'Проведенные платежи'}</Flex> */}
<Flex className={styles.filterButtons}>{filters.statuses?.length ? selectedStatus : 'Проведенные платежи'}</Flex>
</Flex>
<Flex vertical>
<Flex style={{ justifyContent: 'space-between' }}>
<Segmented
className={styles.filter}
size="large"
options={segmentOptions}
value={currentTab}
onChange={handleSegmentChange}
/>
</Flex>
</Flex>
{currentTab === 'date' && payments && (
<div style={{ height: 'calc(100vh - 205px' }}>
<TableComponent
rowKey="uId"
columns={columns}
className={styles.wrapperDate}
onRow={(record, rowIndex) => {
return {
onClick: (e) => {
e.stopPropagation()
openPayment(record.key)
},
};
}}
dataSource={sortedPayments}
rowClassName={() => styles.paymentRow}
rowSelection={rowSelection}
// style={{ border: '1px solid #D0D5DD', borderRadius: '8px'}}
/>
</div>
)
}
{currentTab === 'contragent' && contragent && (
<div style={{ height: 'calc(100vh - 205px' }}>
<TableComponent
columns={contragentColumns}
dataSource={contragent}
rowSelection={currentTab === 'contragent' ? contragentRowSelection : commonRowSelection}
rowClassName={(record) =>
record.isGroup ? styles.groupRow : styles.articleRow
}
onRow={(record, rowIndex) => {
return {
onClick: (e) => {
if(!record.children) {
e.stopPropagation()
openPayment(record.key)
}
},
};
}}
className={styles.wrapper}
// style={{ border: '1px solid #D0D5DD', borderRadius: '8px'}}
expandable={{
defaultExpandAllRows: false,
expandIcon: ({ expanded, onExpand, record }) =>
record.children ? (
<Flex align="center" gap={8} onClick={(e) => { e.stopPropagation(); onExpand(record, e); }} style={{ cursor: 'pointer', position: 'absolute', left: '10px', top: '20px' }}>
{expanded ? <ArrowShow width={16} height={16} /> : <ArrowShowRight width={16} height={16} />}
<Tooltip placement="bottomRight" color="#344054" title={record.contragent}>
<Text style={{
position: 'absolute',
left: '32px',
zIndex: 5,
display: 'inline-block',
width: '250px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
title={record.purpose}
>
{record.contragent}
</Text>
</Tooltip>
</Flex>
) : null
}}
// expandIcon={({ expanded, onExpand, record }) =>
// record.children ? (
// <span
// onClick={(e) => {
// e.stopPropagation()
// onExpand(record, e)
// }}
// style={{ marginRight: 0, transition: "all 0.3s", position: 'absolute', left: '14px' }}
// >
// {expanded ? (
// <ArrowShow width={16} height={16} />
// ) : (
// <ArrowShowRight width={16} height={16} />
// )}
// </span>
// ) : null
// }
pagination={false}
/>
</div>
)}
<DeleteArticleModal
onCancel={() => setDeleteArticle(null)}
articlesSelect={articlesDeleteSelect}
articleDeleteId={articleDeleteId}
deleteCurrentArticle={deleteCurrentArticle}
onConfirm={deleteArticleHandler}
articleDetails={deleteArticle || ''}
deleteArticlePaymentId={deleteArticlePaymentId}
open={deleteArticle}
articleOptions={articlesDeleteSelect}
/>
{selectedRowKeys.length ? (
<TotalBlock
selectedCount={selectedCount}
totalIncome={totalIncome}
totalExpense={totalExpense}
isUpload={false}
top={-90}
/>
) : ''}
<PaymentСard
isProjectPage={true}
clearPayments={() => {
closePaymentCard()
changePaymentCard(getDefaultPayment())
}}
open={isPaymentOpen}
paymentCard={paymentCard}
changePaymentCard={changePaymentCard}
setOpenedPaymentCard={setOpenedPaymentCard}
onClose={closePaymentCard}
onOpen={openDraftPayment}
onSaveClick={onSaveClick}
dublicatePayment={() => {}}
deletePayment={() => {}}
openPayment={openPayment}
roleStore={roleStore}
setIsPaymentOpen={setIsPaymentOpen}
/>
</Flex>
)
}