QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 05:40:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(webapp): AR/AP aging summary table columns

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2023-08-26 01:54:33 +02:00
parent 4e66d1ac98
commit 321de4d327
9 changed files with 174 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryBody.tsx
View File

@@ -18,11 +18,11 @@ function APAgingSummaryBodyJSX({
// #withCurrentOrganization
organizationName,
}) {
const { isLoading } = useAPAgingSummaryContext();
const { isAPAgingLoading } = useAPAgingSummaryContext();
return (
<FinancialReportBody>
{isLoading ? (
{isAPAgingLoading ? (
<FinancialSheetSkeleton />
) : (
<APAgingSummaryTable organizationName={organizationName} />

22
packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx
View File

@@ -20,7 +20,7 @@ export default function APAgingSummaryTable({
}) {
// AP aging summary report content.
const {
APAgingSummary: { tableRows },
APAgingSummary: { table },
isAPAgingLoading,
} = useAPAgingSummaryContext();
@@ -36,7 +36,7 @@ export default function APAgingSummaryTable({
>
<APAgingSummaryDataTable
columns={columns}
data={tableRows}
data={table.rows}
rowClassNames={tableRowTypesToClassnames}
noInitialFetch={true}
sticky={true}
@@ -54,6 +54,24 @@ const APAgingSummaryDataTable = styled(ReportDataTable)`
padding-top: 0.32rem;
padding-bottom: 0.32rem;
}
&:not(.no-results) {
.td {
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
&:not(:first-child) .td {
border-top: 1px solid transparent;
}
&.row_type--total {
font-weight: 500;
.td {
border-top: 1px solid #bbb;
border-bottom: 3px double #333;
}
}
}
}
}
`;

93
packages/webapp/src/containers/FinancialStatements/APAgingSummary/components.tsx
View File

@@ -1,59 +1,72 @@
// @ts-nocheck
import React, { useMemo } from 'react';
import intl from 'react-intl-universal';
import * as R from 'ramda';
import { If, FormattedMessage as T } from '@/components';
import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
import { getColumnWidth } from '@/utils';
import FinancialLoadingBar from '../FinancialLoadingBar';
import { agingSummaryDynamicColumns } from '../AgingSummary/dynamicColumns';
/**
* Retrieve AP aging summary columns.
*/
export const useAPAgingSummaryColumns = () => {
const {
APAgingSummary: { tableRows, columns },
APAgingSummary: { table },
} = useAPAgingSummaryContext();
const agingColumns = React.useMemo(() => {
return columns.map(
(agingColumn) =>
`${agingColumn.before_days} - ${
agingColumn.to_days || intl.get('and_over')
}`,
);
}, [columns]);
return useMemo(
() => [
{
Header: <T id={'vendor_name'} />,
accessor: 'name',
className: 'vendor_name',
width: 240,
sticky: 'left',
textOverview: true,
},
{
Header: <T id={'current'} />,
accessor: 'current',
className: 'current',
width: getColumnWidth(tableRows, `current`, { minWidth: 120 }),
},
...agingColumns.map((agingColumn, index) => ({
Header: agingColumn,
accessor: `aging-${index}`,
width: getColumnWidth(tableRows, `aging-${index}`, { minWidth: 120 }),
})),
{
Header: <T id={'total'} />,
accessor: 'total',
width: getColumnWidth(tableRows, 'total', { minWidth: 120 }),
},
],
[tableRows, agingColumns],
);
return agingSummaryDynamicColumns(table.columns, table.rows);
};
/**
* Retrieve AP aging summary columns.
*/
// export const useAPAgingSummaryColumns = () => {
// const {
// APAgingSummary: { tableRows, columns },
// } = useAPAgingSummaryContext();
// const agingColumns = React.useMemo(() => {
// return columns.map(
// (agingColumn) =>
// `${agingColumn.before_days} - ${
// agingColumn.to_days || intl.get('and_over')
// }`,
// );
// }, [columns]);
// return useMemo(
// () => [
// {
// Header: <T id={'vendor_name'} />,
// accessor: 'name',
// className: 'vendor_name',
// width: 240,
// sticky: 'left',
// textOverview: true,
// },
// {
// Header: <T id={'current'} />,
// accessor: 'current',
// className: 'current',
// width: getColumnWidth(tableRows, `current`, { minWidth: 120 }),
// },
// ...agingColumns.map((agingColumn, index) => ({
// Header: agingColumn,
// accessor: `aging-${index}`,
// width: getColumnWidth(tableRows, `aging-${index}`, { minWidth: 120 }),
// })),
// {
// Header: <T id={'total'} />,
// accessor: 'total',
// width: getColumnWidth(tableRows, 'total', { minWidth: 120 }),
// },
// ],
// [tableRows, agingColumns],
// );
// };
/**
* A/P aging summary sheet loading bar.
*/