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

Merge pull request #363 from bigcapitalhq/big-132-financial-reports-pdf-printing

Browse Source 
feat: printing financial reports
This commit is contained in:
Ahmed Bouhuolia
2024-02-21 17:39:56 +02:00
committed by GitHub
parent 0868eeaa0e 1752c32eec
commit e09f8e4334
294 changed files with 5888 additions and 1793 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/webapp/src/components/FormattedMessage/index.tsx
View File

@@ -1,8 +1,13 @@
// @ts-nocheck
import intl from 'react-intl-universal';
export function FormattedMessage({ id, values }) {
return intl.get(id, values);
interface FormattedMessageProps {
id: string;
values?: Record<string, any>;
}
export function FormattedMessage({ id, values }: FormattedMessageProps) {
return <>{intl.get(id, values)}</>;
}
export function FormattedHTMLMessage({ ...args }) {

17
packages/webapp/src/constants/dialogs.ts
View File

@@ -53,4 +53,21 @@ export enum DialogsName {
EstimateMail = 'estimate-mail',
ReceiptMail = 'receipt-mail',
PaymentMail = 'payment-mail',
BalanceSheetPdfPreview = 'BalanceSheetPdfPreview',
TrialBalanceSheetPdfPreview = 'TrialBalanceSheetPdfPreview',
CashflowSheetPdfPreview = 'CashflowSheetPdfPreview',
ProfitLossSheetPdfPreview = 'ProfitLossSheetPdfPreview',
InventoryValuationPdfPreview = 'InventoryValuationPdfPreview',
APAgingSummaryPdfPreview = 'APAgingSummaryPdfPreview',
ARAgingSummaryPdfPreview = 'ARAgingSummaryPdfPreview',
JournalPdfPreview = 'JournalPdfPreview',
SalesByItemsPdfPreview = 'SalesByItemsPdfPreview',
PurchasesByItemsPdfPreview = 'PurchasesByItemsPdfPreview',
VendorBalancePdfPreview = 'VendorBalancePdfPreview',
InventoryItemDetailsPdfPreview = 'InventoryItemDetailsPdfPreview',
CustomerBalanceSummaryPdfPreview = 'CustomerBalanceSummaryPdfPreview',
CustomerTransactionsPdfPreview = 'CustomerTransactionsPdfPreview',
VendorTransactionsPdfPreview = 'VendorTransactionsPdfPreview',
GeneralLedgerPdfPreview = 'GeneralLedgerPdfPreview',
SalesTaxLiabilitySummaryPdfPreview = 'SalesTaxLiabilitySummaryPdfPreview'
}

6
packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.tsx
View File

@@ -15,6 +15,8 @@ import { APAgingSummarySheetLoadingBar } from './components';
import withAPAgingSummaryActions from './withAPAgingSummaryActions';
import { compose } from '@/utils';
import { APAgingSummaryPdfDialog } from './dialogs/APAgingSummaryPdfDialog';
import { DialogsName } from '@/constants/dialogs';
/**
* A/P aging summary report.
@@ -68,6 +70,10 @@ function APAgingSummary({
<APAgingSummaryBody organizationName={organizationName} />
</FinancialStatement>
</DashboardPageContent>
<APAgingSummaryPdfDialog
dialogName={DialogsName.APAgingSummaryPdfPreview}
/>
</APAgingSummaryProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx
View File

@@ -21,6 +21,8 @@ import withAPAgingSummary from './withAPAgingSummary';
import withAPAgingSummaryActions from './withAPAgingSummaryActions';
import { saveInvoke, compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
import withDialogActions from '@/containers/Dialog/withDialogActions';
/**
* AP Aging summary sheet - Actions bar.
@@ -32,6 +34,9 @@ function APAgingSummaryActionsBar({
// #withARAgingSummaryActions
toggleAPAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
// #withDialogActions
openDialog,
//#ownProps
numberFormat,
onNumberFormatSubmit,
@@ -52,6 +57,11 @@ function APAgingSummaryActionsBar({
saveInvoke(onNumberFormatSubmit, numberFormat);
};
// Handle the print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.APAgingSummaryPdfPreview);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -106,6 +116,7 @@ function APAgingSummaryActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<APAgingSummaryExportMenu />}
@@ -129,4 +140,5 @@ export default compose(
withAPAgingSummary(({ APAgingSummaryFilterDrawer }) => ({
isFilterDrawerOpen: APAgingSummaryFilterDrawer,
})),
withDialogActions
)(APAgingSummaryActionsBar);

12
packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryDialogs.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { DialogsName } from '@/constants/dialogs';
import { APAgingSummaryPdfDialog } from './dialogs/APAgingSummaryPdfDialog';
export function APAgingSummaryDialogs() {
return (
<>
<APAgingSummaryPdfDialog
dialogName={DialogsName.APAgingSummaryPdfPreview}
/>
</>
);
}

10
packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.tsx
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { useMemo, createContext, useContext } from 'react';
import { useMemo, createContext, useContext } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useAPAgingSummaryReport } from '@/hooks/query';
@@ -12,22 +12,22 @@ const APAgingSummaryContext = createContext();
*/
function APAgingSummaryProvider({ filter, ...props }) {
// Transformers the filter from to the Url query.
const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
const httpQuery = useMemo(() => transformFilterFormToQuery(filter), [filter]);
const {
data: APAgingSummary,
isLoading: isAPAgingLoading,
isFetching: isAPAgingFetching,
refetch,
} = useAPAgingSummaryReport(query, { keepPreviousData: true });
} = useAPAgingSummaryReport(httpQuery, { keepPreviousData: true });
const provider = {
APAgingSummary,
isAPAgingLoading,
isAPAgingFetching,
refetch,
query,
query: httpQuery,
httpQuery,
};
return (

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

@@ -49,11 +49,8 @@ export function APAgingSummarySheetLoadingBar() {
*/
export function APAgingSummaryExportMenu() {
const toastKey = useRef(null);
const commonToastConfig = {
isCloseButtonShown: true,
timeout: 2000,
};
const { query } = useAPAgingSummaryContext();
const commonToastConfig = { isCloseButtonShown: true, timeout: 2000 };
const { httpQuery } = useAPAgingSummaryContext();
const openProgressToast = (amount: number) => {
return (
@@ -70,7 +67,7 @@ export function APAgingSummaryExportMenu() {
);
};
// Export the report to xlsx.
const { mutateAsync: xlsxExport } = useAPAgingSheetXlsxExport(query, {
const { mutateAsync: xlsxExport } = useAPAgingSheetXlsxExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({
@@ -89,7 +86,7 @@ export function APAgingSummaryExportMenu() {
},
});
// Export the report to csv.
const { mutateAsync: csvExport } = useAPAgingSheetCsvExport(query, {
const { mutateAsync: csvExport } = useAPAgingSheetCsvExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({

39
packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialog.tsx Normal file
View File

@@ -0,0 +1,39 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const APAgingSummaryPdfDialogContent = lazy(
() => import('./APAgingSummaryPdfDialogContent'),
);
/**
* A/P aging summary pdf preview dialog.
* @returns {React.ReactNode}
*/
function APAgingSummaryPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'A/P Aging Summary Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<APAgingSummaryPdfDialogContent />
</DialogSuspense>
</Dialog>
);
}
export const APAgingSummaryPdfDialog = compose(withDialogRedux())(
APAgingSummaryPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { useAPAgingSummaryPdf } from '@/hooks/query';
import { AnchorButton } from '@blueprintjs/core';
import { useAPAgingSummaryContext } from '../../APAgingSummaryProvider';
export default function APAgingSummaryPdfDialogContent() {
const { httpQuery } = useAPAgingSummaryContext();
const { isLoading, pdfUrl } = useAPAgingSummaryPdf(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'AP_aging_summary.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './APAgingSummaryPdfDialog';

25
packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { useState, useCallback, useEffect } from 'react';
import { useCallback, useEffect } from 'react';
import moment from 'moment';
import ARAgingSummaryHeader from './ARAgingSummaryHeader';
@@ -13,6 +13,8 @@ import { ARAgingSummaryBody } from './ARAgingSummaryBody';
import withARAgingSummaryActions from './withARAgingSummaryActions';
import { useARAgingSummaryQuery } from './common';
import { ARAgingSummaryPdfDialog } from './dialogs/ARAgingSummaryPdfDialog';
import { DialogsName } from '@/constants/dialogs';
import { compose } from '@/utils';
/**
@@ -25,13 +27,16 @@ function ReceivableAgingSummarySheet({
const { query, setLocationQuery } = useARAgingSummaryQuery();
// Handle filter submit.
const handleFilterSubmit = useCallback((filter) => {
const _filter = {
...filter,
asDate: moment(filter.asDate).format('YYYY-MM-DD'),
};
setLocationQuery(_filter);
}, [setLocationQuery]);
const handleFilterSubmit = useCallback(
(filter) => {
const _filter = {
...filter,
asDate: moment(filter.asDate).format('YYYY-MM-DD'),
};
setLocationQuery(_filter);
},
[setLocationQuery],
);
// Handle number format submit.
const handleNumberFormatSubmit = (numberFormat) => {
@@ -60,6 +65,10 @@ function ReceivableAgingSummarySheet({
<ARAgingSummaryBody />
</FinancialStatement>
</DashboardPageContent>
<ARAgingSummaryPdfDialog
dialogName={DialogsName.ARAgingSummaryPdfPreview}
/>
</ARAgingSummaryProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx
View File

@@ -17,9 +17,11 @@ import NumberFormatDropdown from '@/components/NumberFormatDropdown';
import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
import withARAgingSummaryActions from './withARAgingSummaryActions';
import withARAgingSummary from './withARAgingSummary';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose, safeInvoke } from '@/utils';
import { ARAgingSummaryExportMenu } from './components';
import { DialogsName } from '@/constants/dialogs';
/**
* A/R Aging summary sheet - Actions bar.
@@ -31,6 +33,9 @@ function ARAgingSummaryActionsBar({
// #withReceivableAgingActions
toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
// #withDialogActions
openDialog,
// #ownProps
numberFormat,
onNumberFormatSubmit,
@@ -51,6 +56,11 @@ function ARAgingSummaryActionsBar({
safeInvoke(onNumberFormatSubmit, numberFormat);
};
// Handles the print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.ARAgingSummaryPdfPreview)
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -107,6 +117,7 @@ function ARAgingSummaryActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<ARAgingSummaryExportMenu />}
@@ -130,4 +141,5 @@ export default compose(
withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
})),
withDialogActions,
)(ARAgingSummaryActionsBar);

10
packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.tsx
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { useMemo, createContext, useContext } from 'react';
import { useMemo, createContext, useContext } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useARAgingSummaryReport } from '@/hooks/query';
import { transformFilterFormToQuery } from '../common';
@@ -11,10 +11,7 @@ const ARAgingSummaryContext = createContext();
*/
function ARAgingSummaryProvider({ filter, ...props }) {
// Transformes the filter from to the url query.
const requestQuery = useMemo(
() => transformFilterFormToQuery(filter),
[filter],
);
const httpQuery = useMemo(() => transformFilterFormToQuery(filter), [filter]);
// A/R aging summary sheet context.
const {
@@ -22,13 +19,14 @@ function ARAgingSummaryProvider({ filter, ...props }) {
isLoading: isARAgingLoading,
isFetching: isARAgingFetching,
refetch,
} = useARAgingSummaryReport(requestQuery, { keepPreviousData: true });
} = useARAgingSummaryReport(httpQuery, { keepPreviousData: true });
const provider = {
ARAgingSummary,
isARAgingLoading,
isARAgingFetching,
refetch,
httpQuery,
};
return (

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

@@ -53,7 +53,7 @@ export function ARAgingSummaryExportMenu() {
isCloseButtonShown: true,
timeout: 2000,
};
const { query } = useARAgingSummaryContext();
const { httpQuery } = useARAgingSummaryContext();
const openProgressToast = (amount: number) => {
return (
@@ -71,7 +71,7 @@ export function ARAgingSummaryExportMenu() {
};
// Export the report to xlsx.
const { mutateAsync: xlsxExport } = useARAgingSheetXlsxExport(query, {
const { mutateAsync: xlsxExport } = useARAgingSheetXlsxExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({
@@ -90,7 +90,7 @@ export function ARAgingSummaryExportMenu() {
},
});
// Export the report to csv.
const { mutateAsync: csvExport } = useARAgingSheetCsvExport(query, {
const { mutateAsync: csvExport } = useARAgingSheetCsvExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({

39
packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialog.tsx Normal file
View File

@@ -0,0 +1,39 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const ARAgingSummaryPdfDialogContent = lazy(
() => import('./ARAgingSummaryPdfDialogContent'),
);
/**
* Balance sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function ARAgingSummaryPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'A/R Aging Summary Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<ARAgingSummaryPdfDialogContent dialogName={dialogName} />
</DialogSuspense>
</Dialog>
);
}
export const ARAgingSummaryPdfDialog = compose(withDialogRedux())(
ARAgingSummaryPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { useARAgingSummaryPdf } from '@/hooks/query';
import { AnchorButton } from '@blueprintjs/core';
import { useARAgingSummaryContext } from '../../ARAgingSummaryProvider';
export default function ARAgingSummaryPdfDialogContent() {
const { httpQuery } = useARAgingSummaryContext();
const { isLoading, pdfUrl } = useARAgingSummaryPdf(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'AR_aging_summary.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './ARAgingSummaryPdfDialog';

3
packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.tsx
View File

@@ -13,6 +13,7 @@ import { useBalanceSheetQuery } from './utils';
import { compose } from '@/utils';
import withBalanceSheetActions from './withBalanceSheetActions';
import { BalanceSheetDialogs } from './BalanceSheetDialogs';
/**
* Balance sheet.
@@ -67,6 +68,8 @@ function BalanceSheet({
<BalanceSheetBody />
</FinancialStatement>
</DashboardPageContent>
<BalanceSheetDialogs />
</BalanceSheetProvider>
);
}

14
packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
View File

@@ -17,7 +17,9 @@ import { BalanceSheetExportMenu } from './components';
import { useBalanceSheetContext } from './BalanceSheetProvider';
import withBalanceSheet from './withBalanceSheet';
import withBalanceSheetActions from './withBalanceSheetActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose, saveInvoke } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
/**
* Balance sheet - actions bar.
@@ -29,6 +31,9 @@ function BalanceSheetActionsBar({
// #withBalanceSheetActions
toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
// #withDialogsActions
openDialog,
// #ownProps
numberFormat,
onNumberFormatSubmit,
@@ -50,6 +55,11 @@ function BalanceSheetActionsBar({
saveInvoke(onNumberFormatSubmit, values);
};
// Handles the pdf print button click.
const handlePdfPrintBtnSubmit = () => {
openDialog(DialogsName.BalanceSheetPdfPreview)
}
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -75,7 +85,6 @@ function BalanceSheetActionsBar({
active={balanceSheetDrawerFilter}
/>
<NavbarDivider />
<Popover
content={
<NumberFormatDropdown
@@ -108,9 +117,9 @@ function BalanceSheetActionsBar({
</Popover>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
onClick={handlePdfPrintBtnSubmit}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
/>
@@ -136,4 +145,5 @@ export default compose(
balanceSheetDrawerFilter,
})),
withBalanceSheetActions,
withDialogActions
)(BalanceSheetActionsBar);

10
packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetDialogs.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { DialogsName } from '@/constants/dialogs';
import { BalanceSheetPdfDialog } from './dialogs/BalanceSheetPdfDialog';
export const BalanceSheetDialogs = () => {
return (
<>
<BalanceSheetPdfDialog dialogName={DialogsName.BalanceSheetPdfPreview} />
</>
);
};

11
packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.tsx
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { createContext, useContext } from 'react';
import { createContext, useContext, useMemo } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useBalanceSheet } from '@/hooks/query';
@@ -9,9 +9,7 @@ const BalanceSheetContext = createContext();
function BalanceSheetProvider({ filter, ...props }) {
// Transformes the given filter to query.
const query = React.useMemo(() => transformFilterFormToQuery(filter), [
filter,
]);
const httpQuery = useMemo(() => transformFilterFormToQuery(filter), [filter]);
// Fetches the balance sheet report.
const {
@@ -19,15 +17,14 @@ function BalanceSheetProvider({ filter, ...props }) {
isFetching,
isLoading,
refetch,
} = useBalanceSheet(query, { keepPreviousData: true });
} = useBalanceSheet(httpQuery, { keepPreviousData: true });
const provider = {
balanceSheet,
isFetching,
isLoading,
refetchBalanceSheet: refetch,
query,
httpQuery,
filter,
};
return (

1
packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx
View File

@@ -9,7 +9,6 @@ import { useBalanceSheetContext } from './BalanceSheetProvider';
import { useBalanceSheetColumns } from './components';
import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
/**
* Balance sheet table.
*/

7
packages/webapp/src/containers/FinancialStatements/BalanceSheet/components.tsx
View File

@@ -96,7 +96,7 @@ export const BalanceSheetExportMenu = () => {
isCloseButtonShown: true,
timeout: 2000,
};
const { query } = useBalanceSheetContext();
const { httpQuery } = useBalanceSheetContext();
const openProgressToast = (amount: number) => {
return (
@@ -114,7 +114,7 @@ export const BalanceSheetExportMenu = () => {
};
// Export the report to xlsx.
const { mutateAsync: xlsxExport } = useBalanceSheetXlsxExport(query, {
const { mutateAsync: xlsxExport } = useBalanceSheetXlsxExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({
@@ -132,8 +132,9 @@ export const BalanceSheetExportMenu = () => {
}
},
});
// Export the report to csv.
const { mutateAsync: csvExport } = useBalanceSheetCsvExport(query, {
const { mutateAsync: csvExport } = useBalanceSheetCsvExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({

39
packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialog.tsx Normal file
View File

@@ -0,0 +1,39 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const BalanceSheetPdfDialogContent = lazy(
() => import('./BalanceSheetPdfDialogContent'),
);
/**
* Balance sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function BalanceSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Balance Sheet Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<BalanceSheetPdfDialogContent dialogName={dialogName} />
</DialogSuspense>
</Dialog>
);
}
export const BalanceSheetPdfDialog = compose(withDialogRedux())(
BalanceSheetPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { useBalanceSheetPdf } from '@/hooks/query';
import { AnchorButton } from '@blueprintjs/core';
import { useBalanceSheetContext } from '../../BalanceSheetProvider';
export default function BalanceSheetPdfDialogContent() {
const { httpQuery } = useBalanceSheetContext();
const { isLoading, pdfUrl } = useBalanceSheetPdf({ ...httpQuery });
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'invoice.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './BalanceSheetPdfDialog';

3
packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.tsx
View File

@@ -17,6 +17,7 @@ import {
import { useCashflowStatementQuery } from './utils';
import { compose } from '@/utils';
import { CashflowSheetDialogs } from './CashflowSheetDialogs';
/**
* Cash flow statement.
@@ -71,6 +72,8 @@ function CashFlowStatement({
<CashFlowStatementBody />
</FinancialStatement>
</DashboardPageContent>
<CashflowSheetDialogs />
</CashFlowStatementProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx
View File

@@ -20,6 +20,8 @@ import withCashFlowStatementActions from './withCashFlowStatementActions';
import { compose, saveInvoke } from '@/utils';
import { CashflowSheetExportMenu } from './components';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* Cash flow statement actions bar.
@@ -31,6 +33,9 @@ function CashFlowStatementActionsBar({
//#withCashStatementActions
toggleCashFlowStatementFilterDrawer,
// #withDialogActions
openDialog,
//#ownProps
numberFormat,
onNumberFormatSubmit,
@@ -51,6 +56,11 @@ function CashFlowStatementActionsBar({
const handleNumberFormatSubmit = (values) =>
saveInvoke(onNumberFormatSubmit, values);
// Handle print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.CashflowSheetPdfPreview);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -115,6 +125,7 @@ function CashFlowStatementActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<CashflowSheetExportMenu />}
@@ -138,4 +149,5 @@ export default compose(
isFilterDrawerOpen: cashFlowStatementDrawerFilter,
})),
withCashFlowStatementActions,
withDialogActions,
)(CashFlowStatementActionsBar);

12
packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementProvider.tsx
View File

@@ -10,27 +10,27 @@ const CashFLowStatementContext = React.createContext();
* Cash flow statement provider.
*/
function CashFlowStatementProvider({ filter, ...props }) {
// transforms the given filter to query.
const query = React.useMemo(
// Transforms the given state query to http query.
const httpQuery = React.useMemo(
() => transformFilterFormToQuery(filter),
[filter],
);
// fetch the cash flow statement report.
// Fetching the cash flow statement report.
const {
data: cashFlowStatement,
isFetching: isCashFlowFetching,
isLoading: isCashFlowLoading,
refetch: refetchCashFlow,
} = useCashFlowStatementReport(query, { keepPreviousData: true });
} = useCashFlowStatementReport(httpQuery, { keepPreviousData: true });
const provider = {
cashFlowStatement,
isCashFlowFetching,
isCashFlowLoading,
refetchCashFlow,
query,
query: httpQuery,
filter,
httpQuery,
};
return (

12
packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetDialogs.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { DialogsName } from '@/constants/dialogs';
import { CashflowSheetPdfDialog } from './CashflowSheetPdfDialog';
export function CashflowSheetDialogs() {
return (
<>
<CashflowSheetPdfDialog
dialogName={DialogsName.CashflowSheetPdfPreview}
/>
</>
);
}

41
packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialog.tsx Normal file
View File

@@ -0,0 +1,41 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const CashflowSheetPdfDialogContent = lazy(
() => import('./CashflowSheetPdfDialogContent'),
);
/**
* Cashflow sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function CashflowSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Cashflow Sheet Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<CashflowSheetPdfDialogContent />
</DialogSuspense>
</Dialog>
);
}
export const CashflowSheetPdfDialog = compose(withDialogRedux())(
CashflowSheetPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { AnchorButton } from '@blueprintjs/core';
import { useCashflowSheetPdf } from '@/hooks/query';
import { useCashFlowStatementContext } from '../CashFlowStatementProvider';
export default function CashflowSheetPdfDialogContent() {
const { httpQuery } = useCashFlowStatementContext();
const { isLoading, pdfUrl } = useCashflowSheetPdf(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'invoice.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './CashflowSheetPdfDialog';

38
packages/webapp/src/containers/FinancialStatements/CashFlowStatement/components.tsx
View File

@@ -95,7 +95,7 @@ export function CashflowSheetExportMenu() {
isCloseButtonShown: true,
timeout: 2000,
};
const { query } = useCashFlowStatementContext();
const { httpQuery } = useCashFlowStatementContext();
const openProgressToast = (amount: number) => {
return (
@@ -113,26 +113,30 @@ export function CashflowSheetExportMenu() {
};
// Export the report to xlsx.
const { mutateAsync: xlsxExport } = useCashFlowStatementXlsxExport(query, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({
message: openProgressToast(xlsxExportProgress),
...commonToastConfig,
});
} else {
AppToaster.show(
{
const { mutateAsync: xlsxExport } = useCashFlowStatementXlsxExport(
httpQuery,
{
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({
message: openProgressToast(xlsxExportProgress),
...commonToastConfig,
},
toastKey.current,
);
}
});
} else {
AppToaster.show(
{
message: openProgressToast(xlsxExportProgress),
...commonToastConfig,
},
toastKey.current,
);
}
},
},
});
);
// Export the report to csv.
const { mutateAsync: csvExport } = useCashFlowStatementCsvExport(query, {
const { mutateAsync: csvExport } = useCashFlowStatementCsvExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({

41
packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialog.tsx Normal file
View File

@@ -0,0 +1,41 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const CustomerBalanceSummaryPdfDialogContent = lazy(
() => import('./CustomerBalanceSummaryPdfDialogContent'),
);
/**
* Cashflow sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function CashflowSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Customer Balance Summary Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<CustomerBalanceSummaryPdfDialogContent />
</DialogSuspense>
</Dialog>
);
}
export const CustomerBalanceSummaryPdfDialog = compose(withDialogRedux())(
CashflowSheetPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { AnchorButton } from '@blueprintjs/core';
import { useCustomerBalanceSummaryPdf } from '@/hooks/query';
import { useCustomersBalanceSummaryContext } from '../CustomersBalanceSummaryProvider';
export default function CustomerBalanceSummaryPdfDialogContent() {
const { httpQuery } = useCustomersBalanceSummaryContext();
const { isLoading, pdfUrl } = useCustomerBalanceSummaryPdf(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'customer-balance-summary.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './CustomerBalanceSummaryPdfDialog';

6
packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.tsx
View File

@@ -13,6 +13,8 @@ import { CustomersBalanceSummaryProvider } from './CustomersBalanceSummaryProvid
import { useCustomerBalanceSummaryQuery } from './utils';
import { CustomersBalanceLoadingBar } from './components';
import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
import { CustomerBalanceSummaryPdfDialog } from './CustomerBalancePdfDialog';
import { DialogsName } from '@/constants/dialogs';
/**
* Customers Balance summary.
@@ -61,6 +63,10 @@ function CustomersBalanceSummary({
<CustomerBalanceSummaryBody />
</FinancialStatement>
</DashboardPageContent>
<CustomerBalanceSummaryPdfDialog
dialogName={DialogsName.CustomerBalanceSummaryPdfPreview}
/>
</CustomersBalanceSummaryProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx
View File

@@ -18,6 +18,8 @@ import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryAct
import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
import { compose, saveInvoke } from '@/utils';
import { CustomerBalanceSummaryExportMenu } from './components';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* customer balance summary action bar.
@@ -32,6 +34,9 @@ function CustomersBalanceSummaryActionsBar({
//#withCustomersBalanceSummaryActions
toggleCustomerBalanceFilterDrawer,
// #withDialogActions
openDialog
}) {
const { refetch, isCustomersBalanceLoading } =
useCustomersBalanceSummaryContext();
@@ -51,6 +56,11 @@ function CustomersBalanceSummaryActionsBar({
saveInvoke(onNumberFormatSubmit, values);
};
// Handle the print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.CustomerBalanceSummaryPdfPreview);
}
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -112,6 +122,7 @@ function CustomersBalanceSummaryActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<CustomerBalanceSummaryExportMenu />}
@@ -134,4 +145,5 @@ export default compose(
isFilterDrawerOpen: customersBalanceDrawerFilter,
})),
withCustomersBalanceSummaryActions,
withDialogActions
)(CustomersBalanceSummaryActionsBar);

4
packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.tsx
View File

@@ -29,9 +29,9 @@ function CustomersBalanceSummaryProvider({ filter, ...props }) {
CustomerBalanceSummary,
isCustomersBalanceFetching,
isCustomersBalanceLoading,
refetch,
query
query,
httpQuery: query
};
return (
<FinancialReportPage name={'customers-balance-summary'}>

3
packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.tsx
View File

@@ -14,6 +14,7 @@ import { CustomersTransactionsProvider } from './CustomersTransactionsProvider';
import { compose } from '@/utils';
import { useCustomersTransactionsQuery } from './_utils';
import { CustomersTransactionsDialogs } from './CustomersTransactionsDialogs';
/**
* Customers transactions.
@@ -65,6 +66,8 @@ function CustomersTransactions({
<CustomersTransactionsBody />
</FinancialStatement>
</DashboardPageContent>
<CustomersTransactionsDialogs />
</CustomersTransactionsProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx
View File

@@ -20,6 +20,8 @@ import withCustomersTransactions from './withCustomersTransactions';
import withCustomersTransactionsActions from './withCustomersTransactionsActions';
import { compose, saveInvoke } from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* Customers transactions actions bar.
@@ -34,6 +36,9 @@ function CustomersTransactionsActionsBar({
//#withCustomersTransactionsActions
toggleCustomersTransactionsFilterDrawer,
// #withDialogActions
openDialog
}) {
const { isCustomersTransactionsLoading, CustomersTransactionsRefetch } =
useCustomersTransactionsContext();
@@ -53,6 +58,11 @@ function CustomersTransactionsActionsBar({
saveInvoke(onNumberFormatSubmit, values);
};
// Handle print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.CustomerTransactionsPdfPreview)
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -114,6 +124,7 @@ function CustomersTransactionsActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<CustomersTransactionsExportMenu />}
@@ -137,4 +148,5 @@ export default compose(
isFilterDrawerOpen: customersTransactionsDrawerFilter,
})),
withCustomersTransactionsActions,
withDialogActions
)(CustomersTransactionsActionsBar);

12
packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsDialogs.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { DialogsName } from '@/constants/dialogs';
import { CustomerTransactionsPdfDialog } from './dialogs/CustomerTransactionsPdfDialog';
export function CustomersTransactionsDialogs() {
return (
<>
<CustomerTransactionsPdfDialog
dialogName={DialogsName.CustomerTransactionsPdfPreview}
/>
</>
);
}

9
packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.tsx
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { createContext, useContext, useMemo } from 'react';
import { createContext, useContext, useMemo } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useCustomersTransactionsReport } from '@/hooks/query';
import { transformFilterFormToQuery } from '../common';
@@ -10,9 +10,7 @@ const CustomersTransactionsContext = createContext();
* Customers transactions provider.
*/
function CustomersTransactionsProvider({ filter, ...props }) {
const query = useMemo(() => transformFilterFormToQuery(filter), [
filter,
]);
const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
// Fetches the customers transactions.
const {
@@ -29,7 +27,8 @@ function CustomersTransactionsProvider({ filter, ...props }) {
CustomersTransactionsRefetch,
filter,
query
query,
httpQuery: query,
};
return (

41
packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialog.tsx Normal file
View File

@@ -0,0 +1,41 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const CustomerTransactionsPdfDialogContent = lazy(
() => import('./CustomerTransactionsPdfDialogContent'),
);
/**
* Cashflow sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function CashflowSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Customer Tranasctions PDF Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<CustomerTransactionsPdfDialogContent />
</DialogSuspense>
</Dialog>
);
}
export const CustomerTransactionsPdfDialog = compose(withDialogRedux())(
CashflowSheetPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { AnchorButton } from '@blueprintjs/core';
import { useCustomersTransactionsPdfExport } from '@/hooks/query';
import { useCustomersTransactionsContext } from '../../CustomersTransactionsProvider';
export default function CashflowSheetPdfDialogContent() {
const { httpQuery } = useCustomersTransactionsContext();
const { isLoading, pdfUrl } = useCustomersTransactionsPdfExport(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'customer-transactions.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './CustomerTransactionsPdfDialog';

6
packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.tsx
View File

@@ -16,6 +16,8 @@ import {
import withGeneralLedgerActions from './withGeneralLedgerActions';
import { compose } from '@/utils';
import { GeneralLedgerPdfDialog } from './dialogs/GeneralLedgerPdfDialog';
import { DialogsName } from '@/constants/dialogs';
/**
* General Ledger (GL) sheet.
@@ -61,6 +63,10 @@ function GeneralLedger({
<GeneralLedgerBody />
</FinancialStatement>
</DashboardPageContent>
<GeneralLedgerPdfDialog
dialogName={DialogsName.GeneralLedgerPdfPreview}
/>
</GeneralLedgerProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx
View File

@@ -18,6 +18,8 @@ import { compose } from '@/utils';
import withGeneralLedger from './withGeneralLedger';
import withGeneralLedgerActions from './withGeneralLedgerActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* General ledger - Actions bar.
@@ -28,6 +30,9 @@ function GeneralLedgerActionsBar({
// #withGeneralLedgerActions
toggleGeneralLedgerFilterDrawer: toggleDisplayFilterDrawer,
// #withDialogActions
openDialog,
}) {
const { sheetRefresh } = useGeneralLedgerContext();
@@ -41,6 +46,11 @@ function GeneralLedgerActionsBar({
sheetRefresh();
};
// Handle the print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.GeneralLedgerPdfPreview);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -84,6 +94,7 @@ function GeneralLedgerActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<GeneralLedgerSheetExportMenu />}
@@ -107,4 +118,5 @@ export default compose(
isFilterDrawerOpen: generalLedgerFilterDrawer,
})),
withGeneralLedgerActions,
withDialogActions,
)(GeneralLedgerActionsBar);

7
packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.tsx
View File

@@ -12,24 +12,23 @@ const GeneralLedgerContext = createContext();
*/
function GeneralLedgerProvider({ query, ...props }) {
// Transformes the report query to request query.
const requestQuery = React.useMemo(
const httpQuery = React.useMemo(
() => transformFilterFormToQuery(query),
[query],
);
const {
data: generalLedger,
isFetching,
isLoading,
refetch,
} = useGeneralLedgerSheet(requestQuery, { keepPreviousData: true });
} = useGeneralLedgerSheet(httpQuery, { keepPreviousData: true });
const provider = {
generalLedger,
sheetRefresh: refetch,
isFetching,
isLoading,
httpRequest: requestQuery
httpQuery,
};
return (
<FinancialReportPage name={'general-ledger-sheet'}>

37
packages/webapp/src/containers/FinancialStatements/GeneralLedger/components.tsx
View File

@@ -79,7 +79,7 @@ export const GeneralLedgerSheetExportMenu = () => {
isCloseButtonShown: true,
timeout: 2000,
};
const { httpRequest } = useGeneralLedgerContext();
const { httpQuery } = useGeneralLedgerContext();
const openProgressToast = (amount: number) => {
return (
@@ -97,7 +97,7 @@ export const GeneralLedgerSheetExportMenu = () => {
};
// Export the report to xlsx.
const { mutateAsync: xlsxExport } = useGeneralLedgerSheetXlsxExport(
httpRequest,
httpQuery,
{
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
@@ -118,27 +118,24 @@ export const GeneralLedgerSheetExportMenu = () => {
},
);
// Export the report to csv.
const { mutateAsync: csvExport } = useGeneralLedgerSheetCsvExport(
httpRequest,
{
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({
const { mutateAsync: csvExport } = useGeneralLedgerSheetCsvExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({
message: openProgressToast(xlsxExportProgress),
...commonToastConfig,
});
} else {
AppToaster.show(
{
message: openProgressToast(xlsxExportProgress),
...commonToastConfig,
});
} else {
AppToaster.show(
{
message: openProgressToast(xlsxExportProgress),
...commonToastConfig,
},
toastKey.current,
);
}
},
},
toastKey.current,
);
}
},
);
});
// Handle csv export button click.
const handleCsvExportBtnClick = () => {
csvExport();

41
packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialog.tsx Normal file
View File

@@ -0,0 +1,41 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const GeneralLedgerPdfDialogContent = lazy(
() => import('./GeneralLedgerPdfDialogContent'),
);
/**
* General ledger pdf preview dialog.
* @returns {React.ReactNode}
*/
function GeneralLedgerPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'General Ledger PDF Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<GeneralLedgerPdfDialogContent />
</DialogSuspense>
</Dialog>
);
}
export const GeneralLedgerPdfDialog = compose(withDialogRedux())(
GeneralLedgerPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { AnchorButton } from '@blueprintjs/core';
import { useGeneralLedgerPdf } from '@/hooks/query';
import { useGeneralLedgerContext } from '../../GeneralLedgerProvider';
export default function GeneralLedgerPdfDialogContent() {
const { httpQuery } = useGeneralLedgerContext();
const { isLoading, pdfUrl } = useGeneralLedgerPdf(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'general-ledger.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './GeneralLedgerPdfDialog';

3
packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.tsx
View File

@@ -15,6 +15,7 @@ import {
} from './components';
import { InventoryItemDetailsBody } from './InventoryItemDetailsBody';
import { InventoryItemDetailsDialogs } from './InventoryItemDetailsDialogs';
import { useInventoryValuationQuery } from './utils2';
import { compose } from '@/utils';
@@ -64,6 +65,8 @@ function InventoryItemDetails({
<InventoryItemDetailsBody />
</FinancialStatement>
</DashboardPageContent>
<InventoryItemDetailsDialogs />
</InventoryItemDetailsProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.tsx
View File

@@ -20,6 +20,8 @@ import withInventoryItemDetails from './withInventoryItemDetails';
import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
import { compose, saveInvoke } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
import withDialogActions from '@/containers/Dialog/withDialogActions';
/**
* Inventory item details actions bar.
@@ -32,6 +34,9 @@ function InventoryItemDetailsActionsBar({
//#withInventoryItemDetails
isFilterDrawerOpen,
// #withDialogActions
openDialog,
//#withInventoryItemDetailsActions
toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
}) {
@@ -50,7 +55,10 @@ function InventoryItemDetailsActionsBar({
const handleNumberFormatSubmit = (values) => {
saveInvoke(onNumberFormatSubmit, values);
};
// Handle print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.InventoryItemDetailsPdfPreview);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -112,6 +120,7 @@ function InventoryItemDetailsActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<InventoryItemDetailsExportMenu />}
@@ -135,4 +144,5 @@ export default compose(
isFilterDrawerOpen: inventoryItemDetailDrawerFilter,
})),
withInventoryItemDetailsActions,
withDialogActions,
)(InventoryItemDetailsActionsBar);

12
packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsDialogs.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { DialogsName } from '@/constants/dialogs';
import { InventoryItemDetailsPdfDialog } from './dialogs/InventoryItemDetailsPdfDialog';
export function InventoryItemDetailsDialogs() {
return (
<>
<InventoryItemDetailsPdfDialog
dialogName={DialogsName.InventoryItemDetailsPdfPreview}
/>
</>
);
}

2
packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.tsx
View File

@@ -28,8 +28,8 @@ function InventoryItemDetailsProvider({ query, ...props }) {
isInventoryItemDetailsFetching,
isInventoryItemDetailsLoading,
inventoryItemDetailsRefetch,
query,
httpQuery: requestQuery
};
return (

39
packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialog.tsx Normal file
View File

@@ -0,0 +1,39 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const InventoryItemDetailsPdfDialogContent = lazy(
() => import('./InventoryItemDetailsPdfDialogContent'),
);
/**
* Inventory item details sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function InventoryItemDetailsPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Inventory Item Details Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<InventoryItemDetailsPdfDialogContent dialogName={dialogName} />
</DialogSuspense>
</Dialog>
);
}
export const InventoryItemDetailsPdfDialog = compose(withDialogRedux())(
InventoryItemDetailsPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { useInventoryItemDetailsPdf } from '@/hooks/query';
import { AnchorButton } from '@blueprintjs/core';
import { useInventoryItemDetailsContext } from '../../InventoryItemDetailsProvider';
export default function InventoryItemDetailsPdfDialogContent() {
const { httpQuery } = useInventoryItemDetailsContext();
const { isLoading, pdfUrl } = useInventoryItemDetailsPdf(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'inventory-item-details.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './InventoryItemDetailsPdfDialog';

5
packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.tsx
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { useEffect, useState, useCallback } from 'react';
import { useEffect, useCallback } from 'react';
import moment from 'moment';
import { DashboardPageContent } from '@/components';
@@ -14,6 +14,7 @@ import { compose } from '@/utils';
import withInventoryValuationActions from './withInventoryValuationActions';
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
import { InventoryValuationDialogs } from './InventoryValuationDialogs';
/**
* Inventory valuation.
@@ -65,6 +66,8 @@ function InventoryValuation({
/>
<InventoryValuationBody />
</DashboardPageContent>
<InventoryValuationDialogs />
</InventoryValuationProvider>
);
}

18
packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx
View File

@@ -16,10 +16,12 @@ import NumberFormatDropdown from '@/components/NumberFormatDropdown';
import withInventoryValuation from './withInventoryValuation';
import withInventoryValuationActions from './withInventoryValuationActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { useInventoryValuationContext } from './InventoryValuationProvider';
import { compose, saveInvoke } from '@/utils';
import { InventoryValuationExportMenu } from './components';
import { DialogsName } from '@/constants/dialogs';
function InventoryValuationActionsBar({
// #withInventoryValuation
@@ -28,27 +30,35 @@ function InventoryValuationActionsBar({
// #withInventoryValuationActions
toggleInventoryValuationFilterDrawer,
// #withDialogActions
openDialog,
// #ownProps
numberFormat,
onNumberFormatSubmit,
}) {
const { refetchSheet, isLoading } = useInventoryValuationContext();
// Handle filter toggle click.
// Handles filter toggle click.
const handleFilterToggleClick = () => {
toggleInventoryValuationFilterDrawer();
};
// Handle re-calc button click.
// Handles re-calc button click.
const handleRecalculateReport = () => {
refetchSheet();
};
// Handle number format submit.
// Handles number format submit.
const handleNumberFormatSubmit = (numberFormat) => {
saveInvoke(onNumberFormatSubmit, numberFormat);
};
// Handles the print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.InventoryValuationPdfPreview);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -109,6 +119,7 @@ function InventoryValuationActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<InventoryValuationExportMenu />}
@@ -132,4 +143,5 @@ export default compose(
isFilterDrawerOpen: inventoryValuationDrawerFilter,
})),
withInventoryValuationActions,
withDialogActions,
)(InventoryValuationActionsBar);

12
packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationDialogs.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { DialogsName } from '@/constants/dialogs';
import { InventoryValuationPdfDialog } from './dialogs/InventoryValuationPdfDialog';
export function InventoryValuationDialogs() {
return (
<>
<InventoryValuationPdfDialog
dialogName={DialogsName.InventoryValuationPdfPreview}
/>
</>
);
}

7
packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.tsx
View File

@@ -11,7 +11,7 @@ const InventoryValuationContext = React.createContext();
*/
function InventoryValuationProvider({ query, ...props }) {
// Transformes the filter form query to request query.
const requestQuery = React.useMemo(
const httpQuery = React.useMemo(
() => transformFilterFormToQuery(query),
[query],
);
@@ -21,9 +21,7 @@ function InventoryValuationProvider({ query, ...props }) {
isFetching,
isLoading,
refetch,
} = useInventoryValuationTable(requestQuery, {
keepPreviousData: true,
});
} = useInventoryValuationTable(httpQuery, { keepPreviousData: true });
// Provider data.
const provider = {
@@ -31,6 +29,7 @@ function InventoryValuationProvider({ query, ...props }) {
isLoading,
isFetching,
refetchSheet: refetch,
httpQuery
};
return (

39
packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialog.tsx Normal file
View File

@@ -0,0 +1,39 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const InventoryValuationPdfDialogContent = lazy(
() => import('./InventoryValuationSheetPdfDialogContent'),
);
/**
* Inventory valuation sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function InventoryValuationSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Inventory Valuation Sheet Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<InventoryValuationPdfDialogContent dialogName={dialogName} />
</DialogSuspense>
</Dialog>
);
}
export const InventoryValuationPdfDialog = compose(withDialogRedux())(
InventoryValuationSheetPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { useInventoryValuationPdf } from '@/hooks/query';
import { AnchorButton } from '@blueprintjs/core';
import { useInventoryValuationContext } from '../../InventoryValuationProvider';
export default function InventoryValuationPdfDialogContent() {
const { httpQuery } = useInventoryValuationContext();
const { isLoading, pdfUrl } = useInventoryValuationPdf(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'inventory-valuation-summary.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './InventoryValuationSheetPdfDialog';

5
packages/webapp/src/containers/FinancialStatements/Journal/Journal.tsx
View File

@@ -15,6 +15,7 @@ import withJournalActions from './withJournalActions';
import { useJournalQuery } from './utils';
import { compose } from '@/utils';
import { JournalDialogs } from './JournalDialogs';
/**
* Journal sheet.
@@ -23,7 +24,7 @@ function Journal({
// #withJournalActions
toggleJournalSheetFilter,
}) {
const {query, setLocationQuery} = useJournalQuery();
const { query, setLocationQuery } = useJournalQuery();
// Handle financial statement filter change.
const handleFilterSubmit = useCallback(
@@ -60,6 +61,8 @@ function Journal({
<JournalBody />
</FinancialStatement>
</DashboardPageContent>
<JournalDialogs />
</JournalSheetProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/Journal/JournalActionsBar.tsx
View File

@@ -19,6 +19,8 @@ import withJournal from './withJournal';
import { compose } from '@/utils';
import { useJournalSheetContext } from './JournalProvider';
import { JournalSheetExportMenu } from './components';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* Journal sheeet - Actions bar.
@@ -29,6 +31,9 @@ function JournalActionsBar({
// #withJournalActions
toggleJournalSheetFilter,
// #withDialogActions
openDialog,
}) {
const { refetchSheet } = useJournalSheetContext();
@@ -42,6 +47,11 @@ function JournalActionsBar({
refetchSheet();
};
// Handle the print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.JournalPdfPreview);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -85,6 +95,7 @@ function JournalActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<JournalSheetExportMenu />}
@@ -108,4 +119,5 @@ export default compose(
isFilterDrawerOpen: journalSheetDrawerFilter,
})),
withJournalActions,
withDialogActions,
)(JournalActionsBar);

10
packages/webapp/src/containers/FinancialStatements/Journal/JournalDialogs.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { DialogsName } from '@/constants/dialogs';
import { JournalPdfDialog } from './dialogs/JournalPdfDialog';
export function JournalDialogs() {
return (
<>
<JournalPdfDialog dialogName={DialogsName.JournalPdfPreview} />
</>
);
}

7
packages/webapp/src/containers/FinancialStatements/Journal/JournalProvider.tsx
View File

@@ -11,24 +11,23 @@ const JournalSheetContext = createContext();
*/
function JournalSheetProvider({ query, ...props }) {
// Transforms the sheet query to request query.
const requestQuery = React.useMemo(
const httpQuery = React.useMemo(
() => transformFilterFormToQuery(query),
[query],
);
const {
data: journalSheet,
isFetching,
isLoading,
refetch,
} = useJournalSheet(requestQuery, { keepPreviousData: true });
} = useJournalSheet(httpQuery, { keepPreviousData: true });
const provider = {
journalSheet,
isLoading,
isFetching,
refetchSheet: refetch,
httpQuery: requestQuery
httpQuery,
};
return (

39
packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialog.tsx Normal file
View File

@@ -0,0 +1,39 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const JournalPdfDialogContent = lazy(
() => import('./JournalPdfDialogContent'),
);
/**
* Journal sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function JournalPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Journal Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<JournalPdfDialogContent dialogName={dialogName} />
</DialogSuspense>
</Dialog>
);
}
export const JournalPdfDialog = compose(withDialogRedux())(
JournalPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { useJournalSheetPdf } from '@/hooks/query';
import { AnchorButton } from '@blueprintjs/core';
import { useJournalSheetContext } from '../../JournalProvider';
export default function JournalSheetPdfDialogContent() {
const { httpQuery } = useJournalSheetContext();
const { isLoading, pdfUrl } = useJournalSheetPdf(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'journal.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './JournalPdfDialog';

11
packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.tsx
View File

@@ -20,6 +20,8 @@ import withProfitLoss from './withProfitLoss';
import { compose, saveInvoke } from '@/utils';
import { useProfitLossSheetContext } from './ProfitLossProvider';
import { ProfitLossSheetExportMenu } from './components';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* Profit/Loss sheet actions bar.
@@ -31,6 +33,9 @@ function ProfitLossActionsBar({
// #withProfitLossActions
toggleProfitLossFilterDrawer: toggleFilterDrawer,
// #withDialogActions
openDialog,
// #ownProps
numberFormat,
onNumberFormatSubmit,
@@ -48,6 +53,10 @@ function ProfitLossActionsBar({
const handleNumberFormatSubmit = (values) => {
saveInvoke(onNumberFormatSubmit, values);
};
// Handles the print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.ProfitLossSheetPdfPreview);
};
return (
<DashboardActionsBar>
@@ -110,6 +119,7 @@ function ProfitLossActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<ProfitLossSheetExportMenu />}
@@ -131,4 +141,5 @@ function ProfitLossActionsBar({
export default compose(
withProfitLoss(({ profitLossDrawerFilter }) => ({ profitLossDrawerFilter })),
withProfitLossActions,
withDialogActions,
)(ProfitLossActionsBar);

17
packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.tsx
View File

@@ -1,7 +1,7 @@
// @ts-nocheck
import React, { createContext, useContext, useMemo } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { createContext, useContext, useMemo } from 'react';
import { useProfitLossSheet } from '@/hooks/query';
import FinancialReportPage from '../FinancialReportPage';
import { transformFilterFormToQuery } from '../common';
const ProfitLossSheetContext = createContext();
@@ -11,27 +11,22 @@ const ProfitLossSheetContext = createContext();
* @returns {React.JSX}
*/
function ProfitLossSheetProvider({ query, ...props }) {
const innerQuery = useMemo(() => {
return transformFilterFormToQuery(query);
}, [query]);
const httpQuery = useMemo(() => transformFilterFormToQuery(query), [query]);
const {
data: profitLossSheet,
isFetching,
isLoading,
refetch,
} = useProfitLossSheet(
innerQuery,
{ keepPreviousData: true },
);
} = useProfitLossSheet(httpQuery, { keepPreviousData: true });
const provider = {
profitLossSheet,
isLoading,
isFetching,
sheetRefetch: refetch,
query: innerQuery
query: httpQuery,
httpQuery,
};
return (

3
packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.tsx
View File

@@ -15,6 +15,7 @@ import { useProfitLossSheetQuery } from './utils';
import { ProfitLossSheetProvider } from './ProfitLossProvider';
import { ProfitLossSheetAlerts, ProfitLossSheetLoadingBar } from './components';
import { ProfitLossBody } from './ProfitLossBody';
import { ProfitLossSheetDialogs } from './ProfitLossSheetDialogs';
/**
* Profit/Loss financial statement sheet.
@@ -67,6 +68,8 @@ function ProfitLossSheet({
/>
<ProfitLossBody />
</DashboardPageContent>
<ProfitLossSheetDialogs />
</ProfitLossSheetProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetDialogs.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { DialogsName } from '@/constants/dialogs';
import { ProfitLossSheetPdfDialog } from './ProfitLossSheetPdfDialog';
export function ProfitLossSheetDialogs() {
return (
<>
<ProfitLossSheetPdfDialog
dialogName={DialogsName.ProfitLossSheetPdfPreview}
/>
</>
);
}

44
packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialog.tsx Normal file
View File

@@ -0,0 +1,44 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const ProfitLossSheetPdfDialogContent = lazy(
() => import('./ProfitLossSheetPdfDialogContent'),
);
/**
* Cashflow sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function ProfitLossSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Profit/LossSheet Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<ProfitLossSheetPdfDialogContent
dialogName={dialogName}
subscriptionForm={payload}
/>
</DialogSuspense>
</Dialog>
);
}
export const ProfitLossSheetPdfDialog = compose(withDialogRedux())(
ProfitLossSheetPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { AnchorButton } from '@blueprintjs/core';
import { useProfitLossSheetPdf } from '@/hooks/query';
import { useProfitLossSheetContext } from '../ProfitLossProvider';
export default function ProfitLossSheetPdfDialogContent() {
const { httpQuery } = useProfitLossSheetContext();
const { isLoading, pdfUrl } = useProfitLossSheetPdf(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'profit_loss_sheet.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './ProfitLossSheetPdfDialog';

8
packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/components.tsx
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { useRef } from 'react';
import { useRef } from 'react';
import {
Button,
Classes,
@@ -78,7 +78,7 @@ export const ProfitLossSheetExportMenu = () => {
isCloseButtonShown: true,
timeout: 2000,
};
const { query } = useProfitLossSheetContext();
const { httpQuery } = useProfitLossSheetContext();
const openProgressToast = (amount: number) => {
return (
@@ -96,7 +96,7 @@ export const ProfitLossSheetExportMenu = () => {
};
// Export the report to xlsx.
const { mutateAsync: xlsxExport } = useProfitLossSheetXlsxExport(query, {
const { mutateAsync: xlsxExport } = useProfitLossSheetXlsxExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({
@@ -115,7 +115,7 @@ export const ProfitLossSheetExportMenu = () => {
},
});
// Export the report to csv.
const { mutateAsync: csvExport } = useProfitLossSheetCsvExport(query, {
const { mutateAsync: csvExport } = useProfitLossSheetCsvExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({

3
packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.tsx
View File

@@ -13,6 +13,7 @@ import { usePurchasesByItemsQuery } from './utils';
import { compose } from '@/utils';
import withPurchasesByItemsActions from './withPurchasesByItemsActions';
import { PurchasesByItemsDialogs } from './PurchasesByItemsDialogs';
/**
* Purchases by items.
@@ -67,6 +68,8 @@ function PurchasesByItems({
<PurchasesByItemsBody />
</FinancialStatement>
</DashboardPageContent>
<PurchasesByItemsDialogs />
</PurchasesByItemsProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.tsx
View File

@@ -16,9 +16,11 @@ import NumberFormatDropdown from '@/components/NumberFormatDropdown';
import withPurchasesByItems from './withPurchasesByItems';
import withPurchasesByItemsActions from './withPurchasesByItemsActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose, saveInvoke } from '@/utils';
import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
import { PurchasesByItemsExportMenu } from './components';
import { DialogsName } from '@/constants/dialogs';
function PurchasesByItemsActionsBar({
// #withPurchasesByItems
@@ -27,6 +29,9 @@ function PurchasesByItemsActionsBar({
// #withPurchasesByItemsActions
togglePurchasesByItemsFilterDrawer,
// #withDialogActions
openDialog,
// #ownProps
numberFormat,
onNumberFormatSubmit,
@@ -48,6 +53,11 @@ function PurchasesByItemsActionsBar({
saveInvoke(onNumberFormatSubmit, values);
};
// Handle print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.PurchasesByItemsPdfPreview);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -106,6 +116,7 @@ function PurchasesByItemsActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<PurchasesByItemsExportMenu />}
@@ -129,4 +140,5 @@ export default compose(
purchasesByItemsDrawerFilter,
})),
withPurchasesByItemsActions,
withDialogActions,
)(PurchasesByItemsActionsBar);

12
packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsDialogs.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { DialogsName } from '@/constants/dialogs';
import { PurchasesByItemsPdfDialog } from './dialogs/PurchasesByItemsDialog';
export function PurchasesByItemsDialogs() {
return (
<>
<PurchasesByItemsPdfDialog
dialogName={DialogsName.PurchasesByItemsPdfPreview}
/>
</>
);
}

15
packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.tsx
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { createContext, useContext } from 'react';
import React, { createContext, useContext, useMemo } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { usePurchasesByItemsTable } from '@/hooks/query';
import { transformFilterFormToQuery } from '../common';
@@ -7,26 +7,23 @@ import { transformFilterFormToQuery } from '../common';
const PurchasesByItemsContext = createContext();
function PurchasesByItemsProvider({ query, ...props }) {
// Transformes the report query to http query.
const httpQuery = useMemo(() => transformFilterFormToQuery(query), [query]);
// Handle fetching the purchases by items report based on the given query.
const {
data: purchaseByItems,
isFetching,
isLoading,
refetch,
} = usePurchasesByItemsTable(
{
...transformFilterFormToQuery(query),
},
{
keepPreviousData: true,
},
);
} = usePurchasesByItemsTable(httpQuery, { keepPreviousData: true });
const provider = {
purchaseByItems,
isFetching,
isLoading,
refetchSheet: refetch,
httpQuery,
};
return (
<FinancialReportPage name={'purchase-by-items'}>

12
packages/webapp/src/containers/FinancialStatements/PurchasesByItems/components.tsx
View File

@@ -37,11 +37,8 @@ export function PurchasesByItemsLoadingBar() {
*/
export const PurchasesByItemsExportMenu = () => {
const toastKey = useRef(null);
const commonToastConfig = {
isCloseButtonShown: true,
timeout: 2000,
};
const { query } = usePurchaseByItemsContext();
const commonToastConfig = { isCloseButtonShown: true, timeout: 2000 };
const { httpQuery } = usePurchaseByItemsContext();
const openProgressToast = (amount: number) => {
return (
@@ -57,9 +54,8 @@ export const PurchasesByItemsExportMenu = () => {
</Stack>
);
};
// Export the report to xlsx.
const { mutateAsync: xlsxExport } = usePurchasesByItemsXlsxExport(query, {
const { mutateAsync: xlsxExport } = usePurchasesByItemsXlsxExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({
@@ -78,7 +74,7 @@ export const PurchasesByItemsExportMenu = () => {
},
});
// Export the report to csv.
const { mutateAsync: csvExport } = usePurchasesByItemsCsvExport(query, {
const { mutateAsync: csvExport } = usePurchasesByItemsCsvExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({

39
packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialog.tsx Normal file
View File

@@ -0,0 +1,39 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const PurchasesByItemsPdfDialogContent = lazy(
() => import('./PurchasesByItemsPdfDialogContent'),
);
/**
* Purchases by items sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function PurchasesByItemsPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Purchases By Items Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<PurchasesByItemsPdfDialogContent />
</DialogSuspense>
</Dialog>
);
}
export const PurchasesByItemsPdfDialog = compose(withDialogRedux())(
PurchasesByItemsPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import { AnchorButton } from '@blueprintjs/core';
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { usePurchasesByItemsPdfExport } from '@/hooks/query';
import { usePurchaseByItemsContext } from '../../PurchasesByItemsProvider';
export default function PurchasesByItemsPdfDialogContent() {
const { httpQuery } = usePurchaseByItemsContext();
const { isLoading, pdfUrl } = usePurchasesByItemsPdfExport(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'invoice.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './PurchasesByItemsPdfDialog';

15
packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.tsx
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import { createContext, useContext } from 'react';
import { createContext, useContext, useMemo } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useSalesByItemsTable } from '@/hooks/query';
import { transformFilterFormToQuery } from '../common';
@@ -7,25 +7,22 @@ import { transformFilterFormToQuery } from '../common';
const SalesByItemsContext = createContext();
function SalesByItemProvider({ query, ...props }) {
// Transformes the sheet query to http query.
const httpQuery = useMemo(() => transformFilterFormToQuery(query), [query]);
const {
data: salesByItems,
isFetching,
isLoading,
refetch,
} = useSalesByItemsTable(
{
...transformFilterFormToQuery(query),
},
{
keepPreviousData: true,
},
);
} = useSalesByItemsTable({ ...httpQuery }, { keepPreviousData: true });
const provider = {
salesByItems,
isFetching,
isLoading,
refetchSheet: refetch,
httpQuery,
};
return (
<FinancialReportPage name={'sales-by-items'}>

3
packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItems.tsx
View File

@@ -13,6 +13,7 @@ import withSalesByItemsActions from './withSalesByItemsActions';
import { useSalesByItemsQuery } from './utils';
import { compose } from '@/utils';
import { SalesByItemsDialogs } from './SalesByitemsDialogs';
/**
* Sales by items.
@@ -66,6 +67,8 @@ function SalesByItems({
<SalesByItemsBody />
</FinancialStatement>
</DashboardPageContent>
<SalesByItemsDialogs />
</SalesByItemProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx
View File

@@ -20,6 +20,8 @@ import withSalesByItemsActions from './withSalesByItemsActions';
import { compose, saveInvoke } from '@/utils';
import { useSalesByItemsContext } from './SalesByItemProvider';
import { SalesByItemsSheetExportMenu } from './components';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
function SalesByItemsActionsBar({
// #withSalesByItems
@@ -28,6 +30,9 @@ function SalesByItemsActionsBar({
// #withSalesByItemsActions
toggleSalesByItemsFilterDrawer,
// #withDialogActions
openDialog,
// #ownProps
numberFormat,
onNumberFormatSubmit,
@@ -48,6 +53,11 @@ function SalesByItemsActionsBar({
saveInvoke(onNumberFormatSubmit, values);
};
// Handle the print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.SalesByItemsPdfPreview);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -108,6 +118,7 @@ function SalesByItemsActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<SalesByItemsSheetExportMenu />}
@@ -131,4 +142,5 @@ export default compose(
salesByItemsDrawerFilter,
})),
withSalesByItemsActions,
withDialogActions,
)(SalesByItemsActionsBar);

10
packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByitemsDialogs.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { DialogsName } from '@/constants/dialogs';
import { SalesByItemsPdfDialog } from './dialogs/SalesByItemsPdfDialog';
export function SalesByItemsDialogs() {
return (
<>
<SalesByItemsPdfDialog dialogName={DialogsName.SalesByItemsPdfPreview} />
</>
);
}

18
packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx
View File

@@ -1,13 +1,9 @@
// @ts-nocheck
import { useMemo, useRef } from 'react';
import intl from 'react-intl-universal';
import { useRef } from 'react';
import classNames from 'classnames';
import { Classes } from '@blueprintjs/core';
import { getColumnWidth } from '@/utils';
import { AppToaster, If, Stack } from '@/components';
import { Align } from '@/constants';
import { CellTextSpan } from '@/components/Datatable/Cells';
import { useSalesByItemsContext } from './SalesByItemProvider';
import FinancialLoadingBar from '../FinancialLoadingBar';
import { Intent, Menu, MenuItem, ProgressBar, Text } from '@blueprintjs/core';
@@ -34,11 +30,8 @@ export function SalesByItemsLoadingBar() {
*/
export const SalesByItemsSheetExportMenu = () => {
const toastKey = useRef(null);
const commonToastConfig = {
isCloseButtonShown: true,
timeout: 2000,
};
const { query } = useSalesByItemsContext();
const commonToastConfig = { isCloseButtonShown: true, timeout: 2000, };
const { httpQuery } = useSalesByItemsContext();
const openProgressToast = (amount: number) => {
return (
@@ -54,9 +47,8 @@ export const SalesByItemsSheetExportMenu = () => {
</Stack>
);
};
// Export the report to xlsx.
const { mutateAsync: xlsxExport } = useSalesByItemsXlsxExport(query, {
const { mutateAsync: xlsxExport } = useSalesByItemsXlsxExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({
@@ -75,7 +67,7 @@ export const SalesByItemsSheetExportMenu = () => {
},
});
// Export the report to csv.
const { mutateAsync: csvExport } = useSalesByItemsCsvExport(query, {
const { mutateAsync: csvExport } = useSalesByItemsCsvExport(httpQuery, {
onDownloadProgress: (xlsxExportProgress: number) => {
if (!toastKey.current) {
toastKey.current = AppToaster.show({

39
packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialog.tsx Normal file
View File

@@ -0,0 +1,39 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const SalesByItemsPdfDialogContent = lazy(
() => import('./SalesByItemsPdfDialogContent'),
);
/**
* Sales by items sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function SalesByItemsPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Sales By Items Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<SalesByItemsPdfDialogContent dialogName={dialogName} />
</DialogSuspense>
</Dialog>
);
}
export const SalesByItemsPdfDialog = compose(withDialogRedux())(
SalesByItemsPdfDialogRoot,
);

45
packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,45 @@
// @ts-nocheck
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { useSalesByItemsPdfExport } from '@/hooks/query';
import { AnchorButton } from '@blueprintjs/core';
import { useSalesByItemsContext } from '../../SalesByItemProvider';
export default function SalesByItemsPdfDialogContent() {
const { httpQuery } = useSalesByItemsContext();
const { isLoading, pdfUrl } = useSalesByItemsPdfExport(httpQuery);
return (
<DialogContent>
<div className="dialog__header-actions">
<AnchorButton
href={pdfUrl}
target={'__blank'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.preview.button'} />
</AnchorButton>
<AnchorButton
href={pdfUrl}
download={'sales_by_items.pdf'}
minimal={true}
outlined={true}
>
<T id={'pdf_preview.download.button'} />
</AnchorButton>
</div>
<PdfDocumentPreview
height={760}
width={1000}
isLoading={isLoading}
url={pdfUrl}
/>
</DialogContent>
);
}

1
packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './SalesByItemsPdfDialog';

41
packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialog.tsx Normal file
View File

@@ -0,0 +1,41 @@
// @ts-nocheck
import React, { lazy } from 'react';
import classNames from 'classnames';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { CLASSES } from '@/constants/classes';
import { compose } from '@/utils';
// Lazy loading the content.
const SalesTaxLiabilityPdfDialogContent = lazy(
() => import('./SalesTaxLiabilityPdfDialogContent'),
);
/**
* Cashflow sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function SalesTaxLiabilityPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Sales Tax Liability Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<SalesTaxLiabilityPdfDialogContent />
</DialogSuspense>
</Dialog>
);
}
export const SalesTaxLiabiltiyPdfDialog = compose(withDialogRedux())(
SalesTaxLiabilityPdfDialogRoot,
);

Some files were not shown because too many files have changed in this diff Show More