diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f9a76ef1..03f5da752 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,26 @@ All notable changes to Bigcapital server-side will be in this file. +## [1.6.3] - 21-02-2022 + +### Fixed + - `BIG-337` Display billing page once the organization subscription is inactive. + +## [1.6.2] - 19-02-2022 + +### Fixed + - fix syled components dependency with imported as default components. + +## [1.6.0] - 18-02-2022 + +### Added +- Balance sheet comparison of previous period (PP). +- Balance sheet comparison of previous year (PY). +- Balance sheet percentage analysis columns and rows basis. +- Profit & loss sheet comparison of preivous period (PP). +- Profit & loss sheet comparison of previous year (PY). +- Profit & loss sheet percentage analysis columns, rows, income and expenses basis. + ## [1.5.8] - 13-01-2022 ### Added diff --git a/package.json b/package.json index d26c51163..d4a827375 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bigcapital-client", - "version": "1.5.8", + "version": "1.6.3", "private": true, "dependencies": { "@babel/core": "7.8.4", diff --git a/src/components/Button/index.js b/src/components/Button/index.js index f7960939a..28fb263e6 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -1,3 +1 @@ - - export * from './ButtonLink'; \ No newline at end of file diff --git a/src/components/Customers/CustomerDrawerLink.js b/src/components/Customers/CustomerDrawerLink.js index f5f7fef99..d4290ff60 100644 --- a/src/components/Customers/CustomerDrawerLink.js +++ b/src/components/Customers/CustomerDrawerLink.js @@ -1,7 +1,7 @@ import React from 'react'; import * as R from 'ramda'; -import { ButtonLink } from 'components'; +import { ButtonLink } from '../Button'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; function CustomerDrawerLinkComponent({ diff --git a/src/components/Dashboard/DashboardAbilityProvider.js b/src/components/Dashboard/DashboardAbilityProvider.js index 37de0ced2..8fc9dfe8d 100644 --- a/src/components/Dashboard/DashboardAbilityProvider.js +++ b/src/components/Dashboard/DashboardAbilityProvider.js @@ -1,7 +1,8 @@ import React from 'react'; import { Ability } from '@casl/ability'; import { createContextualCan } from '@casl/react'; -import { useDashboardMeta } from '../../hooks/query'; + +import { useDashboardMetaBoot } from './DashboardBoot'; export const AbilityContext = React.createContext(); export const Can = createContextualCan(AbilityContext.Consumer); @@ -11,8 +12,8 @@ export const Can = createContextualCan(AbilityContext.Consumer); */ export function DashboardAbilityProvider({ children }) { const { - data: { abilities }, - } = useDashboardMeta(); + meta: { abilities }, + } = useDashboardMetaBoot(); // Ability instance. const ability = new Ability(abilities); diff --git a/src/components/Dashboard/DashboardBoot.js b/src/components/Dashboard/DashboardBoot.js index 6e3d967fb..6e6f45448 100644 --- a/src/components/Dashboard/DashboardBoot.js +++ b/src/components/Dashboard/DashboardBoot.js @@ -6,18 +6,26 @@ import { } from '../../hooks/query'; import { useSplashLoading } from '../../hooks/state'; import { useWatch, useWatchImmediate, useWhen } from '../../hooks'; +import { useSubscription } from '../../hooks/state'; import { setCookie, getCookie } from '../../utils'; /** * Dashboard meta async booting. + * - Fetches the dashboard meta only if the organization subscribe is active. + * - Once the dashboard meta query is loading display dashboard splash screen. */ export function useDashboardMetaBoot() { + const { isSubscriptionActive } = useSubscription(); + const { data: dashboardMeta, isLoading: isDashboardMetaLoading, isSuccess: isDashboardMetaSuccess, } = useDashboardMeta({ keepPreviousData: true, + + // Avoid run the query if the organization subscription is not active. + enabled: isSubscriptionActive, }); const [startLoading, stopLoading] = useSplashLoading(); @@ -30,20 +38,12 @@ export function useDashboardMetaBoot() { }, isDashboardMetaSuccess); return { + meta: dashboardMeta, isLoading: isDashboardMetaLoading, + isSuccess: isDashboardMetaSuccess }; } -/** - * Dashboard async booting. - * @returns {{ isLoading: boolean }} - */ -export function useDashboardBoot() { - const { isLoading } = useDashboardMetaBoot(); - - return { isLoading }; -} - /** * Application async booting. */ diff --git a/src/components/Dashboard/DashboardProvider.js b/src/components/Dashboard/DashboardProvider.js index 68c8e5654..7e05fb00c 100644 --- a/src/components/Dashboard/DashboardProvider.js +++ b/src/components/Dashboard/DashboardProvider.js @@ -1,12 +1,12 @@ import React from 'react'; import { DashboardAbilityProvider } from '../../components'; -import { useDashboardBoot } from './DashboardBoot'; +import { useDashboardMetaBoot } from './DashboardBoot'; /** * Dashboard provider. */ export default function DashboardProvider({ children }) { - const { isLoading } = useDashboardBoot(); + const { isLoading } = useDashboardMetaBoot(); // Avoid display any dashboard component before complete booting. if (isLoading) { diff --git a/src/components/FinancialSheet/FinancialSheet.js b/src/components/FinancialSheet/FinancialSheet.js index f7eb905ec..951e06a85 100644 --- a/src/components/FinancialSheet/FinancialSheet.js +++ b/src/components/FinancialSheet/FinancialSheet.js @@ -2,7 +2,8 @@ import React, { useMemo, useCallback } from 'react'; import moment from 'moment'; import intl from 'react-intl-universal'; -import { If, FormattedMessage as T } from 'components'; +import If from '../Utils/If'; +import { FormattedMessage as T } from '../FormattedMessage'; import { FinancialSheetRoot, FinancialSheetFooterCurrentTime, diff --git a/src/components/FinancialSheet/FinancialSheetSkeleton.js b/src/components/FinancialSheet/FinancialSheetSkeleton.js index 8feb034b5..d542ceb73 100644 --- a/src/components/FinancialSheet/FinancialSheetSkeleton.js +++ b/src/components/FinancialSheet/FinancialSheetSkeleton.js @@ -2,7 +2,8 @@ import React from 'react'; import styled from 'styled-components'; import { Align } from 'common'; -import { SkeletonText, DataTable } from 'components'; +import { SkeletonText } from 'components'; +import DataTable from '../../components/DataTable' import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; diff --git a/src/components/FinancialSheet/ReportDataTable.js b/src/components/FinancialSheet/ReportDataTable.js new file mode 100644 index 000000000..2d8677cf4 --- /dev/null +++ b/src/components/FinancialSheet/ReportDataTable.js @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +import DataTable from '../DataTable'; + +export const ReportDataTable = styled(DataTable)` + .table .tbody .tr.no-results:last-of-type .td { + border-bottom: 1px solid #ddd; + } +`; diff --git a/src/components/FinancialSheet/index.js b/src/components/FinancialSheet/index.js index ca17c27c5..6a366b26f 100644 --- a/src/components/FinancialSheet/index.js +++ b/src/components/FinancialSheet/index.js @@ -1,2 +1,3 @@ export * from './FinancialSheet'; -export * from './FinancialSheetSkeleton'; \ No newline at end of file +export * from './FinancialSheetSkeleton'; +export * from './ReportDataTable'; \ No newline at end of file diff --git a/src/components/Vendors/VendorDrawerLink.js b/src/components/Vendors/VendorDrawerLink.js index e65b996b3..e2c14d539 100644 --- a/src/components/Vendors/VendorDrawerLink.js +++ b/src/components/Vendors/VendorDrawerLink.js @@ -1,7 +1,7 @@ import React from 'react'; import * as R from 'ramda'; -import { ButtonLink } from 'components'; +import { ButtonLink } from '../Button'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; function VendorDrawerLinkComponent({ diff --git a/src/config/financialReportsMenu.js b/src/config/financialReportsMenu.js index 83e6ffd25..62240ab64 100644 --- a/src/config/financialReportsMenu.js +++ b/src/config/financialReportsMenu.js @@ -70,6 +70,20 @@ export const financialReportMenus = [ subject: AbilitySubject.Report, ability: ReportsAction.READ_AP_AGING_SUMMARY, }, + { + title: , + desc: , + link: 'financial-reports/balance-sheet?previousYear=true&previousYearAmountChange=true&previousYearPercentageChange=true', + subject: AbilitySubject.Report, + ability: ReportsAction.READ_BALANCE_SHEET, + }, + { + title: , + desc: , + link: '/financial-reports/profit-loss-sheet?previousYear=true&previousYearAmountChange=true&previousYearPercentageChange=true', + subject: AbilitySubject.Report, + ability: ReportsAction.READ_PROFIT_LOSS, + }, ], }, ]; diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js index 92b0250fb..5e1a2b78a 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js @@ -64,6 +64,7 @@ function BillPaymentTransactions({ }} styleName={TableStyle.Constrant} TableLoadingRenderer={TableSkeletonRows} + sticky={true} /> ); } diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js index b21c05384..3da3046f6 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js @@ -66,6 +66,7 @@ function EstimatePaymentTransactions({ }} styleName={TableStyle.Constrant} TableLoadingRenderer={TableSkeletonRows} + sticky={true} /> ); } diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js index 28e4fb3ee..df55f7aac 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js @@ -68,6 +68,7 @@ function InvoicePaymentTransactions({ }} styleName={TableStyle.Constrant} TableLoadingRenderer={TableSkeletonRows} + sticky={true} /> ); } diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js index d9d96e705..19786940b 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js @@ -66,6 +66,7 @@ function ReceiptPaymentTransactions({ }} styleName={TableStyle.Constrant} TableLoadingRenderer={TableSkeletonRows} + sticky={true} /> ); } diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js index 05ea89a9a..5445e5c95 100644 --- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js +++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js @@ -4,6 +4,7 @@ import { Formik, Form } from 'formik'; import * as Yup from 'yup'; import moment from 'moment'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; +import styled from 'styled-components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import APAgingSummaryHeaderGeneral from './APAgingSummaryHeaderGeneral'; @@ -12,8 +13,8 @@ import APAgingSummaryHeaderDimensions from './APAgingSummaryHeaderDimensions'; import withAPAgingSummary from './withAPAgingSummary'; import withAPAgingSummaryActions from './withAPAgingSummaryActions'; -import { compose } from 'utils'; import { transformToForm } from '../../../utils'; +import { compose } from 'utils'; /** * AP Aging Summary Report - Drawer Header. @@ -74,7 +75,7 @@ function APAgingSummaryHeader({ }; return ( - @@ -106,7 +107,7 @@ function APAgingSummaryHeader({ - + ); } @@ -116,3 +117,9 @@ export default compose( isFilterDrawerOpen: APAgingSummaryFilterDrawer, })), )(APAgingSummaryHeader); + +const APAgingDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 520px; + } +`; diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js index e2ab82bec..be7b4588e 100644 --- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js +++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js @@ -2,7 +2,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import styled from 'styled-components'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import { TableStyle } from 'common'; import { useAPAgingSummaryContext } from './APAgingSummaryProvider'; @@ -29,7 +29,6 @@ export default function APAgingSummaryTable({ return ( { onSubmitFilter(values); toggleFilterDrawerDisplay(false); setSubmitting(false); }; - // Handle cancel button click. const handleCancelClick = () => { toggleFilterDrawerDisplay(false); @@ -78,7 +77,7 @@ function ARAgingSummaryHeader({ }; return ( - @@ -111,7 +110,7 @@ function ARAgingSummaryHeader({ - + ); } @@ -121,3 +120,9 @@ export default compose( isFilterDrawerOpen: ARAgingSummaryFilterDrawer, })), )(ARAgingSummaryHeader); + +const ARAgingDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 520px; + } +`; diff --git a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js index 15de59206..608981c0f 100644 --- a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js +++ b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js @@ -2,7 +2,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import styled from 'styled-components'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import { TableStyle } from 'common'; import { useARAgingSummaryContext } from './ARAgingSummaryProvider'; @@ -26,7 +26,6 @@ export default function ReceivableAgingSummaryTable({ return ( - + ); } @@ -113,3 +117,9 @@ export default compose( })), withBalanceSheetActions, )(BalanceSheetHeader); + +const BalanceSheetFinancialHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 520px; + } +`; diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js index 0b335dedc..f485cda5b 100644 --- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import intl from 'react-intl-universal'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import { useBalanceSheetContext } from './BalanceSheetProvider'; @@ -56,7 +56,7 @@ export default function BalanceSheetTable({ ); } -const BalanceSheetDataTable = styled(DataTable)` +const BalanceSheetDataTable = styled(ReportDataTable)` .table { .tbody .tr { .td { @@ -81,7 +81,7 @@ const BalanceSheetDataTable = styled(DataTable)` } &.row_type--TOTAL.row-id--ASSETS, &.row_type--TOTAL.row-id--LIABILITY_EQUITY { - .td{ + .td { border-bottom: 3px double #000; } } diff --git a/src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.js b/src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.js index b894cd994..86ecc28ac 100644 --- a/src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.js +++ b/src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.js @@ -17,6 +17,7 @@ const accountNameMapper = (column) => ({ textOverview: true, width: 400, disableSortBy: true, + sticky: Align.Left, }); /** diff --git a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js index 8f74bc42b..79764b292 100644 --- a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js +++ b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js @@ -3,6 +3,8 @@ import * as Yup from 'yup'; import { Formik, Form } from 'formik'; import moment from 'moment'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; +import styled from 'styled-components'; + import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; @@ -30,7 +32,6 @@ function CustomersBalanceSummaryHeader({ const validationSchema = Yup.object().shape({ asDate: Yup.date().required().label('asDate'), }); - // Default form values. const defaultValues = { ...pageFilter, @@ -47,21 +48,19 @@ function CustomersBalanceSummaryHeader({ }, defaultValues, ); - // handle form submit. const handleSubmit = (values, { setSubmitting }) => { onSubmitFilter(values); toggleCustomerBalanceFilterDrawer(false); setSubmitting(false); }; - // handle close drawer. const handleDrawerClose = () => { toggleCustomerBalanceFilterDrawer(false); }; return ( - @@ -89,7 +88,7 @@ function CustomersBalanceSummaryHeader({ - + ); } @@ -99,3 +98,9 @@ export default compose( })), withCustomersBalanceSummaryActions, )(CustomersBalanceSummaryHeader); + +const CustomerBalanceDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 450px; + } +`; diff --git a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js index 207be4344..dc4fea889 100644 --- a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js +++ b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js @@ -1,15 +1,17 @@ import React from 'react'; import intl from 'react-intl-universal'; +import styled from 'styled-components'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider'; import { useCustomersSummaryColumns } from './components'; +import { TableStyle } from 'common'; import { tableRowTypesToClassnames } from 'utils'; /** - * customers balance summary table. + * Customers balance summary table. */ export default function CustomersBalanceSummaryTable({ // #ownProps @@ -19,6 +21,7 @@ export default function CustomersBalanceSummaryTable({ CustomerBalanceSummary: { table }, } = useCustomersBalanceSummaryContext(); + // Retrieves the customers summary columns. const columns = useCustomersSummaryColumns(); return ( @@ -27,12 +30,36 @@ export default function CustomersBalanceSummaryTable({ sheetType={intl.get('customers_balance_summary')} asDate={new Date()} > - ); } + +const CustomerBalanceDataTable = styled(ReportDataTable)` + .table { + .tbody { + .tr:not(.no-results) { + .td { + border-bottom: 0; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + } + + &.row_type--TOTAL { + font-weight: 500; + + .td { + border-top: 1px solid #bbb; + border-bottom: 3px double #333; + } + } + } + } + } +`; diff --git a/src/containers/FinancialStatements/CustomersBalanceSummary/components.js b/src/containers/FinancialStatements/CustomersBalanceSummary/components.js index 0ee163664..7efb9b95f 100644 --- a/src/containers/FinancialStatements/CustomersBalanceSummary/components.js +++ b/src/containers/FinancialStatements/CustomersBalanceSummary/components.js @@ -6,6 +6,8 @@ import { If } from 'components'; import FinancialLoadingBar from '../FinancialLoadingBar'; import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider'; +import { Align } from 'common'; + /** * Retrieve customers balance summary columns. */ @@ -37,6 +39,7 @@ const totalColumnAccessor = () => ({ accessor: 'cells[1].value', className: 'total', width: 140, + align: Align.Right, }); /** @@ -47,6 +50,7 @@ const percentageColumnAccessor = () => ({ accessor: 'cells[2].value', className: 'total', width: 140, + align: Align.Right, }); const dynamicColumns = (columns) => { @@ -54,7 +58,10 @@ const dynamicColumns = (columns) => { R.compose( R.when(R.pathEq(['key'], 'name'), accountNameColumnAccessor), R.when(R.pathEq(['key'], 'total'), totalColumnAccessor), - R.when(R.pathEq(['key'], 'percentage_of_column'), percentageColumnAccessor), + R.when( + R.pathEq(['key'], 'percentage_of_column'), + percentageColumnAccessor, + ), ), )(columns); }; diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js index bcfd1774e..1cb24fe08 100644 --- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js +++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js @@ -5,6 +5,7 @@ import intl from 'react-intl-universal'; import moment from 'moment'; import * as Yup from 'yup'; import { Formik, Form } from 'formik'; +import styled from 'styled-components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import CustomersTransactionsHeaderGeneralPanel from './CustomersTransactionsHeaderGeneralPanel'; @@ -67,7 +68,7 @@ function CustomersTransactionsHeader({ }; return ( - @@ -95,7 +96,7 @@ function CustomersTransactionsHeader({ - + ); } @@ -105,3 +106,9 @@ export default compose( })), withCustomersTransactionsActions, )(CustomersTransactionsHeader); + +const CustomerTransactionsDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 450px; + } +`; diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js index be8143f0f..6c3d50689 100644 --- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js +++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js @@ -58,10 +58,10 @@ const CustomersTransactionsDataTable = styled(DataTable)` .table { .tbody { .tr .td { - padding-top: 0.2rem; - padding-bottom: 0.2rem; + padding-top: 0.36rem; + padding-bottom: 0.36rem; } - .tr:not(.no-results) .td { + .tr:not(.no-results) .td:not(:first-of-type) { border-left: 1px solid #ececec; } .tr:last-child .td { @@ -73,6 +73,11 @@ const CustomersTransactionsDataTable = styled(DataTable)` .td { &.customer_name { font-weight: 500; + + .cell-inner { + white-space: nowrap; + position: relative; + } } } &:not(:first-child).is-expanded .td { diff --git a/src/containers/FinancialStatements/CustomersTransactions/components.js b/src/containers/FinancialStatements/CustomersTransactions/components.js index 9b7ec89ee..a1f85ba0a 100644 --- a/src/containers/FinancialStatements/CustomersTransactions/components.js +++ b/src/containers/FinancialStatements/CustomersTransactions/components.js @@ -3,14 +3,13 @@ import intl from 'react-intl-universal'; import { If } from 'components'; import { useCustomersTransactionsContext } from './CustomersTransactionsProvider'; import FinancialLoadingBar from '../FinancialLoadingBar'; -import { getForceWidth, getColumnWidth } from 'utils'; +import { getColumnWidth } from 'utils'; import { Align } from 'common'; /** * Retrieve customers transactions columns. */ - export const useCustomersTransactionsColumns = () => { const { customersTransactions: { tableRows }, @@ -20,16 +19,7 @@ export const useCustomersTransactionsColumns = () => { () => [ { Header: intl.get('customer_name'), - accessor: ({ cells }) => { - return ( - - {cells[0].value} - - ); - }, + accessor: 'cells[0].value', className: 'customer_name', }, { diff --git a/src/containers/FinancialStatements/FinancialStatementHeader.js b/src/containers/FinancialStatements/FinancialStatementHeader.js index a1c66bfc5..44c5f2097 100644 --- a/src/containers/FinancialStatements/FinancialStatementHeader.js +++ b/src/containers/FinancialStatements/FinancialStatementHeader.js @@ -3,10 +3,15 @@ import classNames from 'classnames'; import { Position, Drawer } from '@blueprintjs/core'; import 'style/containers/FinancialStatements/DrawerHeader.scss'; +/** + * Financial statement header. + * @returns {JSX.Element} + */ export default function FinancialStatementHeader({ children, isOpen, drawerProps, + className, }) { const timeoutRef = React.useRef(); const [isDrawerOpen, setIsDrawerOpen] = useState(false); @@ -42,6 +47,7 @@ export default function FinancialStatementHeader({ { 'is-hidden': !isDrawerOpen, }, + className, )} > @@ -105,7 +107,7 @@ function GeneralLedgerHeader({ - + ); } @@ -115,3 +117,9 @@ export default compose( })), withGeneralLedgerActions, )(GeneralLedgerHeader); + +const GeneralLedgerDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 520px; + } +`; diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js index 4b6eed676..07546dcbf 100644 --- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils'; -import { FinancialSheet, DataTable } from 'components'; +import { FinancialSheet, ReportDataTable } from 'components'; import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows'; import TableFastCell from 'components/Datatable/TableFastCell'; @@ -66,7 +66,7 @@ export default function GeneralLedgerTable({ companyName }) { ); } -const GeneralLedgerDataTable = styled(DataTable)` +const GeneralLedgerDataTable = styled(ReportDataTable)` .tbody { .tr .td { padding-top: 0.2rem; @@ -78,7 +78,7 @@ const GeneralLedgerDataTable = styled(DataTable)` } } - .tr:not(.no-results) .td { + .tr:not(.no-results) .td:not(:first-of-type) { border-left: 1px solid #ececec; } .tr:last-child .td { @@ -90,13 +90,13 @@ const GeneralLedgerDataTable = styled(DataTable)` .td { &.date { font-weight: 500; - } - &.name { - border-left-color: transparent; + .cell-inner { + white-space: nowrap; + position: relative; + } } } - &:not(:first-child).is-expanded .td { border-top: 1px solid #ddd; } @@ -108,7 +108,6 @@ const GeneralLedgerDataTable = styled(DataTable)` font-weight: 500; } } - &--CLOSING_BALANCE { .name { font-weight: 500; diff --git a/src/containers/FinancialStatements/GeneralLedger/components.js b/src/containers/FinancialStatements/GeneralLedger/components.js index 45f4e6e88..7fe7e5c33 100644 --- a/src/containers/FinancialStatements/GeneralLedger/components.js +++ b/src/containers/FinancialStatements/GeneralLedger/components.js @@ -2,7 +2,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Button } from '@blueprintjs/core'; import { Icon, If } from 'components'; -import { ForceWidth, FormattedMessage as T } from 'components'; +import { FormattedMessage as T } from 'components'; import { getColumnWidth } from 'utils'; import { useGeneralLedgerContext } from './GeneralLedgerProvider'; @@ -23,12 +23,7 @@ export function useGeneralLedgerTableColumns() { () => [ { Header: intl.get('date'), - accessor: (row) => { - if (row.rowType === 'ACCOUNT_ROW') { - return ; - } - return row.date; - }, + accessor: 'date', className: 'date', width: 120, }, diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js index 39cf5e746..c617f94e1 100644 --- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js +++ b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js @@ -3,8 +3,10 @@ import * as Yup from 'yup'; import moment from 'moment'; import { Formik, Form } from 'formik'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'components'; import intl from 'react-intl-universal'; +import styled from 'styled-components'; + +import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeaderGeneralPanel'; @@ -68,7 +70,7 @@ function InventoryItemDetailsHeader({ }; return ( - @@ -100,7 +102,7 @@ function InventoryItemDetailsHeader({ - + ); } @@ -110,3 +112,9 @@ export default compose( })), withInventoryItemDetailsActions, )(InventoryItemDetailsHeader); + +const InventoryItemDetailsDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 400px; + } +`; diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js index 05d44b4bf..a0e59b543 100644 --- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js +++ b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js @@ -2,12 +2,11 @@ import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; import styled from 'styled-components'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import { useInventoryItemDetailsColumns } from './components'; import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider'; import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils'; - import { TableStyle } from 'common'; /** @@ -37,6 +36,7 @@ export function InventoryItemDetailsTable({ loading={isInventoryItemDetailsLoading} fromDate={query.from_date} toDate={query.to_date} + fullWidth={true} > div { - display: flex; - } - - span.force-width { - position: relative; - } - } + padding-top: 0.3rem; + padding-bottom: 0.3rem; } - .tr:not(.no-results) .td { + .tr:not(.no-results) .td:not(:first-of-type) { border-left: 1px solid #ececec; } @@ -87,8 +75,14 @@ const InventoryItemDetailsDataTable = styled(DataTable)` &.transaction_type { border-left-color: transparent; } - } + &.date { + .cell-inner { + white-space: nowrap; + position: relative; + } + } + } &:not(:first-child).is-expanded .td { border-top: 1px solid #ddd; } diff --git a/src/containers/FinancialStatements/InventoryItemDetails/utils.js b/src/containers/FinancialStatements/InventoryItemDetails/utils.js index cffc6058f..8e59352ea 100644 --- a/src/containers/FinancialStatements/InventoryItemDetails/utils.js +++ b/src/containers/FinancialStatements/InventoryItemDetails/utils.js @@ -1,17 +1,43 @@ import * as R from 'ramda'; + import { getColumnWidth } from 'utils'; -import { CellForceWidth } from '../../../components'; +import { Align } from 'common'; + +const itemNameOrDateColumn = R.curry((data, index, column) => ({ + id: column.key, + key: column.key, + Header: column.label, + accessor: `cells[${index}].value`, + className: column.key, + width: getColumnWidth(data, `cells.${index}.key`, { + minWidth: 130, + magicSpacing: 10, + }), + disableSortBy: true, +})); + +const numericColumn = R.curry((data, index, column) => ({ + id: column.key, + key: column.key, + Header: column.label, + accessor: `cells[${index}].value`, + className: column.key, + width: getColumnWidth(data, `cells.${index}.key`, { + minWidth: 130, + magicSpacing: 10, + }), + disableSortBy: true, + align: Align.Right, +})); /** * columns mapper. */ -const columnsMapper = (data, index, column) => ({ +const columnsMapper = R.curry((data, index, column) => ({ id: column.key, key: column.key, Header: column.label, - Cell: CellForceWidth, accessor: `cells[${index}].value`, - forceWidthAccess: `cells[0].value`, className: column.key, width: getColumnWidth(data, `cells.${index}.key`, { minWidth: 130, @@ -19,7 +45,7 @@ const columnsMapper = (data, index, column) => ({ }), disableSortBy: true, textOverview: true, -}); +})); /** * Inventory item details columns. @@ -27,7 +53,17 @@ const columnsMapper = (data, index, column) => ({ export const dynamicColumns = (columns, data) => { const mapper = (column, index) => { return R.compose( - R.when(R.pathEq(['key']), R.curry(columnsMapper)(data, index)), + R.cond([ + [R.pathEq(['key'], 'date'), itemNameOrDateColumn(data, index)], + [R.pathEq(['key'], 'running_quantity'), numericColumn(data, index)], + [R.pathEq(['key'], 'profit_margin'), numericColumn(data, index)], + [R.pathEq(['key'], 'running_value'), numericColumn(data, index)], + [R.pathEq(['key'], 'quantity'), numericColumn(data, index)], + [R.pathEq(['key'], 'rate'), numericColumn(data, index)], + [R.pathEq(['key'], 'total'), numericColumn(data, index)], + [R.pathEq(['key'], 'value'), numericColumn(data, index)], + [R.T, columnsMapper(data, index)], + ]), )(column); }; return columns.map(mapper); diff --git a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js index 6c8c8380a..df27f7647 100644 --- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js +++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js @@ -1,9 +1,11 @@ import React from 'react'; import * as Yup from 'yup'; import moment from 'moment'; -import { FormattedMessage as T } from 'components'; import { Formik, Form } from 'formik'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; +import styled from 'styled-components'; + +import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import InventoryValuationHeaderGeneralPanel from './InventoryValuationHeaderGeneralPanel'; @@ -68,7 +70,7 @@ function InventoryValuationHeader({ }; return ( - @@ -100,7 +102,7 @@ function InventoryValuationHeader({ - + ); } @@ -110,3 +112,9 @@ export default compose( })), withInventoryValuationActions, )(InventoryValuationHeader); + +const InventoryValuationDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 450px; + } +`; diff --git a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js index be5dc2a0c..34e66785c 100644 --- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js +++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js @@ -2,7 +2,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import styled from 'styled-components'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import { useInventoryValuationContext } from './InventoryValuationProvider'; import { useInventoryValuationTableColumns } from './components'; @@ -54,7 +54,7 @@ const InventoryValuationSheet = styled(FinancialSheet)` min-width: 850px; `; -const InventoryValuationDataTable = styled(DataTable)` +const InventoryValuationDataTable = styled(ReportDataTable)` .table { .tbody { .tr .td { diff --git a/src/containers/FinancialStatements/Journal/JournalHeader.js b/src/containers/FinancialStatements/Journal/JournalHeader.js index 112b1a8d6..909c49709 100644 --- a/src/containers/FinancialStatements/Journal/JournalHeader.js +++ b/src/containers/FinancialStatements/Journal/JournalHeader.js @@ -3,6 +3,8 @@ import moment from 'moment'; import { Formik, Form } from 'formik'; import { Tab, Tabs, Button, Intent } from '@blueprintjs/core'; import * as Yup from 'yup'; +import styled from 'styled-components'; + import { FormattedMessage as T } from 'components'; import JournalSheetHeaderGeneral from './JournalSheetHeaderGeneral'; @@ -56,7 +58,7 @@ function JournalHeader({ }; return ( - @@ -89,7 +91,7 @@ function JournalHeader({ - + ); } @@ -99,3 +101,9 @@ export default compose( })), withJournalActions, )(JournalHeader); + +const JournalDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 350px; + } +`; diff --git a/src/containers/FinancialStatements/Journal/JournalTable.js b/src/containers/FinancialStatements/Journal/JournalTable.js index aa2a2f0b6..4df6e2e45 100644 --- a/src/containers/FinancialStatements/Journal/JournalTable.js +++ b/src/containers/FinancialStatements/Journal/JournalTable.js @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; import styled from 'styled-components'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows'; import TableFastCell from 'components/Datatable/TableFastCell'; @@ -60,7 +60,7 @@ export function JournalTable({ companyName }) { ); } -const JournalDataTable = styled(DataTable)` +const JournalDataTable = styled(ReportDataTable)` .table { .tbody { .tr:not(.no-results) .td { diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js index ebda3e720..004cbccd0 100644 --- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js +++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js @@ -3,6 +3,7 @@ import moment from 'moment'; import { Formik, Form } from 'formik'; import * as R from 'ramda'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; +import styled from 'styled-components'; import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; @@ -54,7 +55,7 @@ function ProfitLossHeader({ }; return ( - @@ -92,7 +93,7 @@ function ProfitLossHeader({ - + ); } @@ -102,3 +103,9 @@ export default R.compose( })), withProfitLossActions, )(ProfitLossHeader); + +const ProfitLossSheetHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 520px; + } +`; diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js index 5aaf19a14..0d5802714 100644 --- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js +++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js @@ -2,7 +2,11 @@ import React from 'react'; import styled from 'styled-components'; import { TableStyle } from 'common'; -import { DataTable, FinancialSheet, FormattedMessage as T } from 'components'; +import { + ReportDataTable, + FinancialSheet, + FormattedMessage as T, +} from 'components'; import { tableRowTypesToClassnames, defaultExpanderReducer } from 'utils'; import { useProfitLossSheetColumns } from './hooks'; @@ -49,7 +53,7 @@ export default function ProfitLossSheetTable({ ); } -const ProfitLossDataTable = styled(DataTable)` +const ProfitLossDataTable = styled(ReportDataTable)` .table { .tbody .tr { .td { diff --git a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js index 0ada94130..a5cedbd48 100644 --- a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js +++ b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js @@ -1,10 +1,12 @@ import React from 'react'; import * as Yup from 'yup'; import moment from 'moment'; -import { FormattedMessage as T } from 'components'; import intl from 'react-intl-universal'; import { Formik, Form } from 'formik'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; +import styled from 'styled-components'; + +import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import PurchasesByItemsGeneralPanel from './PurchasesByItemsGeneralPanel'; @@ -36,7 +38,6 @@ function PurchasesByItemsHeader({ .required() .label(intl.get('to_date')), }); - // Default form values. const defaultValues = { ...pageFilter, @@ -68,7 +69,7 @@ function PurchasesByItemsHeader({ }; return ( - @@ -95,7 +96,7 @@ function PurchasesByItemsHeader({ - + ); } @@ -105,3 +106,9 @@ export default compose( })), withPurchasesByItemsActions, )(PurchasesByItemsHeader); + +const PurchasesByItemsDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 450px; + } +`; diff --git a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js index d8ce2485b..d1adba7ea 100644 --- a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js +++ b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js @@ -2,7 +2,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import styled from 'styled-components'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import { usePurchaseByItemsContext } from './PurchasesByItemsProvider'; import { usePurchasesByItemsTableColumns } from './components'; @@ -50,7 +50,7 @@ const PurchasesByItemsSheet = styled(FinancialSheet)` min-width: 850px; `; -const PurchasesByItemsDataTable = styled(DataTable)` +const PurchasesByItemsDataTable = styled(ReportDataTable)` .table { .tbody { .tr .td { diff --git a/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js b/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js index 059de708c..2e500ed5e 100644 --- a/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js +++ b/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js @@ -1,10 +1,12 @@ import React from 'react'; import * as Yup from 'yup'; import moment from 'moment'; -import { FormattedMessage as T } from 'components'; import intl from 'react-intl-universal'; import { Formik, Form } from 'formik'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; +import styled from 'styled-components'; + +import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import SalesByItemsHeaderGeneralPanel from './SalesByItemsHeaderGeneralPanel'; @@ -61,7 +63,7 @@ function SalesByItemsHeader({ }; return ( - @@ -88,7 +90,7 @@ function SalesByItemsHeader({ - + ); } @@ -98,3 +100,9 @@ export default compose( })), withSalesByItemsActions, )(SalesByItemsHeader); + +const SalesByItemsDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 450px; + } +`; diff --git a/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js b/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js index 6d3cad86a..7ff7f2107 100644 --- a/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js +++ b/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js @@ -2,7 +2,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import styled from 'styled-components'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import { useSalesByItemsContext } from './SalesByItemProvider'; import { useSalesByItemsTableColumns } from './components'; @@ -52,7 +52,7 @@ const SalesByItemsSheet = styled(FinancialSheet)` min-width: 850px; `; -const SalesByItemsDataTable = styled(DataTable)` +const SalesByItemsDataTable = styled(ReportDataTable)` .table { .tbody { .tr .td { diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js index 891b8e925..2dcd1d27a 100644 --- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js +++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js @@ -22,9 +22,6 @@ import { compose } from 'utils'; * Trial balance sheet. */ function TrialBalanceSheet({ - // #withPreferences - organizationName, - // #withTrialBalanceSheetActions toggleTrialBalanceFilterDrawer: toggleFilterDrawer, }) { @@ -44,7 +41,6 @@ function TrialBalanceSheet({ }, [setFilter], ); - // Handle numebr format form submit. const handleNumberFormatSubmit = (numberFormat) => { setFilter({ diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js index 3e898fbf3..b8702d7e5 100644 --- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js +++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js @@ -1,10 +1,12 @@ import React from 'react'; import * as Yup from 'yup'; import moment from 'moment'; -import { FormattedMessage as T } from 'components'; -import intl from 'react-intl-universal'; import { Formik, Form } from 'formik'; +import intl from 'react-intl-universal'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; +import styled from 'styled-components'; + +import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import TrialBalanceSheetHeaderGeneralPanel from './TrialBalanceSheetHeaderGeneralPanel'; @@ -72,7 +74,7 @@ function TrialBalanceSheetHeader({ }; return ( - @@ -105,7 +107,7 @@ function TrialBalanceSheetHeader({ - + ); } @@ -115,3 +117,9 @@ export default compose( })), withTrialBalanceActions, )(TrialBalanceSheetHeader); + +const TrialBalanceSheetDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 450px; + } +`; diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js index a0fc72605..5f3294fed 100644 --- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js +++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js @@ -2,7 +2,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import styled from 'styled-components'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import { useTrialBalanceSheetContext } from './TrialBalanceProvider'; import { useTrialBalanceTableColumns } from './components'; @@ -47,7 +47,7 @@ export default function TrialBalanceSheetTable({ companyName }) { ); } -const TrialBalanceDataTable = styled(DataTable)` +const TrialBalanceDataTable = styled(ReportDataTable)` .table { .tbody { .tr .td { diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js index 6ae38960f..208fb9a39 100644 --- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js +++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js @@ -13,6 +13,7 @@ import { VendorBalanceSummaryBody } from './VendorsBalanceSummaryBody'; import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions'; +import { TableStyle } from 'common'; import { getDefaultVendorsBalanceQuery } from './utils'; import { compose } from 'utils'; diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js index 4dbbf10c1..057241099 100644 --- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js +++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js @@ -3,6 +3,8 @@ import * as Yup from 'yup'; import { Formik, Form } from 'formik'; import moment from 'moment'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; +import styled from 'styled-components'; + import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; @@ -61,7 +63,7 @@ function VendorsBalanceSummaryHeader({ }; return ( - @@ -88,7 +90,7 @@ function VendorsBalanceSummaryHeader({ - + ); } @@ -98,3 +100,9 @@ export default compose( })), withVendorsBalanceSummaryActions, )(VendorsBalanceSummaryHeader); + +const VendorBalanceDrawerHeader = styled(FinancialStatementHeader)` + .bp3-drawer { + max-height: 450px; + } +`; diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js index 6bc4431c9..3c77e0c5c 100644 --- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js +++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js @@ -2,11 +2,12 @@ import React from 'react'; import intl from 'react-intl-universal'; import styled from 'styled-components'; -import { DataTable, FinancialSheet } from 'components'; +import { ReportDataTable, FinancialSheet } from 'components'; import { useVendorsBalanceColumns } from './components'; import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider'; +import { TableStyle } from 'common'; import { tableRowTypesToClassnames } from 'utils'; /** @@ -34,6 +35,7 @@ export default function VendorsBalanceSummaryTable({ data={table.data} rowClassNames={tableRowTypesToClassnames} noInitialFetch={true} + styleName={TableStyle.Constrant} /> ); @@ -41,7 +43,7 @@ export default function VendorsBalanceSummaryTable({ const VendorBalanceFinancialSheet = styled(FinancialSheet)``; -const VendorBalanceDataTable = styled(DataTable)` +const VendorBalanceDataTable = styled(ReportDataTable)` .table { .tbody { .tr:not(.no-results) { @@ -51,7 +53,7 @@ const VendorBalanceDataTable = styled(DataTable)` padding-bottom: 0.4rem; } - &.row-type--TOTAL { + &.row_type--TOTAL { font-weight: 500; .td { diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/components.js b/src/containers/FinancialStatements/VendorsBalanceSummary/components.js index 6075ada08..fcf4e5aed 100644 --- a/src/containers/FinancialStatements/VendorsBalanceSummary/components.js +++ b/src/containers/FinancialStatements/VendorsBalanceSummary/components.js @@ -6,6 +6,8 @@ import { If } from 'components'; import FinancialLoadingBar from '../FinancialLoadingBar'; import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider'; +import { Align } from 'common'; + /** * Retrieve vendors balance summary columns. */ @@ -39,8 +41,8 @@ const percentageColumnAccessor = () => ({ accessor: 'cells[2].value', className: 'total', width: 140, - align: 'right', textOverview: true, + align: Align.Right, }); /** @@ -51,8 +53,8 @@ const totalColumnAccessor = () => ({ accessor: 'cells[1].value', className: 'total', width: 140, - align: 'right', textOverview: true, + align: Align.Right, }); /** diff --git a/src/containers/FinancialStatements/VendorsTransactions/components.js b/src/containers/FinancialStatements/VendorsTransactions/components.js index bfb8e0fe5..3fb882d7a 100644 --- a/src/containers/FinancialStatements/VendorsTransactions/components.js +++ b/src/containers/FinancialStatements/VendorsTransactions/components.js @@ -1,9 +1,10 @@ import React from 'react'; import intl from 'react-intl-universal'; + import { If } from 'components'; import { useVendorsTransactionsContext } from './VendorsTransactionsProvider'; import FinancialLoadingBar from '../FinancialLoadingBar'; -import { getColumnWidth, getForceWidth } from 'utils'; +import { getColumnWidth } from 'utils'; /** * Retrieve vendors transactions columns. @@ -17,19 +18,8 @@ export const useVendorsTransactionsColumns = () => { () => [ { Header: intl.get('vendor_name'), - accessor: ({ cells }) => { - return ( - - {cells[0].value} - - ); - }, + accessor: 'cells[0].value', className: 'vendor_name', - // textOverview: true, - // width: 240, }, { Header: intl.get('account_name'), diff --git a/src/containers/Subscriptions/BillingPaymentMethod.js b/src/containers/Subscriptions/BillingPaymentMethod.js new file mode 100644 index 000000000..5c180cf38 --- /dev/null +++ b/src/containers/Subscriptions/BillingPaymentMethod.js @@ -0,0 +1,15 @@ +import React from 'react'; + +import { T } from 'components'; +import { PaymentMethodTabs } from './SubscriptionTabs'; + +export default ({ formik, title, description }) => { + return ( +
+

