QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 21:00: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.
*/

7
packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx
View File

@@ -19,7 +19,10 @@ export default function ReceivableAgingSummaryTable({
organizationName,
}) {
// AR aging summary report context.
const { ARAgingSummary, isARAgingLoading } = useARAgingSummaryContext();
const {
ARAgingSummary: { table },
isARAgingLoading,
} = useARAgingSummaryContext();
// AR aging summary columns.
const columns = useARAgingSummaryColumns();
@@ -33,7 +36,7 @@ export default function ReceivableAgingSummaryTable({
>
<ARAgingSummaryDataTable
columns={columns}
data={ARAgingSummary.tableRows}
data={table.rows}
rowClassNames={tableRowTypesToClassnames}
noInitialFetch={true}
sticky={true}

57
packages/webapp/src/containers/FinancialStatements/ARAgingSummary/components.tsx
View File

@@ -1,71 +1,20 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
import { If, FormattedMessage as T } from '@/components';
import { getColumnWidth } from '@/utils';
import { Align } from '@/constants';
import FinancialLoadingBar from '../FinancialLoadingBar';
import { agingSummaryDynamicColumns } from '../AgingSummary/dynamicColumns';
/**
* Retrieve AR aging summary columns.
*/
export const useARAgingSummaryColumns = () => {
const {
ARAgingSummary: { tableRows, columns },
ARAgingSummary: { table },
} = useARAgingSummaryContext();
const agingColumns = React.useMemo(() => {
return columns.map(
(agingColumn) =>
`${agingColumn.before_days} - ${
agingColumn.to_days || intl.get('and_over')
}`,
);
}, [columns]);
return React.useMemo(
() => [
{
Header: <T id={'customer_name'} />,
accessor: 'name',
className: 'customer_name',
sticky: 'left',
width: 240,
textOverview: true,
},
{
Header: <T id={'current'} />,
accessor: 'current',
className: 'current',
width: getColumnWidth(tableRows, `current`, {
minWidth: 120,
}),
align: Align.Right
},
...agingColumns.map((agingColumn, index) => ({
Header: agingColumn,
accessor: `aging-${index}`,
width: getColumnWidth(tableRows, `aging-${index}`, {
minWidth: 120,
}),
align: Align.Right
})),
{
Header: <T id={'total'} />,
id: 'total',
accessor: 'total',
className: 'total',
width: getColumnWidth(tableRows, 'total', {
minWidth: 120,
}),
align: Align.Right
},
],
[tableRows, agingColumns],
);
return agingSummaryDynamicColumns(table.columns, table.rows);
};
/**

74
packages/webapp/src/containers/FinancialStatements/AgingSummary/dynamicColumns.ts Normal file
View File

@@ -0,0 +1,74 @@
// @ts-nocheck
import React, { useMemo } from 'react';
import * as R from 'ramda';
import { getColumnWidth } from '@/utils';
import { Align } from '@/constants';
const getTableCellValueAccessor = (index) => `cells[${index}].value`;
const contactNameAccessor = R.curry((data, column) => ({
key: column.key,
Header: column.label,
accessor: getTableCellValueAccessor(column.cell_index),
sticky: 'left',
width: 240,
textOverview: true,
}));
const currentAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
key: column.key,
Header: column.label,
accessor,
className: column.id,
width: getColumnWidth(data, accessor, { minWidth: 120 }),
align: Align.Right,
};
});
const totalAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
id: column.key,
accessor: getTableCellValueAccessor(column.cell_index),
className: column.key,
width: getColumnWidth(data, accessor, { minWidth: 120 }),
align: Align.Right,
};
});
const agingPeriodAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
id: `${column.key}-${column.cell_index}`,
accessor,
className: column.key,
width: getColumnWidth(data, accessor, { minWidth: 120 }),
align: Align.Right,
};
});
const dynamicColumnMapper = R.curry((data, column) => {
const totalAccessorColumn = totalAccessor(data);
const currentAccessorColumn = currentAccessor(data);
const customerNameAccessorColumn = contactNameAccessor(data);
const agingPeriodAccessorColumn = agingPeriodAccessor(data);
return R.compose(
R.when(R.pathEq(['key'], 'total'), totalAccessorColumn),
R.when(R.pathEq(['key'], 'current'), currentAccessorColumn),
R.when(R.pathEq(['key'], 'customer_name'), customerNameAccessorColumn),
R.when(R.pathEq(['key'], 'vendor_name'), customerNameAccessorColumn),
R.when(R.pathEq(['key'], 'aging_period'), agingPeriodAccessorColumn),
)(column);
});
export const agingSummaryDynamicColumns = (columns, data) => {
return R.map(dynamicColumnMapper(data), columns);
};