diff --git a/src/common/index.js b/src/common/index.js index 25821fa35..626d9153b 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -1,4 +1,3 @@ +export * from './TableStyle'; - - -export * from './TableStyle'; \ No newline at end of file +export const Align = { Left: 'left', Right: 'right', Center: 'center' }; diff --git a/src/components/Datatable/TableHeaderSkeleton.js b/src/components/Datatable/TableHeaderSkeleton.js index e5f2baba7..545db3147 100644 --- a/src/components/Datatable/TableHeaderSkeleton.js +++ b/src/components/Datatable/TableHeaderSkeleton.js @@ -1,4 +1,5 @@ import React, { useContext } from 'react'; +import clsx from 'classnames'; import TableContext from './TableContext'; import { Skeleton } from 'components'; @@ -8,7 +9,13 @@ function TableHeaderCell({ column }) { return (
diff --git a/src/components/Datatable/TableSkeletonRows.js b/src/components/Datatable/TableSkeletonRows.js index cf1d74e89..cf58e635d 100644 --- a/src/components/Datatable/TableSkeletonRows.js +++ b/src/components/Datatable/TableSkeletonRows.js @@ -1,4 +1,5 @@ import React, { useContext } from 'react'; +import clsx from 'classnames'; import TableContext from './TableContext'; import { Skeleton } from 'components'; @@ -11,7 +12,13 @@ function TableHeaderCell({ column }) { return (
diff --git a/src/components/FinancialReport/index.js b/src/components/FinancialReport/index.js new file mode 100644 index 000000000..50b418c3f --- /dev/null +++ b/src/components/FinancialReport/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import styled from 'styled-components'; + +const FinancialStatementRoot = styled.div``; +const FinancialStatementBodyRoot = styled.div``; + +/** + * + * @returns {React.JSX} + */ +export function FinancialReport({ children, className }) { + return ; +} + +/** + * + * @param {React.JSX} + */ +export function FinancialReportBody({ children, className }) { + return ( + + ); +} diff --git a/src/components/FinancialSheet.js b/src/components/FinancialSheet.js deleted file mode 100644 index 389272c4c..000000000 --- a/src/components/FinancialSheet.js +++ /dev/null @@ -1,101 +0,0 @@ -import React, { useMemo, useCallback } from 'react'; -import moment from 'moment'; -import classnames from 'classnames'; -import { FormattedMessage as T } from 'components'; -import intl from 'react-intl-universal'; - -import { If, LoadingIndicator, MODIFIER } from 'components'; - -export default function FinancialSheet({ - companyName, - sheetType, - fromDate, - toDate, - asDate, - children, - accountingBasis, - name, - loading, - className, - basis, - minimal = false, - fullWidth = false, - currentDate = true, -}) { - - const format = 'DD MMMM YYYY'; - const formattedFromDate = useMemo(() => moment(fromDate).format(format), [ - fromDate, - ]); - const formattedToDate = useMemo(() => moment(toDate).format(format), [ - toDate, - ]); - const formattedAsDate = useMemo(() => moment(asDate).format(format), [ - asDate, - ]); - - const nameModifer = name ? `financial-sheet--${name}` : ''; - const methodsLabels = useMemo( - () => ({ - cash: intl.get('cash'), - accrual: intl.get('accrual'), - }), - [], - ); - const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]); - const basisLabel = useMemo(() => getBasisLabel(basis), [ - getBasisLabel, - basis, - ]); - - return ( -
- {loading ? ( - - ) : ( -
- -

{companyName}

- - - -
{sheetType}
- - -
- - {formattedAsDate} - - - - {formattedFromDate} | {' '} - {formattedToDate} - -
- -
{children}
-
{accountingBasis}
- -
- - - {basisLabel} - - - - - - {moment().format('YYYY MMM DD HH:MM')} - - -
-
- )} -
- ); -} diff --git a/src/components/FinancialSheet/FinancialSheet.js b/src/components/FinancialSheet/FinancialSheet.js new file mode 100644 index 000000000..329005948 --- /dev/null +++ b/src/components/FinancialSheet/FinancialSheet.js @@ -0,0 +1,95 @@ +import React, { useMemo, useCallback } from 'react'; +import moment from 'moment'; +import intl from 'react-intl-universal'; + +import { If, FormattedMessage as T } from 'components'; +import { + FinancialSheetRoot, + FinancialSheetFooterCurrentTime, + FinancialSheetFooterBasis, + FinancialSheetFooter, + FinancialSheetAccountingBasis, + FinancialSheetTable, + FinancialSheetDate, + FinancialSheetType, + FinancialSheetTitle, +} from './StyledFinancialSheet'; + +/** + * Financial sheet. + * @returns {React.JSX} + */ +export function FinancialSheet({ + companyName, + sheetType, + fromDate, + toDate, + asDate, + children, + accountingBasis, + basis, + minimal = false, + fullWidth = false, + currentDate = true, +}) { + const format = 'DD MMMM YYYY'; + const formattedFromDate = useMemo( + () => moment(fromDate).format(format), + [fromDate], + ); + const formattedToDate = useMemo( + () => moment(toDate).format(format), + [toDate], + ); + const formattedAsDate = useMemo( + () => moment(asDate).format(format), + [asDate], + ); + const methodsLabels = useMemo( + () => ({ + cash: intl.get('cash'), + accrual: intl.get('accrual'), + }), + [], + ); + const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]); + const basisLabel = useMemo( + () => getBasisLabel(basis), + [getBasisLabel, basis], + ); + + return ( + + {companyName && {companyName}} + {sheetType && {sheetType}} + + + + {formattedAsDate} + + + {formattedFromDate} | {' '} + {formattedToDate} + + + + {children} + + {accountingBasis} + + + + {basisLabel && ( + + {basisLabel} + + )} + {currentDate && ( + + {moment().format('YYYY MMM DD HH:MM')} + + )} + + + ); +} diff --git a/src/components/FinancialSheet/FinancialSheetSkeleton.js b/src/components/FinancialSheet/FinancialSheetSkeleton.js new file mode 100644 index 000000000..8feb034b5 --- /dev/null +++ b/src/components/FinancialSheet/FinancialSheetSkeleton.js @@ -0,0 +1,84 @@ +import React from 'react'; +import styled from 'styled-components'; + +import { Align } from 'common'; +import { SkeletonText, DataTable } from 'components'; + +import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; +import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; +import { TableStyle } from 'common'; +import { + FinancialSheetRoot, + FinancialSheetTitle, + FinancialSheetType, + FinancialSheetDate, + FinancialSheetTable, +} from './StyledFinancialSheet'; + +/** + * Financial sheet paper skeleton. + * @returns {React.JSX} + */ +export function FinancialSheetSkeleton({ + minimal, + fullWidth, + titleCharsLength, + typeCharsLength, + dateCharsLength, + skeletonTableColumns, +}) { + return ( + + + + + + + + + + + + + + + + + + ); +} + +FinancialSheetSkeleton.defaultProps = { + titleCharsLength: 20, + typeCharsLength: 40, + dateCharsLength: 20, + skeletonTableColumns: [ + { + id: 'skeleton-1', + className: 'skeleton-1', + }, + { + id: 'skeleton-2', + className: 'skeleton-2', + align: Align.Right, + }, + ], +}; + +const FinancialSkeletonTable = styled(DataTable)` + .table .th .skeleton, + .table .td .skeleton { + margin-top: 4px; + margin-bottom: 4px; + } +`; diff --git a/src/components/FinancialSheet/StyledFinancialSheet.js b/src/components/FinancialSheet/StyledFinancialSheet.js new file mode 100644 index 000000000..84e521b1f --- /dev/null +++ b/src/components/FinancialSheet/StyledFinancialSheet.js @@ -0,0 +1,82 @@ +import styled from 'styled-components'; + +export const FinancialSheetRoot = styled.div` + border: 2px solid #f0f0f0; + border-radius: 10px; + min-width: 640px; + width: auto; + padding: 30px 18px; + max-width: 100%; + margin: 35px auto; + min-height: 400px; + display: flex; + flex-direction: column; + background: #fff; + + ${(props) => + props.fullWidth && + ` + width: 100%; + margin-top: 25px;`} + + ${(props) => + props.minimal && + ` + border: 0; + padding: 0; + margin-top: 20px; + + ${FinancialSheetTitle} { + font-size: 18px; + color: #333; + } + ${FinancialSheetTitle} + ${FinancialSheetDate} { + margin-top: 8px; + } + ${FinancialSheetDate} { + margin-top: 20px; + } +`} +`; + +export const FinancialSheetTitle = styled.h1` + margin: 0; + font-weight: 400; + font-size: 20px; + color: #464646; + text-align: center; +`; + +export const FinancialSheetType = styled.h6` + text-align: center; + margin: 0; + font-size: 16px; + font-weight: 400; + color: #666; + margin-top: 6px; +`; + +export const FinancialSheetDate = styled.div` + text-align: center; + color: #666; + margin-top: 6px; +`; + +export const FinancialSheetFooter = styled.div` + color: #888; + text-align: center; + margin-top: auto; + padding-top: 18px; + font-size: 13px; + + > span + span { + padding-left: 10px; + } +`; +export const FinancialSheetTable = styled.div` + margin-top: 24px; +`; +export const FinancialSheetFooterBasis = styled.span``; +export const FinancialSheetFooterCurrentTime = styled.span``; + +export const FinancialSheetAccountingBasis = styled.div``; diff --git a/src/components/FinancialSheet/index.js b/src/components/FinancialSheet/index.js new file mode 100644 index 000000000..ca17c27c5 --- /dev/null +++ b/src/components/FinancialSheet/index.js @@ -0,0 +1,2 @@ +export * from './FinancialSheet'; +export * from './FinancialSheetSkeleton'; \ No newline at end of file diff --git a/src/components/FinancialStatement.js b/src/components/FinancialStatement.js index 1f98e34f5..e077ffdb4 100644 --- a/src/components/FinancialStatement.js +++ b/src/components/FinancialStatement.js @@ -1,15 +1,24 @@ import React from 'react'; -import className from 'classnames'; -import 'style/containers/FinancialStatements/FinancialSheet.scss'; +import styled from 'styled-components'; -export default function FinancialStatements({ name, children }) { +const FinancialStatementRoot = styled.div``; +const FinancialStatementBodyRoot = styled.div``; + +/** + * + * @param {*} param0 + * @returns + */ +export function FinancialStatement({ children, className }) { + return ; +} + +/** + * + * @param {React.JSX} + */ +export function FinancialStatementBody({ children, className }) { return ( -
- {children} -
+ ); } diff --git a/src/components/Skeleton.js b/src/components/Skeleton.js index df6df2c25..b5b7a9cde 100644 --- a/src/components/Skeleton.js +++ b/src/components/Skeleton.js @@ -6,14 +6,36 @@ import { randomNumber } from 'utils'; /** * Skeleton component. */ -export default function Skeleton({ +export function Skeleton({ Tag = 'span', minWidth = 40, maxWidth = 100, + children, }) { - const randomWidth = useMemo(() => randomNumber(minWidth, maxWidth), [ - minWidth, - maxWidth, - ]); - return ; + const randomWidth = useMemo( + () => randomNumber(minWidth, maxWidth), + [minWidth, maxWidth], + ); + return ( + + ); +} + +export function SkeletonText({ + Tag = 'span', + charsLength, + minChars = 40, + maxChars = 100, +}) { + const computedCharLength = useMemo( + () => (charsLength ? charsLength : randomNumber(minChars, maxChars)), + [charsLength, minChars, maxChars], + ); + const randamText = 'X'.repeat(computedCharLength); + + return {randamText}; } diff --git a/src/components/SkeletonText.js b/src/components/SkeletonText.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/index.js b/src/components/index.js index 5e14f2288..cdf278b7b 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -5,9 +5,6 @@ import Choose from './Utils/Choose'; import For from './Utils/For'; import { FormattedMessage, FormattedHTMLMessage } from './FormattedMessage'; import ListSelect from './ListSelect'; -import FinancialStatement from './FinancialStatement'; -// import DynamicFilterValueField from './DynamicFilter/DynamicFilterValueField'; -// import DynamicFilterCompatatorField from './DynamicFilter/DynamicFilterCompatatorField'; import ErrorMessage from './ErrorMessage'; import MODIFIER from './modifiers'; import FieldHint from './FieldHint'; @@ -41,7 +38,6 @@ import InputPrependText from './Forms/InputPrependText'; import PageFormBigNumber from './PageFormBigNumber'; import AccountsMultiSelect from './AccountsMultiSelect'; import ContactsMultiSelect from './ContactsMultiSelect'; -import Skeleton from './Skeleton'; import ContextMenu from './ContextMenu'; import TableFastCell from './Datatable/TableFastCell'; import DashboardContentTable from './Dashboard/DashboardContentTable'; @@ -95,6 +91,10 @@ export * from './Card'; export * from './Customers' export * from './Vendors' export * from './Table'; +export * from './Skeleton'; +export * from './FinancialStatement'; +export * from './FinancialReport'; +export * from './FinancialSheet'; const Hint = FieldHint; @@ -110,7 +110,6 @@ export { T, Money, ListSelect, - FinancialStatement, // DynamicFilterValueField, // DynamicFilterCompatatorField, MODIFIER, @@ -148,7 +147,6 @@ export { DataTableEditable, ContactsMultiSelect, TableFastCell, - Skeleton, ContextMenu, DashboardContentTable, DashboardPageContent, diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js index 36fd8daae..c8feefb61 100644 --- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js +++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js @@ -1,8 +1,7 @@ -import React, { useCallback } from 'react'; -import { FormattedMessage as T } from 'components'; +import React from 'react'; import intl from 'react-intl-universal'; -import { DataTable } from 'components'; -import FinancialSheet from 'components/FinancialSheet'; + +import { DataTable, FinancialSheet } from 'components'; import { useAPAgingSummaryContext } from './APAgingSummaryProvider'; import { useAPAgingSummaryColumns } from './components'; @@ -14,8 +13,6 @@ export default function APAgingSummaryTable({ //#ownProps organizationName, }) { - - // AP aging summary report content. const { APAgingSummary: { tableRows }, diff --git a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js index 41b58a805..0a2a84379 100644 --- a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js +++ b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js @@ -1,7 +1,7 @@ -import React, { useCallback } from 'react'; +import React from 'react'; import intl from 'react-intl-universal'; -import DataTable from 'components/DataTable'; -import FinancialSheet from 'components/FinancialSheet'; + +import { DataTable, FinancialSheet } from 'components'; import { useARAgingSummaryContext } from './ARAgingSummaryProvider'; import { useARAgingSummaryColumns } from './components'; diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetBody.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetBody.js index f40d3f7be..d9e4373fc 100644 --- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetBody.js +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetBody.js @@ -5,7 +5,7 @@ import { FinancialReportBody } from '../FinancialReportPage'; import withCurrentOrganization from 'containers/Organization/withCurrentOrganization'; import { useBalanceSheetContext } from './BalanceSheetProvider'; - +import { FinancialSheetSkeleton } from '../../../components/FinancialSheet'; import { compose } from 'utils'; /** @@ -21,7 +21,7 @@ function BalanceSheetBodyJSX({ return ( {isLoading ? ( - 'loading' + ) : ( )} diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js index d73d14e06..86174e62d 100644 --- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js @@ -2,8 +2,8 @@ import React from 'react'; import styled from 'styled-components'; import intl from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; -import DataTable from 'components/DataTable'; +import { DataTable, FinancialSheet } from 'components'; + import { useBalanceSheetContext } from './BalanceSheetProvider'; import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils'; @@ -36,8 +36,7 @@ export default function BalanceSheetTable({ name="balance-sheet" companyName={companyName} sheetType={intl.get('balance_sheet')} - fromDate={query.from_date} - toDate={query.to_date} + asDate={query.to_date} basis={query.basis} > @@ -60,8 +61,8 @@ const BalanceSheetDataTable = styled(DataTable)` .tbody .tr { .td { border-bottom: 0; - padding-top: 0.36rem; - padding-bottom: 0.36rem; + padding-top: 0.32rem; + padding-bottom: 0.32rem; } &.is-expanded { .td:not(.name) .cell-inner { diff --git a/src/containers/FinancialStatements/BalanceSheet/utils.js b/src/containers/FinancialStatements/BalanceSheet/utils.js index 19afab84a..c89f2651f 100644 --- a/src/containers/FinancialStatements/BalanceSheet/utils.js +++ b/src/containers/FinancialStatements/BalanceSheet/utils.js @@ -3,13 +3,13 @@ import * as R from 'ramda'; import { isEmpty } from 'lodash'; import intl from 'react-intl-universal'; import moment from 'moment'; + +import { Align } from 'common'; import { CellTextSpan } from 'components/Datatable/Cells'; import { getColumnWidth } from 'utils'; const getTableCellValueAccessor = (index) => `cells[${index}].value`; -const Align = { Left: 'left', Right: 'right', Center: 'center' }; - const getReportColWidth = (data, accessor, headerText) => { return getColumnWidth( data, diff --git a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.js b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.js index 4f813c1d2..e4dfd0881 100644 --- a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.js +++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.js @@ -1,8 +1,8 @@ import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; -import { DataTable } from 'components'; -import FinancialSheet from 'components/FinancialSheet'; +import { DataTable, FinancialSheet } from 'components'; + import { useCashFlowStatementColumns } from './components'; import { useCashFlowStatementContext } from './CashFlowStatementProvider'; @@ -15,8 +15,6 @@ export default function CashFlowStatementTable({ // #ownProps companyName, }) { - - const { cashFlowStatement: { tableRows }, isCashFlowLoading, diff --git a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js index 103dd3ea0..931ca053e 100644 --- a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js +++ b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js @@ -1,8 +1,7 @@ import React from 'react'; import intl from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; -import DataTable from 'components/DataTable'; +import { DataTable, FinancialSheet } from 'components'; import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider'; import { useCustomersSummaryColumns } from './components'; diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js index 3ff054d9e..122b921f9 100644 --- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js +++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js @@ -1,8 +1,8 @@ import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; -import DataTable from 'components/DataTable'; +import { DataTable, FinancialSheet } from 'components'; + import { useCustomersTransactionsColumns } from './components'; import { useCustomersTransactionsContext } from './CustomersTransactionsProvider'; diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js index 539b735c7..d07c3b78a 100644 --- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js @@ -3,7 +3,7 @@ import React, { useMemo } from 'react'; import { defaultExpanderReducer } from 'utils'; import intl from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; +import { FinancialSheet } from 'components'; import DataTable from 'components/DataTable'; import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows'; import TableFastCell from 'components/Datatable/TableFastCell'; @@ -37,7 +37,6 @@ export default function GeneralLedgerTable({ companyName }) { sheetType={intl.get('general_ledger_sheet')} fromDate={query.from_date} toDate={query.to_date} - name="general-ledger" loading={isLoading} fullWidth={true} > diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js index 5ab72ed72..4c3963e2c 100644 --- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js +++ b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js @@ -1,8 +1,7 @@ import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; -import { DataTable } from 'components'; +import { DataTable, FinancialSheet } from 'components'; import { useInventoryItemDetailsColumns } from './components'; import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider'; diff --git a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js index 6c86aeace..96fe37fa2 100644 --- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js +++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js @@ -1,8 +1,7 @@ import React from 'react'; import intl, { init } from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; -import { DataTable } from 'components'; +import { DataTable, FinancialSheet } from 'components'; import { useInventoryValuationContext } from './InventoryValuationProvider'; import { useInventoryValuationTableColumns } from './components'; diff --git a/src/containers/FinancialStatements/Journal/JournalTable.js b/src/containers/FinancialStatements/Journal/JournalTable.js index 372b7c411..992aba2ad 100644 --- a/src/containers/FinancialStatements/Journal/JournalTable.js +++ b/src/containers/FinancialStatements/Journal/JournalTable.js @@ -1,25 +1,24 @@ import React, { useCallback, useMemo } from 'react'; import intl from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; -import DataTable from 'components/DataTable'; -import { useJournalSheetContext } from './JournalProvider'; +import { DataTable, FinancialSheet } from 'components'; import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows'; import TableFastCell from 'components/Datatable/TableFastCell'; -import { defaultExpanderReducer } from 'utils'; + import { useJournalTableColumns } from './components'; +import { useJournalSheetContext } from './JournalProvider'; + +import { defaultExpanderReducer } from 'utils'; export default function JournalSheetTable({ // #ownProps onFetchData, companyName, }) { - - // Journal sheet context. const { journalSheet: { tableRows, query }, - isLoading + isLoading, } = useJournalSheetContext(); // Retreive the journal table columns. @@ -42,8 +41,6 @@ export default function JournalSheetTable({ }; }, []); - - return ( + > ); -} \ No newline at end of file +} diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossBody.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossBody.js index 8a853e1c3..86b075957 100644 --- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossBody.js +++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossBody.js @@ -1,5 +1,6 @@ import React from 'react'; +import { FinancialSheetSkeleton } from '../../../components/FinancialSheet'; import ProfitLossSheetTable from './ProfitLossSheetTable'; import { FinancialReportBody } from '../FinancialReportPage'; @@ -20,7 +21,7 @@ function ProfitLossBodyJSX({ return ( {isLoading ? ( - 'loading' + ) : ( )} diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js index 501838dc7..495626c5d 100644 --- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js +++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js @@ -2,13 +2,10 @@ import React from 'react'; import styled from 'styled-components'; import { TableStyle } from 'common'; -import { FormattedMessage as T } from 'components'; - -import { useProfitLossSheetColumns } from './hooks'; -import FinancialSheet from 'components/FinancialSheet'; -import DataTable from 'components/DataTable'; +import { DataTable, FinancialSheet, FormattedMessage as T } from 'components'; import { tableRowTypesToClassnames, defaultExpanderReducer } from 'utils'; +import { useProfitLossSheetColumns } from './hooks'; import { useProfitLossSheetContext } from './ProfitLossProvider'; export default function ProfitLossSheetTable({ @@ -60,8 +57,8 @@ const ProfitLossDataTable = styled(DataTable)` .tbody .tr { .td { border-bottom: 0; - padding-top: 0.36rem; - padding-bottom: 0.36rem; + padding-top: 0.32rem; + padding-bottom: 0.32rem; } &.is-expanded { .td:not(.name) .cell-inner { @@ -74,8 +71,8 @@ const ProfitLossDataTable = styled(DataTable)` border-top: 1px solid #bbb; } } - &:last-of-type .td{ - border-bottom: 1px solid #bbb; + &:last-of-type .td { + border-bottom: 3px double #000; } } } diff --git a/src/containers/FinancialStatements/ProfitLossSheet/utils.js b/src/containers/FinancialStatements/ProfitLossSheet/utils.js index d4826fbbd..7b1dcf956 100644 --- a/src/containers/FinancialStatements/ProfitLossSheet/utils.js +++ b/src/containers/FinancialStatements/ProfitLossSheet/utils.js @@ -1,9 +1,10 @@ import * as R from 'ramda'; import { isEmpty } from 'lodash'; + +import { Align } from 'common'; import { CellTextSpan } from 'components/Datatable/Cells'; import { getColumnWidth } from 'utils'; -const Align = { Left: 'left', Right: 'right', Center: 'center' }; const getTableCellValueAccessor = (index) => `cells[${index}].value`; const getReportColWidth = (data, accessor, labelText) => { diff --git a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js index 63f20e766..f251a9960 100644 --- a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js +++ b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js @@ -1,11 +1,9 @@ import React from 'react'; import intl from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; -import { DataTable } from 'components'; +import { DataTable, FinancialSheet } from 'components'; import { usePurchaseByItemsContext } from './PurchasesByItemsProvider'; - import { usePurchasesByItemsTableColumns } from './components'; /** diff --git a/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js b/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js index 4fd996d09..c8569498c 100644 --- a/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js +++ b/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js @@ -1,8 +1,8 @@ import React from 'react'; import intl from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; -import { DataTable } from 'components'; +import { DataTable, FinancialSheet } from 'components'; + import { useSalesByItemsContext } from './SalesByItemProvider'; import { useSalesByItemsTableColumns } from './components'; diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js index e31a0f34f..656eb103d 100644 --- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js +++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js @@ -1,12 +1,9 @@ import React from 'react'; import intl from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; -import DataTable from 'components/DataTable'; +import { DataTable, FinancialSheet } from 'components'; import { useTrialBalanceSheetContext } from './TrialBalanceProvider'; - - import { useTrialBalanceTableColumns } from './components'; /** diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js index 84401992a..0717b0cbd 100644 --- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js +++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js @@ -1,8 +1,7 @@ import React from 'react'; -import { FormattedMessage as T } from 'components'; import intl from 'react-intl-universal'; -import { DataTable } from 'components'; -import FinancialSheet from 'components/FinancialSheet'; + +import { DataTable, FinancialSheet } from 'components'; import { useVendorsBalanceColumns } from './components'; import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider'; diff --git a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js index a12f2408b..af549d401 100644 --- a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js +++ b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js @@ -1,8 +1,8 @@ import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; -import FinancialSheet from 'components/FinancialSheet'; -import DataTable from 'components/DataTable'; +import { DataTable, FinancialSheet } from 'components'; + import { useVendorsTransactionsColumns } from './components'; import { useVendorsTransactionsContext } from './VendorsTransactionsProvider'; diff --git a/src/style/components/DataTable/DataTable.scss b/src/style/components/DataTable/DataTable.scss index 0306567bb..5659c52c1 100644 --- a/src/style/components/DataTable/DataTable.scss +++ b/src/style/components/DataTable/DataTable.scss @@ -147,6 +147,19 @@ width: 65%; margin: 10px 0; } + + &.align-right { + .skeleton { + margin-left: auto; + } + } + + &.align-center { + .skeleton { + margin-left: auto; + margin-right: auto; + } + } } .th { @@ -363,13 +376,14 @@ .table-constrant, .table--constrant { .table { - .thead{ - .tr:first-of-type .th{ + .thead { + .tr:first-of-type .th { border-top: 1px solid #000000; } } + .thead .th { - background: transparent; + background: #fff; color: #222222; border-bottom: 1px solid #000000; padding: 0.5rem; diff --git a/src/style/containers/FinancialStatements/FinancialSheet.scss b/src/style/containers/FinancialStatements/FinancialSheet.scss deleted file mode 100644 index 18b3c7957..000000000 --- a/src/style/containers/FinancialStatements/FinancialSheet.scss +++ /dev/null @@ -1,118 +0,0 @@ -// Financial sheet. -// ----------------------- -.financial-sheet { - border: 2px solid #f0f0f0; - border-radius: 10px; - min-width: 640px; - width: auto; - padding: 30px 18px; - max-width: 100%; - margin: 35px auto; - min-height: 400px; - display: flex; - flex-direction: column; - background: #fff; - - &__title { - margin: 0; - font-weight: 400; - font-size: 20px; - color: #464646; - text-align: center; - } - &__sheet-type { - text-align: center; - margin: 0; - font-size: 16px; - font-weight: 400; - color: #666; - margin-top: 6px; - } - &__date { - text-align: center; - color: #666; - margin-top: 6px; - } - &__table { - margin-top: 24px; - - .table { - .tbody, - .thead { - .tr .td, - .tr .th { - background: #fff; - } - } - - .tr.no-results { - .td { - flex-direction: column; - padding: 20px; - color: #666; - align-items: center; - } - } - } - } - &__inner { - &.is-loading { - display: none; - } - } - &__footer { - color: #888; - text-align: center; - margin-top: auto; - padding-top: 18px; - font-size: 13px; - - - > span + span{ - padding-left: 10px; - } - } - .dashboard__loading-indicator { - margin: auto; - padding: 0; - } - &--expended { - width: auto; - } - - &--minimal { - border: 0; - padding: 0; - margin-top: 20px; - - .financial-sheet { - &__title { - font-size: 18px; - color: #333; - } - &__title + .financial-sheet__date { - margin-top: 8px; - } - &__table { - margin-top: 20px; - } - } - } - &.is-full-width { - width: 100%; - margin-top: 25px; - } -} - -.financial-statement { - &__header { - } - - &__body { - padding-left: 15px; - padding-right: 15px; - display: flex; - justify-content: center; - align-items: center; - } -}