mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 12:50:38 +00:00
refactor(APAgingSummary)
refactor(ARAgingSummary)
This commit is contained in:
@@ -31,6 +31,7 @@ export function FinancialSheet({
|
||||
minimal = false,
|
||||
fullWidth = false,
|
||||
currentDate = true,
|
||||
className,
|
||||
}) {
|
||||
const format = 'DD MMMM YYYY';
|
||||
const formattedFromDate = useMemo(
|
||||
@@ -59,7 +60,11 @@ export function FinancialSheet({
|
||||
);
|
||||
|
||||
return (
|
||||
<FinancialSheetRoot minimal={minimal} fullWidth={fullWidth}>
|
||||
<FinancialSheetRoot
|
||||
minimal={minimal}
|
||||
fullWidth={fullWidth}
|
||||
className={className}
|
||||
>
|
||||
{companyName && <FinancialSheetTitle>{companyName}</FinancialSheetTitle>}
|
||||
{sheetType && <FinancialSheetType>{sheetType}</FinancialSheetType>}
|
||||
|
||||
|
||||
@@ -6,7 +6,8 @@ import { FinancialStatement } from 'components';
|
||||
|
||||
import APAgingSummaryHeader from './APAgingSummaryHeader';
|
||||
import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
|
||||
import APAgingSummaryTable from './APAgingSummaryTable';
|
||||
import { APAgingSummaryBody } from './APAgingSummaryBody';
|
||||
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import { APAgingSummaryProvider } from './APAgingSummaryProvider';
|
||||
import { APAgingSummarySheetLoadingBar } from './components';
|
||||
@@ -67,7 +68,7 @@ function APAgingSummary({
|
||||
pageFilter={filter}
|
||||
onSubmitFilter={handleFilterSubmit}
|
||||
/>
|
||||
<APAgingSummaryTable organizationName={organizationName} />
|
||||
<APAgingSummaryBody organizationName={organizationName} />
|
||||
</FinancialStatement>
|
||||
</DashboardPageContent>
|
||||
</APAgingSummaryProvider>
|
||||
|
||||
@@ -8,6 +8,8 @@ import { TableStyle } from 'common';
|
||||
import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
|
||||
import { useAPAgingSummaryColumns } from './components';
|
||||
|
||||
import { tableRowTypesToClassnames } from 'utils';
|
||||
|
||||
/**
|
||||
* AP aging summary table sheet.
|
||||
*/
|
||||
@@ -24,8 +26,6 @@ export default function APAgingSummaryTable({
|
||||
// AP aging summary columns.
|
||||
const columns = useAPAgingSummaryColumns();
|
||||
|
||||
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={organizationName}
|
||||
@@ -37,7 +37,7 @@ export default function APAgingSummaryTable({
|
||||
<APAgingSummaryDataTable
|
||||
columns={columns}
|
||||
data={tableRows}
|
||||
rowClassNames={rowClassNames}
|
||||
rowClassNames={tableRowTypesToClassnames}
|
||||
noInitialFetch={true}
|
||||
sticky={true}
|
||||
styleName={TableStyle.Constrant}
|
||||
|
||||
@@ -58,7 +58,7 @@ function ReceivableAgingSummarySheet({
|
||||
<ARAgingSummarySheetLoadingBar />
|
||||
|
||||
<DashboardPageContent>
|
||||
<FinancialStatement name={'AR-aging-summary'}>
|
||||
<FinancialStatement>
|
||||
<ARAgingSummaryHeader
|
||||
pageFilter={filter}
|
||||
onSubmitFilter={handleFilterSubmit}
|
||||
|
||||
@@ -2,10 +2,8 @@ import React from 'react';
|
||||
import * as R from 'ramda';
|
||||
|
||||
import ARAgingSummaryTable from './ARAgingSummaryTable';
|
||||
import {
|
||||
FinancialReportBody,
|
||||
FinancialSheetSkeleton,
|
||||
} from '../../../components';
|
||||
import { FinancialReportBody } from '../FinancialReportPage';
|
||||
import { FinancialSheetSkeleton } from '../../../components';
|
||||
|
||||
import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
|
||||
import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
|
||||
|
||||
@@ -8,6 +8,8 @@ import { TableStyle } from 'common';
|
||||
import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
|
||||
import { useARAgingSummaryColumns } from './components';
|
||||
|
||||
import { tableRowTypesToClassnames } from 'utils';
|
||||
|
||||
/**
|
||||
* AR aging summary table sheet.
|
||||
*/
|
||||
@@ -21,8 +23,6 @@ export default function ReceivableAgingSummaryTable({
|
||||
// AR aging summary columns.
|
||||
const columns = useARAgingSummaryColumns();
|
||||
|
||||
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={organizationName}
|
||||
@@ -34,7 +34,7 @@ export default function ReceivableAgingSummaryTable({
|
||||
<ARAgingSummaryDataTable
|
||||
columns={columns}
|
||||
data={ARAgingSummary.tableRows}
|
||||
rowClassNames={rowClassNames}
|
||||
rowClassNames={tableRowTypesToClassnames}
|
||||
noInitialFetch={true}
|
||||
sticky={true}
|
||||
styleName={TableStyle.Constrant}
|
||||
@@ -51,6 +51,25 @@ const ARAgingSummaryDataTable = styled(DataTable)`
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -34,7 +34,6 @@ export default function BalanceSheetTable({
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
name="balance-sheet"
|
||||
companyName={companyName}
|
||||
sheetType={intl.get('balance_sheet')}
|
||||
asDate={query.to_date}
|
||||
|
||||
@@ -17,20 +17,17 @@ export default function PurchasesByItemsTable({ companyName }) {
|
||||
// Purchases by items context.
|
||||
const {
|
||||
purchaseByItems: { tableRows, query },
|
||||
isLoading,
|
||||
} = usePurchaseByItemsContext();
|
||||
|
||||
// Purchases by items table columns.
|
||||
const columns = usePurchasesByItemsTableColumns();
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
<PurchasesByItemsSheet
|
||||
companyName={companyName}
|
||||
sheetType={intl.get('purchases_by_items')}
|
||||
fromDate={query.from_date}
|
||||
toDate={query.to_date}
|
||||
name="purchases-by-items"
|
||||
loading={isLoading}
|
||||
>
|
||||
<PurchasesByItemsDataTable
|
||||
columns={columns}
|
||||
@@ -45,10 +42,14 @@ export default function PurchasesByItemsTable({ companyName }) {
|
||||
)}
|
||||
styleName={TableStyle.Constrant}
|
||||
/>
|
||||
</FinancialSheet>
|
||||
</PurchasesByItemsSheet>
|
||||
);
|
||||
}
|
||||
|
||||
const PurchasesByItemsSheet = styled(FinancialSheet)`
|
||||
min-width: 850px;
|
||||
`;
|
||||
|
||||
const PurchasesByItemsDataTable = styled(DataTable)`
|
||||
.table {
|
||||
.tbody {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { DataTable, FinancialSheet } from 'components';
|
||||
|
||||
@@ -23,15 +24,14 @@ export default function SalesByItemsTable({ companyName }) {
|
||||
const columns = useSalesByItemsTableColumns();
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
<SalesByItemsSheet
|
||||
companyName={companyName}
|
||||
sheetType={intl.get('sales_by_items')}
|
||||
fromDate={query.from_date}
|
||||
toDate={query.to_date}
|
||||
name="sales-by-items"
|
||||
loading={isLoading}
|
||||
>
|
||||
<DataTable
|
||||
<SalesByItemsDataTable
|
||||
columns={columns}
|
||||
data={tableRows}
|
||||
expandable={true}
|
||||
@@ -44,6 +44,27 @@ export default function SalesByItemsTable({ companyName }) {
|
||||
)}
|
||||
styleName={TableStyle.Constrant}
|
||||
/>
|
||||
</FinancialSheet>
|
||||
</SalesByItemsSheet>
|
||||
);
|
||||
}
|
||||
|
||||
const SalesByItemsSheet = styled(FinancialSheet)`
|
||||
min-width: 850px;
|
||||
`;
|
||||
|
||||
const SalesByItemsDataTable = styled(DataTable)`
|
||||
.table {
|
||||
.tbody {
|
||||
.tr .td {
|
||||
border-bottom: 0;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
.tr.row_type--total .td {
|
||||
border-top: 1px solid #bbb;
|
||||
font-weight: 500;
|
||||
border-bottom: 3px double #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -115,7 +115,7 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
|
||||
const agingRow = mapAging(customer.aging);
|
||||
|
||||
rows.push({
|
||||
rowType: 'customer',
|
||||
row_types: 'customer',
|
||||
name: customer.customer_name,
|
||||
...agingRow,
|
||||
current: customer.current.formatted_amount,
|
||||
@@ -129,7 +129,7 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
|
||||
...rows,
|
||||
{
|
||||
name: '',
|
||||
rowType: 'total',
|
||||
row_types: 'total',
|
||||
current: sheet.total.current.formatted_amount,
|
||||
...mapAging(sheet.total.aging),
|
||||
total: sheet.total.total.formatted_amount,
|
||||
@@ -150,7 +150,7 @@ export const APAgingSummaryTableRowsMapper = (sheet, total) => {
|
||||
const agingRow = mapAging(vendor.aging);
|
||||
|
||||
rows.push({
|
||||
rowType: 'vendor',
|
||||
row_types: 'vendor',
|
||||
name: vendor.vendor_name,
|
||||
...agingRow,
|
||||
current: vendor.current.formatted_amount,
|
||||
@@ -164,7 +164,7 @@ export const APAgingSummaryTableRowsMapper = (sheet, total) => {
|
||||
...rows,
|
||||
{
|
||||
name: '',
|
||||
rowType: 'total',
|
||||
row_types: 'total',
|
||||
current: sheet.total.current.formatted_amount,
|
||||
...mapAging(sheet.total.aging),
|
||||
total: sheet.total.total.formatted_amount,
|
||||
@@ -182,7 +182,7 @@ export const inventoryValuationReducer = (sheet) => {
|
||||
}
|
||||
if (sheet.total) {
|
||||
results.push({
|
||||
rowType: 'total',
|
||||
row_types: 'total',
|
||||
...sheet.total,
|
||||
});
|
||||
}
|
||||
@@ -199,7 +199,7 @@ export const purchasesByItemsReducer = (sheet) => {
|
||||
}
|
||||
if (sheet.total) {
|
||||
results.push({
|
||||
rowType: 'total',
|
||||
row_types: 'total',
|
||||
...sheet.total,
|
||||
});
|
||||
}
|
||||
@@ -215,7 +215,7 @@ export const salesByItemsReducer = (sheet) => {
|
||||
}
|
||||
if (sheet.total) {
|
||||
results.push({
|
||||
rowType: 'total',
|
||||
row_types: 'total',
|
||||
...sheet.total,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -13,25 +13,7 @@
|
||||
}
|
||||
}
|
||||
.tbody{
|
||||
.tr: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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,59 +14,7 @@
|
||||
}
|
||||
|
||||
.tbody {
|
||||
.tr .td {
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.2rem;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
|
||||
&.date {
|
||||
>div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
span.force-width {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tr:not(.no-results) .td {
|
||||
border-left: 1px solid #ececec;
|
||||
}
|
||||
|
||||
.tr:last-child .td {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tr.row-type {
|
||||
&--ITEM {
|
||||
.td {
|
||||
&.transaction_type {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child).is-expanded .td {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
&--ITEM,
|
||||
&--OPENING_ENTRY,
|
||||
&--CLOSING_ENTRY {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&--ITEM {
|
||||
&.is-expanded {
|
||||
.td.value .cell-inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,18 +12,7 @@
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
.tr .td {
|
||||
border-bottom: 0;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
.tr.row_type--total .td {
|
||||
border-top: 1px solid #bbb;
|
||||
font-weight: 500;
|
||||
border-bottom: 3px double #000;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user