From dd941f1f452eaf0f5d4bfbb46a696e8fd0ab98f8 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sun, 7 Sep 2025 23:47:07 +0200 Subject: [PATCH] wip --- .../src/components/PageForm/PageForm.tsx | 25 ++ .../MakeJournal/MakeJournalEntriesForm.tsx | 36 ++- .../MakeJournal/MakeJournalEntriesHeader.tsx | 13 +- .../MakeJournalEntriesHeaderFields.tsx | 148 ++++++------ .../MakeJournalFormFloatingActions.tsx | 5 +- .../RecognizedTransactionsTable.module.scss | 9 +- .../ExpenseForm/ExpenseFloatingActions.tsx | 213 +++++++++--------- .../Expenses/ExpenseForm/ExpenseForm.tsx | 57 +++-- .../Expenses/ExpenseForm/ExpenseFormBody.tsx | 8 +- .../ExpenseForm/ExpenseFormFooter.tsx | 8 +- .../ExpenseForm/ExpenseFormHeader.tsx | 8 +- .../ExpenseForm/ExpenseFormHeaderFields.tsx | 29 ++- .../Expenses/ExpenseForm/ExpenseFormPage.tsx | 3 - .../ExpenseForm/ExpenseFormPageProvider.tsx | 5 + .../Bills/BillForm/BillFloatingActions.tsx | 5 +- .../Purchases/Bills/BillForm/BillForm.tsx | 55 +++-- .../Bills/BillForm/BillFormFooter.tsx | 9 +- .../Bills/BillForm/BillFormHeader.tsx | 8 +- .../Bills/BillForm/BillFormHeaderFields.tsx | 28 ++- .../VendorCreditNoteFloatingActions.tsx | 12 +- .../CreditNoteForm/VendorCreditNoteForm.tsx | 58 +++-- .../VendorCreditNoteFormFooter.tsx | 5 +- .../VendorCreditNoteFormHeader.tsx | 7 +- .../VendorCreditNoteFormHeaderFields.tsx | 29 ++- .../VendorCreditNoteFormPage.tsx | 2 - .../PaymentMadeFloatingActions.tsx | 5 +- .../PaymentForm/PaymentMadeFooter.tsx | 5 +- .../PaymentForm/PaymentMadeForm.tsx | 63 ++++-- .../PaymentForm/PaymentMadeFormHeader.tsx | 33 ++- .../PaymentMadeFormHeaderFields.tsx | 28 ++- 30 files changed, 539 insertions(+), 380 deletions(-) diff --git a/packages/webapp/src/components/PageForm/PageForm.tsx b/packages/webapp/src/components/PageForm/PageForm.tsx index 6ea38ffee..8f446233b 100644 --- a/packages/webapp/src/components/PageForm/PageForm.tsx +++ b/packages/webapp/src/components/PageForm/PageForm.tsx @@ -37,6 +37,30 @@ const PageFormBody: FC<{ children: React.ReactNode } & SystemProps> = ({ }; PageFormBody.displayName = 'PageFormBody'; +const PageFormHeader: FC = ({ className, ...props }) => { + return ( + + ); +}; + +const pageFormHeaderStyle = ` + --color-invoice-form-header-background: #fff; + --color-invoice-form-header-border: #d2dce2; + + .bp4-dark & { + --color-invoice-form-header-background: var(--color-dark-gray1); + --color-invoice-form-header-border: rgba(255, 255, 255, 0.1); + } + border-bottom: 1px solid var(--color-invoice-form-header-border); + background-color: var(--color-invoice-form-header-background); +`; + /** * Page form footer. * @returns {React.ReactNode} @@ -98,3 +122,4 @@ PageFormFooterActions.displayName = 'PageFormFooterActions'; PageForm.Body = PageFormBody; PageForm.Footer = PageFormFooter; PageForm.FooterActions = PageFormFooterActions; +PageForm.Header = PageFormHeader; diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx index 02a347b13..5368edca4 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx @@ -6,6 +6,7 @@ import intl from 'react-intl-universal'; import * as R from 'ramda'; import { sumBy, round, isEmpty, omit } from 'lodash'; import classNames from 'classnames'; +import { css } from '@emotion/css'; import { useHistory } from 'react-router-dom'; import { CLASSES } from '@/constants/classes'; @@ -25,6 +26,7 @@ import withSettings from '@/containers/Settings/withSettings'; import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization'; import { AppToaster } from '@/components'; +import { PageForm } from '@/components/PageForm'; import { compose, orderingLinesIndexes, transactionNumber } from '@/utils'; import { transformErrors, @@ -175,18 +177,32 @@ function MakeJournalEntriesForm({ validationSchema={isNewMode ? CreateJournalSchema : EditJournalSchema} onSubmit={handleSubmit} > -
- - - - - + + + + + + + + - {/* --------- Dialogs --------- */} - + + + - {/* --------- Effects --------- */} - + {/* --------- Dialogs --------- */} + + + {/* --------- Effects --------- */} + + diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx index 174c66854..2249f0496 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx @@ -1,17 +1,20 @@ // @ts-nocheck import React from 'react'; -import classNames from 'classnames'; -import { CLASSES } from '@/constants/classes'; -import { PageFormBigNumber, FormattedMessage as T } from '@/components'; +import { + Group, + PageForm, + PageFormBigNumber, + FormattedMessage as T, +} from '@/components'; import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields'; import { useManualJournalTotalFormatted } from './utils'; export default function MakeJournalEntriesHeader() { return ( -
+ -
+ ); } diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx index 0ec19b932..6f3ee5cd7 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx @@ -1,17 +1,13 @@ // @ts-nocheck import React from 'react'; -import { InputGroup, FormGroup, Position } from '@blueprintjs/core'; -import { FastField, ErrorMessage, useFormikContext } from 'formik'; -import { DateInput } from '@blueprintjs/datetime'; +import { Position } from '@blueprintjs/core'; +import { useFormikContext } from 'formik'; import classNames from 'classnames'; +import { useTheme } from '@emotion/react'; +import { css } from '@emotion/css'; import { CLASSES } from '@/constants/classes'; -import { - momentFormatter, - inputIntent, - handleDateChange, - tansformDateValue, -} from '@/utils'; +import {} from '@/utils'; import { Hint, FieldRequiredHint, @@ -19,91 +15,95 @@ import { FSelect, FormattedMessage as T, FFormGroup, + FInputGroup, + FDateInput, + Stack, } from '@/components'; import { useMakeJournalFormContext } from './MakeJournalProvider'; import { JournalExchangeRateInputField } from './components'; import { MakeJournalTransactionNoField } from './MakeJournalTransactionNoField'; +const getFieldsStyle = (theme: Theme) => css` + .${theme.bpPrefix}-form-group { + margin-bottom: 0; + + &.${theme.bpPrefix}-inline { + max-width: 450px; + } + .${theme.bpPrefix}-label { + min-width: 150px; + font-weight: 500; + } + .${theme.bpPrefix}-form-content { + width: 100%; + } + } +`; + /** * Make journal entries header. */ export default function MakeJournalEntriesHeader({}) { const { currencies } = useMakeJournalFormContext(); const form = useFormikContext(); + const theme = useTheme(); + const fieldsClassName = getFieldsStyle(theme); return ( -
+ {/*------------ Posting date -----------*/} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - minimal={true} - inline={true} - className={classNames(CLASSES.FILL)} - > - { - form.setFieldValue('date', formattedDate); - })} - value={tansformDateValue(value)} - popoverProps={{ - position: Position.BOTTOM, - minimal: true, - }} - inputProps={{ - leftIcon: , - }} - /> - - )} - + } + labelInfo={} + inline + fastField + > + date.toLocaleDateString()} + parseDate={(str) => new Date(str)} + popoverProps={{ + position: Position.BOTTOM_LEFT, + minimal: true, + fill: true, + }} + inputProps={{ + leftIcon: , + }} + fill + fastField + /> + {/*------------ Journal number -----------*/} {/*------------ Reference -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - labelInfo={ - } - position={Position.RIGHT} - /> - } - className={'form-group--reference'} - intent={inputIntent({ error, touched })} - helperText={} - fill={true} - inline={true} - > - - - )} - + } + labelInfo={ + } + position={Position.RIGHT} + /> + } + inline + fastField + > + + {/*------------ Journal type -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - className={classNames('form-group--account-type', CLASSES.FILL)} - inline={true} - > - - - )} - + } + inline + fastField + > + + {/*------------ Currency -----------*/} -
+ ); } diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx index ab157d59e..1b0164e38 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx @@ -14,6 +14,7 @@ import { useHistory } from 'react-router-dom'; import { useFormikContext } from 'formik'; import classNames from 'classnames'; import { Group, Icon, If, FormattedMessage as T } from '@/components'; +import { PageForm } from '@/components/PageForm'; import { CLASSES } from '@/constants/classes'; import { useMakeJournalFormContext } from './MakeJournalProvider'; @@ -76,7 +77,7 @@ export default function MakeJournalFloatingAction() { }; return ( - @@ -191,6 +192,6 @@ export default function MakeJournalFloatingAction() { onClick={handleCancelBtnClick} text={} /> - + ); } diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss index 62b5a09f4..a39a79539 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss @@ -1,9 +1,12 @@ - - .emptyState{ + --x-color-text: #738091; + + :global(.bp4-dark) & { + --x-color-text: rgba(255, 255, 255, 0.6); + } text-align: center; font-size: 15px; - color: #738091; + color: var(--x-color-text); :global ul{ list-style: inside; diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx index 7c3facdd8..49bb3bf81 100644 --- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx +++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx @@ -11,11 +11,9 @@ import { MenuItem, } from '@blueprintjs/core'; import { useFormikContext } from 'formik'; -import { Group, FormattedMessage as T } from '@/components'; +import { FormattedMessage as T, PageForm, Group } from '@/components'; import { useHistory } from 'react-router-dom'; -import { CLASSES } from '@/constants/classes'; -import classNames from 'classnames'; import { Icon, If } from '@/components'; import { useExpenseFormContext } from './ExpenseFormPageProvider'; @@ -78,121 +76,120 @@ export default function ExpenseFloatingFooter() { }; return ( - - {/* ----------- Save And Publish ----------- */} - - -