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

feat(webapp): wip print preview financial reports

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-02-11 16:12:41 +02:00
parent b11c531cf5
commit 09ad725a67
27 changed files with 487 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>
);
}

11
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,10 @@ function BalanceSheetActionsBar({
saveInvoke(onNumberFormatSubmit, values);
};
const handlePdfPrintBtnSubmit = () => {
openDialog(DialogsName.BalanceSheetPdfPreview)
}
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -111,6 +120,7 @@ function BalanceSheetActionsBar({
<Button
className={Classes.MINIMAL}
onClick={handlePdfPrintBtnSubmit}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
/>
@@ -136,4 +146,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} />
</>
);
};

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,
);

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

@@ -0,0 +1,42 @@
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { useBalanceSheetPdf } from '@/hooks/query';
import { AnchorButton } from '@blueprintjs/core';
export default function BalanceSheetPdfDialogContent() {
const { isLoading, pdfUrl } = useBalanceSheetPdf();
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/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}
/>
</>
);
}

44
packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialog.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 CashflowSheetPdfDialogContent = lazy(
() => import('./CashflowSheetPdfDialogContent'),
);
/**
* Cashflow sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function CashflowSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Trial Balance Sheet Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<CashflowSheetPdfDialogContent
dialogName={dialogName}
subscriptionForm={payload}
/>
</DialogSuspense>
</Dialog>
);
}
export const CashflowSheetPdfDialog = compose(withDialogRedux())(
CashflowSheetPdfDialogRoot,
);

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

@@ -0,0 +1,42 @@
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { AnchorButton } from '@blueprintjs/core';
import { useCashflowSheetPdf } from '@/hooks/query';
export default function CashflowSheetPdfDialogContent() {
const { isLoading, pdfUrl } = useCashflowSheetPdf();
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';

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);

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>
);
}

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

@@ -0,0 +1,10 @@
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,
);

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

@@ -0,0 +1,42 @@
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { AnchorButton } from '@blueprintjs/core';
import { useProfitLossSheetPdf } from '@/hooks/query';
export default function ProfitLossSheetPdfDialogContent() {
const { isLoading, pdfUrl } = useProfitLossSheetPdf();
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/ProfitLossSheet/ProfitLossSheetPdfDialog/index.ts Normal file
View File

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

12
packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.tsx
View File

@@ -16,9 +16,11 @@ import NumberFormatDropdown from '@/components/NumberFormatDropdown';
import withTrialBalance from './withTrialBalance';
import withTrialBalanceActions from './withTrialBalanceActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose, saveInvoke } from '@/utils';
import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
import { TrialBalanceSheetExportMenu } from './components';
import { DialogsName } from '@/constants/dialogs';
function TrialBalanceActionsBar({
// #withTrialBalance
@@ -27,6 +29,9 @@ function TrialBalanceActionsBar({
// #withTrialBalanceActions
toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
// #withDialogActions
openDialog,
// #ownProps
numberFormat,
onNumberFormatSubmit,
@@ -48,6 +53,11 @@ function TrialBalanceActionsBar({
saveInvoke(onNumberFormatSubmit, values);
};
// Handle print button click.
const handlePrintBtnClick = () => {
openDialog(DialogsName.TrialBalanceSheetPdfPreview);
}
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -109,6 +119,7 @@ function TrialBalanceActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
onClick={handlePrintBtnClick}
/>
<Popover
content={<TrialBalanceSheetExportMenu />}
@@ -132,4 +143,5 @@ export default compose(
trialBalanceDrawerFilter,
})),
withTrialBalanceActions,
withDialogActions,
)(TrialBalanceActionsBar);

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

@@ -16,6 +16,7 @@ import {
import withTrialBalanceActions from './withTrialBalanceActions';
import { compose } from '@/utils';
import { TrialBalanceSheetDialogs } from './TrialBalanceSheetDialogs';
/**
* Trial balance sheet.
@@ -71,6 +72,8 @@ function TrialBalanceSheet({
<TrialBalanceSheetBody />
</FinancialStatement>
</DashboardPageContent>
<TrialBalanceSheetDialogs />
</TrialBalanceSheetProvider>
);
}

12
packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetDialogs.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { DialogsName } from '@/constants/dialogs';
import { TrialBalanceSheetPdfDialog } from './dialogs/TrialBalanceSheetPdfDialog';
export const TrialBalanceSheetDialogs = () => {
return (
<>
<TrialBalanceSheetPdfDialog
dialogName={DialogsName.TrialBalanceSheetPdfPreview}
/>
</>
);
};

44
packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialog.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 TrialBalanceSheetPdfDialogContent = lazy(
() => import('./TrialBalanceSheetPdfDialogContent'),
);
/**
* Trial balance sheet pdf preview dialog.
* @returns {React.ReactNode}
*/
function TrialBalanceSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Trial Balance Sheet Print Preview'}
className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
style={{ width: '1000px' }}
>
<DialogSuspense>
<TrialBalanceSheetPdfDialogContent
dialogName={dialogName}
subscriptionForm={payload}
/>
</DialogSuspense>
</Dialog>
);
}
export const TrialBalanceSheetPdfDialog = compose(withDialogRedux())(
TrialBalanceSheetPdfDialogRoot,
);

42
packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx Normal file
View File

@@ -0,0 +1,42 @@
import {
DialogContent,
PdfDocumentPreview,
FormattedMessage as T,
} from '@/components';
import { AnchorButton } from '@blueprintjs/core';
import { useTrialBalanceSheetPdf } from '@/hooks/query';
export default function TrialBalanceSheetPdfDialogContent() {
const { isLoading, pdfUrl } = useTrialBalanceSheetPdf();
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/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/index.ts Normal file
View File

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