+

+ + +
+ ); +}; diff --git a/src/containers/Subscriptions/BillingPlansForm.js b/src/containers/Subscriptions/BillingPlansForm.js index 6eed7a77c..b26cfc89e 100644 --- a/src/containers/Subscriptions/BillingPlansForm.js +++ b/src/containers/Subscriptions/BillingPlansForm.js @@ -1,10 +1,13 @@ import React from 'react'; +import * as R from 'ramda'; import 'style/pages/Subscription/BillingPlans.scss'; import BillingPlansInput from './BillingPlansInput'; import BillingPeriodsInput from './BillingPeriodsInput'; -// import BillingPaymentMethod from './BillingPaymentMethod'; +import BillingPaymentMethod from './BillingPaymentMethod'; + +import withSubscriptions from './withSubscriptions'; /** * Billing plans form. @@ -14,7 +17,24 @@ export default function BillingPlansForm() {
- {/* */} +
); } + +/** + * Billing payment methods when subscription is inactive. + * @returns {JSX.Element} + */ +function BillingPaymentMethodWhenSubscriptionInactiveJSX({ + // # withSubscriptions + isSubscriptionActive, + + ...props +}) { + return !isSubscriptionActive ? : null; +} + +const BillingPaymentMethodWhenSubscriptionInactive = R.compose( + withSubscriptions(({ isSubscriptionActive }) => ({ isSubscriptionActive })), +)(BillingPaymentMethodWhenSubscriptionInactiveJSX); diff --git a/src/hooks/state/subscriptions.js b/src/hooks/state/subscriptions.js index 95f2cdd4d..42a9c3f54 100644 --- a/src/hooks/state/subscriptions.js +++ b/src/hooks/state/subscriptions.js @@ -1,6 +1,11 @@ import { useCallback } from "react" -import { useDispatch } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { setSubscriptions } from 'store/subscription/subscription.actions'; +import { + isSubscriptionOnTrialFactory, + isSubscriptionInactiveFactory, + isSubscriptionActiveFactory, +} from 'store/subscription/subscription.selectors'; /** * Sets subscriptions. @@ -12,3 +17,20 @@ export const useSetSubscriptions = () => { dispatch(setSubscriptions(subscriptions)); }, [dispatch]); } + +/** + * The organization subscription selector. + * @param {string} slug + * @returns {} + */ +export const useSubscription = (slug = 'main') => { + const isSubscriptionOnTrial = useSelector(isSubscriptionOnTrialFactory(slug)); + const isSubscriptionInactive = useSelector(isSubscriptionInactiveFactory(slug)); + const isSubscriptionActive = useSelector(isSubscriptionActiveFactory(slug)); + + return { + isSubscriptionActive, + isSubscriptionInactive, + isSubscriptionOnTrial + } +} \ No newline at end of file diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json index cb8c0d3e2..3accd9b2f 100644 --- a/src/lang/ar/index.json +++ b/src/lang/ar/index.json @@ -1795,6 +1795,13 @@ "profit_loss_sheet.percentage_of_row": "% التغير الأفقي", "profit_loss_sheet.percentage_of_expense": "% التغير في المصاريف", "profit_loss_sheet.percentage_of_income": "% التغير الإيرادات", + + "report.balance_sheet_comparison.title": "مقارنة الميزانية العمومية", + "report.balance_sheet_comparison.desc": "يعرض أصول الشركة والتزاماتها وحقوق المساهمين في نقطة زمنية محددة مقارنة بالسنة الماضية.", + + "report.profit_loss_sheet_comparison.title": "مقارنة قائمة الدخل", + "report.profit_loss_sheet_comparison.desc": "يعرض الإيرادات والتكاليف والمصاريف المتكبدة في نقطة محددة ومقارنة بالعام السابق.", + "warehouse_locations.label": "المخازن", "warehouse_locations.column.warehouse_name": "اسم المخزن", "warehouse_locations.column.quantity": "الكمية", @@ -2001,5 +2008,4 @@ "receipt.warehouse_button.label": "المخزن: {label}", "warehouse_transfer.empty_status.title": "", "warehouse_transfer.empty_status.description": "" - } \ No newline at end of file diff --git a/src/lang/en/index.json b/src/lang/en/index.json index 244d04750..41d4ebc9e 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -1775,6 +1775,13 @@ "profit_loss_sheet.percentage_of_row": "% of Row", "profit_loss_sheet.percentage_of_expense": "% of Expense", "profit_loss_sheet.percentage_of_income": "% of Income", + + "report.balance_sheet_comparison.title": "Balance Sheet Comparison", + "report.balance_sheet_comparison.desc": "Reports a company's assets, liabilities and shareholders' equity compared to previous year.", + + "report.profit_loss_sheet_comparison.title": "Profit/Loss Comparison", + "report.profit_loss_sheet_comparison.desc": "Reports the revenues, costs and expenses incurred at a specific point and compared to previous year.", + "the_vendor_has_been_inactivated_successfully": "The contact has been inactivated successfully.", "vendor.alert.activated_message": "The vendor has been activated successfully.", "vendor.alert.are_you_sure_want_to_inactivate_this_vendor": "Are you sure want to inactivate this vendor? You will to able to activate it later.", @@ -1786,6 +1793,7 @@ "customer.alert.are_you_sure_want_to_inactivate_this_customer": "Are you sure want to inactivate this customer? You will to able to activate it later.", "credit_note_preview.dialog.title": "Credit Note PDF Preview", "payment_receive_preview.dialog.title": "Payment Receive PDF Preview", + "warehouses.label": "Warehouses", "warehouses.label.new_warehouse": "New Warehouse", "warehouse.dialog.label.new_warehouse": "New Warehouse",