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

wip

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-09-07 23:47:07 +02:00
parent 3537de765d
commit dd941f1f45
30 changed files with 539 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/webapp/src/components/PageForm/PageForm.tsx
View File

@@ -37,6 +37,30 @@ const PageFormBody: FC<{ children: React.ReactNode } & SystemProps> = ({
};
PageFormBody.displayName = 'PageFormBody';
const PageFormHeader: FC<GroupProps> = ({ className, ...props }) => {
return (
<Group
position="apart"
align={'flex-start'}
p="25px 32px"
{...props}
className={clsx(css(pageFormHeaderStyle), className)}
/>
);
};
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;

36
packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx
View File

@@ -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}
>
<Form>
<MakeJournalFormTopBar />
<MakeJournalEntriesHeader />
<MakeJournalEntriesField />
<MakeJournalFormFooter />
<MakeJournalFormFloatingActions />
<Form
className={css({
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
flex: 1,
})}
>
<PageForm flex={1}>
<PageForm.Body>
<MakeJournalFormTopBar />
<MakeJournalEntriesHeader />
<MakeJournalEntriesField />
<MakeJournalFormFooter />
</PageForm.Body>
{/* --------- Dialogs --------- */}
<MakeJournalFormDialogs />
<PageForm.Footer>
<MakeJournalFormFloatingActions />
</PageForm.Footer>
{/* --------- Effects --------- */}
<JournalSyncIncrementSettingsToForm />
{/* --------- Dialogs --------- */}
<MakeJournalFormDialogs />
{/* --------- Effects --------- */}
<JournalSyncIncrementSettingsToForm />
</PageForm>
</Form>
</Formik>
</div>

13
packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx
View File

@@ -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 (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<PageForm.Header>
<MakeJournalEntriesHeaderFields />
<MakeJournalHeaderBigNumber />
</div>
</PageForm.Header>
);
}

148
packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
View File

@@ -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 (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
<Stack spacing={18} flex={1} className={fieldsClassName}>
{/*------------ Posting date -----------*/}
<FastField name={'date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'posting_date'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date" />}
minimal={true}
inline={true}
className={classNames(CLASSES.FILL)}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{
position: Position.BOTTOM,
minimal: true,
}}
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
}}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'date'}
label={<T id={'posting_date'} />}
labelInfo={<FieldRequiredHint />}
inline
fastField
>
<FDateInput
name={'date'}
formatDate={(date) => date.toLocaleDateString()}
parseDate={(str) => new Date(str)}
popoverProps={{
position: Position.BOTTOM_LEFT,
minimal: true,
fill: true,
}}
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
}}
fill
fastField
/>
</FFormGroup>
{/*------------ Journal number -----------*/}
<MakeJournalTransactionNoField />
{/*------------ Reference -----------*/}
<FastField name={'reference'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reference'} />}
labelInfo={
<Hint
content={<T id={'journal_reference_hint'} />}
position={Position.RIGHT}
/>
}
className={'form-group--reference'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference" />}
fill={true}
inline={true}
>
<InputGroup fill={true} {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'reference'}
label={<T id={'reference'} />}
labelInfo={
<Hint
content={<T id={'journal_reference_hint'} />}
position={Position.RIGHT}
/>
}
inline
fastField
>
<FInputGroup name={'reference'} minimal fill />
</FFormGroup>
{/*------------ Journal type -----------*/}
<FastField name={'journal_type'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'journal_type'} />}
className={classNames('form-group--account-type', CLASSES.FILL)}
inline={true}
>
<InputGroup
intent={inputIntent({ error, touched })}
fill={true}
{...field}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'journal_type'}
label={<T id={'journal_type'} />}
inline
fastField
>
<FInputGroup name={'journal_type'} minimal fill />
</FFormGroup>
{/*------------ Currency -----------*/}
<FFormGroup
@@ -136,6 +136,6 @@ export default function MakeJournalEntriesHeader({}) {
name={'exchange_rate'}
formGroupProps={{ label: ' ', inline: true }}
/>
</div>
</Stack>
);
}

5
packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx
View File

@@ -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 (
<Group
<PageForm.FooterActions
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
@@ -191,6 +192,6 @@ export default function MakeJournalFloatingAction() {
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</Group>
</PageForm.FooterActions>
);
}

9
packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss
View File

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

213
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx
View File

@@ -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 (
<Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save And Publish ----------- */}
<If condition={isNewMode}>
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<PageForm.FooterActions spacing={10} position="apart">
<Group spacing={10}>
{/* ----------- Save And Publish ----------- */}
<If condition={isNewMode}>
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
onClick={handleSubmitDraftBtnClick}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
className={'ml1'}
onClick={handleSubmitDraftBtnClick}
text={<T id={'save_as_draft'} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={!isNewMode}>
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
onClick={handleSubmitPublishBtnClick}
style={{ minWidth: '85px' }}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
disabled={isSubmitting}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={!isNewMode}>
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
onClick={handleSubmitPublishBtnClick}
style={{ minWidth: '85px' }}
text={<T id={'save'} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</Group>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</Group>
</PageForm.FooterActions>
);
}

57
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseForm.tsx
View File

@@ -1,12 +1,11 @@
// @ts-nocheck
import React, { useMemo } from 'react';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { Intent } from '@blueprintjs/core';
import { defaultTo, sumBy, isEmpty } from 'lodash';
import { Formik, Form } from 'formik';
import { useHistory } from 'react-router-dom';
import { CLASSES } from '@/constants/classes';
import { css } from '@emotion/css';
import ExpenseFormBody from './ExpenseFormBody';
import ExpenseFormHeader from './ExpenseFormHeader';
@@ -20,7 +19,8 @@ import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
import withSettings from '@/containers/Settings/withSettings';
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
import { AppToaster } from '@/components';
import { AppToaster, Box } from '@/components';
import { PageForm } from '@/components/PageForm';
import {
CreateExpenseFormSchema,
EditExpenseFormSchema,
@@ -129,29 +129,38 @@ function ExpenseForm({
};
return (
<div
className={classNames(
CLASSES.PAGE_FORM,
CLASSES.PAGE_FORM_STRIP_STYLE,
CLASSES.PAGE_FORM_EXPENSE,
)}
<Formik
validationSchema={
isNewMode ? CreateExpenseFormSchema : EditExpenseFormSchema
}
initialValues={initialValues}
onSubmit={handleSubmit}
>
<Formik
validationSchema={
isNewMode ? CreateExpenseFormSchema : EditExpenseFormSchema
}
initialValues={initialValues}
onSubmit={handleSubmit}
<Form
className={css({
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
flex: 1,
})}
>
<Form>
<ExpenseFormTopBar />
<ExpenseFormHeader />
<ExpenseFormBody />
<ExpenseFormFooter />
<ExpenseFloatingFooter />
</Form>
</Formik>
</div>
<PageForm flex={1}>
<PageForm.Body>
<ExpenseFormTopBar />
<ExpenseFormHeader />
<Box p="18px 32px 0">
<ExpenseFormBody />
</Box>
<ExpenseFormFooter />
</PageForm.Body>
<PageForm.Footer>
<ExpenseFloatingFooter />
</PageForm.Footer>
</PageForm>
</Form>
</Formik>
);
}

8
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormBody.tsx
View File

@@ -1,13 +1,7 @@
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import { CLASSES } from '@/constants/classes';
import ExpenseFormEntriesField from './ExpenseFormEntriesField';
export default function ExpenseFormBody() {
return (
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<ExpenseFormEntriesField />
</div>
);
return <ExpenseFormEntriesField />;
}

8
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx
View File

@@ -1,8 +1,6 @@
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import { CLASSES } from '@/constants/classes';
import { x } from '@xstyled/emotion';
import { Row, Col, Paper } from '@/components';
import { ExpenseFormFooterLeft } from './ExpenseFormFooterLeft';
import { ExpenseFormFooterRight } from './ExpenseFormFooterRight';
@@ -10,7 +8,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
export default function ExpenseFormFooter() {
return (
<div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
<Paper p={'20px'}>
<Row>
<Col md={8}>
@@ -23,6 +21,6 @@ export default function ExpenseFormFooter() {
</Col>
</Row>
</Paper>
</div>
</x.div>
);
}

8
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.tsx
View File

@@ -1,11 +1,9 @@
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import { FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes';
import ExpenseFormHeaderFields from './ExpenseFormHeaderFields';
import { PageFormBigNumber } from '@/components';
import { PageForm, PageFormBigNumber } from '@/components';
import { useExpenseTotalFormatted } from './utils';
// Expense form header.
@@ -13,12 +11,12 @@ export default function ExpenseFormHeader() {
const totalFormatted = useExpenseTotalFormatted();
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<PageForm.Header>
<ExpenseFormHeaderFields />
<PageFormBigNumber
label={<T id={'expense_amount'} />}
amount={totalFormatted}
/>
</div>
</PageForm.Header>
);
}

29
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
View File

@@ -3,12 +3,16 @@ import React from 'react';
import { FormGroup, Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FastField, ErrorMessage } from 'formik';
import { css } from '@emotion/css';
import classNames from 'classnames';
import { useTheme } from '@emotion/react';
import {
CustomersSelect,
FInputGroup,
Stack,
FormattedMessage as T,
} from '@/components';
import classNames from 'classnames';
import { CLASSES } from '@/constants/classes';
import {
momentFormatter,
@@ -28,14 +32,33 @@ import { ExpensesExchangeRateInputField } from './components';
import { useExpenseFormContext } from './ExpenseFormPageProvider';
import { SUPPORTED_EXPENSE_PAYMENT_ACCOUNT_TYPES } from './constants';
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%;
}
}
`;
/**
* Expense form header.
*/
export default function ExpenseFormHeader() {
const { currencies, accounts, customers } = useExpenseFormContext();
const theme = useTheme();
const fieldsClassName = getFieldsStyle(theme);
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
<Stack spacing={18} flex={1} className={fieldsClassName}>
<FastField name={'payment_date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
@@ -116,7 +139,7 @@ export default function ExpenseFormHeader() {
{/* ----------- Customer ----------- */}
<ExpenseFormCustomerSelect />
</div>
</Stack>
);
}

3
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormPage.tsx
View File

@@ -1,9 +1,6 @@
// @ts-nocheck
import React from 'react';
import { useParams } from 'react-router-dom';
import '@/style/pages/Expense/PageForm.scss';
import ExpenseForm from './ExpenseForm';
import { ExpenseFormPageProvider } from './ExpenseFormPageProvider';

5
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormPageProvider.tsx
View File

@@ -1,5 +1,6 @@
// @ts-nocheck
import React, { createContext } from 'react';
import { css } from '@emotion/css';
import { DashboardInsider } from '@/components/Dashboard';
import { Features } from '@/constants';
import { useFeatureCan } from '@/hooks/state';
@@ -98,6 +99,10 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
isProjectsLoading
}
name={'expense-form'}
className={css`
min-height: calc(100vh - var(--top-offset));
max-height: calc(100vh - var(--top-offset));
`}
>
<ExpenseFormPageContext.Provider value={provider} {...props} />
</DashboardInsider>

5
packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx
View File

@@ -11,6 +11,7 @@ import {
MenuItem,
} from '@blueprintjs/core';
import { Group, FormattedMessage as T } from '@/components';
import { PageForm } from '@/components/PageForm';
import { useHistory } from 'react-router-dom';
import { CLASSES } from '@/constants/classes';
import classNames from 'classnames';
@@ -76,7 +77,7 @@ export default function BillFloatingActions() {
};
return (
<Group
<PageForm.FooterActions
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
@@ -192,6 +193,6 @@ export default function BillFloatingActions() {
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</Group>
</PageForm.FooterActions>
);
}

55
packages/webapp/src/containers/Purchases/Bills/BillForm/BillForm.tsx
View File

@@ -7,6 +7,7 @@ import { Intent } from '@blueprintjs/core';
import { useHistory } from 'react-router-dom';
import { isEmpty } from 'lodash';
import { CLASSES } from '@/constants/classes';
import { css } from '@emotion/css';
import { EditBillFormSchema, CreateBillFormSchema } from './BillForm.schema';
import BillFormHeader from './BillFormHeader';
@@ -15,7 +16,8 @@ import BillFormFooter from './BillFormFooter';
import BillItemsEntriesEditor from './BillItemsEntriesEditor';
import BillFormTopBar from './BillFormTopBar';
import { AppToaster } from '@/components';
import { AppToaster, Box } from '@/components';
import { PageForm } from '@/components/PageForm';
import { useBillFormContext } from './BillFormProvider';
import { compose, safeSumBy } from '@/utils';
import {
@@ -112,30 +114,37 @@ function BillForm({
};
return (
<div
className={classNames(
CLASSES.PAGE_FORM,
CLASSES.PAGE_FORM_STRIP_STYLE,
CLASSES.PAGE_FORM_BILL,
)}
<Formik
validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<Formik
validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
<Form
className={css({
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
flex: 1,
})}
>
<Form>
<BillFormTopBar />
<BillFormHeader />
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<BillFormEntriesActions />
<BillItemsEntriesEditor />
</div>
<BillFormFooter />
<BillFloatingActions />
</Form>
</Formik>
</div>
<PageForm flex={1}>
<PageForm.Body>
<BillFormTopBar />
<BillFormHeader />
<Box p="18px 32px 0">
<BillFormEntriesActions />
<BillItemsEntriesEditor />
</Box>
<BillFormFooter />
</PageForm.Body>
<PageForm.Footer>
<BillFloatingActions />
</PageForm.Footer>
</PageForm>
</Form>
</Formik>
);
}
export default compose(withCurrentOrganization())(BillForm);

9
packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx
View File

@@ -1,9 +1,6 @@
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import styled from 'styled-components';
import { CLASSES } from '@/constants/classes';
import { x } from '@xstyled/emotion';
import { Paper, Row, Col } from '@/components';
import { BillFormFooterLeft } from './BillFormFooterLeft';
import { BillFormFooterRight } from './BillFormFooterRight';
@@ -12,7 +9,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
// Bill form floating actions.
export default function BillFormFooter() {
return (
<div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
<Paper p={'20px'}>
<Row>
<Col md={8}>
@@ -25,6 +22,6 @@ export default function BillFormFooter() {
</Col>
</Row>
</Paper>
</div>
</x.div>
);
}

8
packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx
View File

@@ -1,9 +1,7 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { CLASSES } from '@/constants/classes';
import { PageFormBigNumber } from '@/components';
import { PageForm, PageFormBigNumber } from '@/components';
import BillFormHeaderFields from './BillFormHeaderFields';
import { useBillTotalFormatted } from './utils';
@@ -13,10 +11,10 @@ import { useBillTotalFormatted } from './utils';
*/
function BillFormHeader() {
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<PageForm.Header>
<BillFormHeaderFields />
<BillFormBigTotal />
</div>
</PageForm.Header>
);
}

28
packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx
View File

@@ -5,8 +5,9 @@ import classNames from 'classnames';
import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { css } from '@emotion/css';
import { FeatureCan, FormattedMessage as T } from '@/components';
import { FeatureCan, Stack, FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes';
import {
FFormGroup,
@@ -32,6 +33,24 @@ import {
inputIntent,
} from '@/utils';
import { Features } from '@/constants';
import { useTheme } from '@emotion/react';
const getBillFieldsStyle = (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%;
}
}
`;
/**
* Fill form header.
@@ -40,8 +59,11 @@ function BillFormHeader() {
// Bill form context.
const { vendors, projects } = useBillFormContext();
const theme = useTheme();
const billFieldsClassName = getBillFieldsStyle(theme);
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
<Stack spacing={18} flex={1} className={billFieldsClassName}>
{/* ------- Vendor name ------ */}
<BillFormVendorField />
@@ -150,7 +172,7 @@ function BillFormHeader() {
/>
</FFormGroup>
</FeatureCan>
</div>
</Stack>
);
}

12
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx
View File

@@ -1,6 +1,5 @@
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { useFormikContext } from 'formik';
import {
@@ -13,8 +12,8 @@ import {
Menu,
MenuItem,
} from '@blueprintjs/core';
import { If, Icon, FormattedMessage as T, Group } from '@/components';
import { CLASSES } from '@/constants/classes';
import { If, Icon, FormattedMessage as T } from '@/components';
import { PageForm } from '@/components/PageForm';
import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
/**
@@ -74,10 +73,7 @@ export default function VendorCreditNoteFloatingActions() {
resetForm();
};
return (
<Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
<PageForm.FooterActions spacing={10}>
{/* ----------- Save And Open ----------- */}
<If condition={!vendorCredit || !vendorCredit?.is_open}>
<ButtonGroup>
@@ -189,6 +185,6 @@ export default function VendorCreditNoteFloatingActions() {
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</Group>
</PageForm.FooterActions>
);
}

58
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.tsx
View File

@@ -7,6 +7,8 @@ import { Formik, Form } from 'formik';
import { Intent } from '@blueprintjs/core';
import { isEmpty } from 'lodash';
import { CLASSES } from '@/constants/classes';
import { css } from '@emotion/css';
import { PageForm } from '@/components/PageForm';
import {
CreateCreditNoteFormSchema,
EditCreditNoteFormSchema,
@@ -21,7 +23,7 @@ import VendorCreditNoteFormTopBar from './VendorCreditNoteFormTopBar';
import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
import { AppToaster } from '@/components';
import { AppToaster, Box } from '@/components';
import { compose, safeSumBy, transactionNumber } from '@/utils';
import {
defaultVendorsCreditNote,
@@ -139,30 +141,42 @@ function VendorCreditNoteForm({
};
return (
<div
className={classNames(
CLASSES.PAGE_FORM,
CLASSES.PAGE_FORM_STRIP_STYLE,
CLASSES.PAGE_FORM_VENDOR_CREDIT_NOTE,
)}
<Formik
validationSchema={
isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<Formik
validationSchema={
isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
}
initialValues={initialValues}
onSubmit={handleFormSubmit}
<Form
className={css({
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
flex: 1,
})}
>
<Form>
<VendorCreditNoteFormTopBar />
<VendorCreditNoteFormHeader />
<VendorCreditNoteItemsEntriesEditor />
<VendorCreditNoteFormFooter />
<VendorCreditNoteFloatingActions />
<PageForm flex={1}>
<PageForm.Body>
<VendorCreditNoteFormTopBar />
<VendorCreditNoteFormHeader />
<Box p="18px 32px 0">
<VendorCreditNoteItemsEntriesEditor />
</Box>
<VendorCreditNoteFormFooter />
</PageForm.Body>
<PageForm.Footer>
<VendorCreditNoteFloatingActions />
</PageForm.Footer>
{/* ---------- Dialogs ---------- */}
<VendorCreditNoteFormDialogs />
</Form>
</Formik>
</div>
</PageForm>
</Form>
</Formik>
);
}

5
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx
View File

@@ -2,6 +2,7 @@
import React from 'react';
import classNames from 'classnames';
import styled from 'styled-components';
import { x } from '@xstyled/emotion';
import { CLASSES } from '@/constants/classes';
import { Row, Col, Paper } from '@/components';
@@ -14,7 +15,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
*/
export default function VendorCreditNoteFormFooter() {
return (
<div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
<Paper p={'20px'}>
<Row>
<Col md={8}>
@@ -27,6 +28,6 @@ export default function VendorCreditNoteFormFooter() {
</Col>
</Row>
</Paper>
</div>
</x.div>
);
}

7
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx
View File

@@ -1,9 +1,8 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { CLASSES } from '@/constants/classes';
import VendorCreditNoteFormHeaderFields from './VendorCreditNoteFormHeaderFields';
import { PageForm } from '@/components/PageForm';
import { PageFormBigNumber } from '@/components';
import { useVendorCreditTotalFormatted } from './utils';
@@ -14,13 +13,13 @@ function VendorCreditNoteFormHeader() {
const totalFormatted = useVendorCreditTotalFormatted();
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<PageForm.Header>
<VendorCreditNoteFormHeaderFields />
<PageFormBigNumber
label={intl.get('vendor_credits.label.amount_to_credit')}
amount={totalFormatted}
/>
</div>
</PageForm.Header>
);
}

29
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx
View File

@@ -10,8 +10,10 @@ import {
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { CLASSES } from '@/constants/classes';
import { useTheme } from '@emotion/react';
import { css } from '@emotion/css';
import { CLASSES } from '@/constants/classes';
import {
FFormGroup,
FieldRequiredHint,
@@ -20,6 +22,7 @@ import {
FormattedMessage as T,
VendorDrawerLink,
VendorsSelect,
Stack,
} from '@/components';
import {
vendorsFieldShouldUpdate,
@@ -39,6 +42,23 @@ import {
import withSettings from '@/containers/Settings/withSettings';
import withDialogActions from '@/containers/Dialog/withDialogActions';
const getFieldsStyle = (theme: Theme) => css`
.${theme.bpPrefix}-form-group {
margin-bottom: 0;
&.${theme.bpPrefix}-inline {
max-width: 500px;
}
.${theme.bpPrefix}-label {
min-width: 150px;
font-weight: 500;
}
.${theme.bpPrefix}-form-content {
width: 100%;
}
}
`;
/**
* Vendor Credit note form header fields.
*/
@@ -51,6 +71,9 @@ function VendorCreditNoteFormHeaderFields({
vendorcreditNumberPrefix,
vendorcreditNextNumber,
}) {
const theme = useTheme();
const fieldsClassName = getFieldsStyle(theme);
// Handle vendor credit number changing.
const handleVendorCreditNumberChange = () => {
openDialog('vendor-credit-form');
@@ -76,7 +99,7 @@ function VendorCreditNoteFormHeaderFields({
);
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
<Stack spacing={18} flex={1} className={fieldsClassName}>
{/* ----------- Vendor name ----------- */}
<VendorCreditFormVendorSelect />
@@ -165,7 +188,7 @@ function VendorCreditNoteFormHeaderFields({
</FormGroup>
)}
</FastField>
</div>
</Stack>
);
}

2
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.tsx
View File

@@ -2,8 +2,6 @@
import React from 'react';
import { useParams } from 'react-router-dom';
import '@/style/pages/VendorsCreditNote/PageForm.scss';
import VendorCreditNoteForm from './VendorCreditNoteForm';
import { VendorCreditNoteFormProvider } from './VendorCreditNoteFormProvider';

5
packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFloatingActions.tsx
View File

@@ -12,6 +12,7 @@ import {
MenuItem,
} from '@blueprintjs/core';
import { Group, Icon, FormattedMessage as T } from '@/components';
import { PageForm } from '@/components/PageForm';
import { useHistory } from 'react-router-dom';
import { useFormikContext } from 'formik';
import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
@@ -58,7 +59,7 @@ export default function PaymentMadeFloatingActions() {
};
return (
<Group
<PageForm.FooterActions
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
@@ -110,6 +111,6 @@ export default function PaymentMadeFloatingActions() {
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</Group>
</PageForm.FooterActions>
);
}

5
packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx
View File

@@ -2,6 +2,7 @@
import React from 'react';
import classNames from 'classnames';
import styled from 'styled-components';
import { x } from '@xstyled/emotion';
import { CLASSES } from '@/constants/classes';
import { Row, Col, Paper } from '@/components';
@@ -14,7 +15,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
*/
export default function PaymentMadeFooter() {
return (
<div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
<Paper p={'20px'}>
<Row>
<Col md={8}>
@@ -27,6 +28,6 @@ export default function PaymentMadeFooter() {
</Col>
</Row>
</Paper>
</div>
</x.div>
);
}

63
packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeForm.tsx
View File

@@ -4,11 +4,12 @@ import intl from 'react-intl-universal';
import classNames from 'classnames';
import { Formik, Form, FormikHelpers } from 'formik';
import { Intent } from '@blueprintjs/core';
import { sumBy, defaultTo } from 'lodash';
import { defaultTo } from 'lodash';
import { useHistory } from 'react-router-dom';
import { css } from '@emotion/css';
import { CLASSES } from '@/constants/classes';
import { AppToaster } from '@/components';
import { AppToaster, Box } from '@/components';
import PaymentMadeHeader from './PaymentMadeFormHeader';
import PaymentMadeFloatingActions from './PaymentMadeFloatingActions';
import PaymentMadeFooter from './PaymentMadeFooter';
@@ -23,6 +24,7 @@ import { compose, orderingLinesIndexes } from '@/utils';
import withSettings from '@/containers/Settings/withSettings';
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { PageForm } from '@/components/PageForm';
import {
EditPaymentMadeFormSchema,
@@ -144,32 +146,43 @@ function PaymentMadeForm({
};
return (
<div
className={classNames(
CLASSES.PAGE_FORM,
CLASSES.PAGE_FORM_STRIP_STYLE,
CLASSES.PAGE_FORM_PAYMENT_MADE,
)}
<Formik
initialValues={initialValues}
validationSchema={
isNewMode ? CreatePaymentMadeFormSchema : EditPaymentMadeFormSchema
}
onSubmit={handleSubmitForm}
>
<Formik
initialValues={initialValues}
validationSchema={
isNewMode ? CreatePaymentMadeFormSchema : EditPaymentMadeFormSchema
}
onSubmit={handleSubmitForm}
<Form
className={css({
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
flex: 1,
})}
>
<Form>
<PaymentMadeInnerProvider>
<PaymentMadeFormTopBar />
<PaymentMadeHeader />
<PaymentMadeFormBody />
<PaymentMadeFooter />
<PageForm flex={1}>
<PageForm.Body>
<PaymentMadeInnerProvider>
<PaymentMadeFormTopBar />
<PaymentMadeHeader />
<Box p="18px 32px 0">
<PaymentMadeFormBody />
</Box>
<PaymentMadeFooter />
</PaymentMadeInnerProvider>
</PageForm.Body>
<PageForm.Footer>
<PaymentMadeFloatingActions />
<PaymentMadeDialogs />
</PaymentMadeInnerProvider>
</Form>
</Formik>
</div>
</PageForm.Footer>
{/* --------- Dialogs --------- */}
<PaymentMadeDialogs />
</PageForm>
</Form>
</Formik>
);
}

33
packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeader.tsx
View File

@@ -1,9 +1,12 @@
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import { useFormikContext } from 'formik';
import { CLASSES } from '@/constants/classes';
import { Money, FormattedMessage as T } from '@/components';
import {
Money,
FormattedMessage as T,
PageForm,
PageFormBigNumber,
} from '@/components';
import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields';
import { usePaymentmadeTotalAmount } from './utils';
@@ -20,23 +23,13 @@ function PaymentMadeFormHeader() {
const totalAmount = usePaymentmadeTotalAmount();
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
<PaymentMadeFormHeaderFields />
<div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
<div class="big-amount">
<span class="big-amount__label">
<T id={'amount_received'} />
</span>
<h1 class="big-amount__number">
<Money amount={totalAmount} currency={currency_code} />
</h1>
</div>
</div>
</div>
</div>
<PageForm.Header>
<PaymentMadeFormHeaderFields />
<PageFormBigNumber
label={<T id={'amount_received'} />}
amount={<Money amount={totalAmount} currency={currency_code} />}
/>
</PageForm.Header>
);
}

28
packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx
View File

@@ -13,9 +13,13 @@ import {
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FastField, useFormikContext, ErrorMessage } from 'formik';
import { css } from '@emotion/css';
import { Theme, useTheme } from '@emotion/react';
import {
FInputGroup,
FMoneyInputGroup,
Stack,
FormattedMessage as T,
VendorsSelect,
} from '@/components';
@@ -47,6 +51,23 @@ import {
} from '@/utils';
import { accountsFieldShouldUpdate, vendorsFieldShouldUpdate } from './utils';
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%;
}
}
`;
/**
* Payment made form header fields.
*/
@@ -57,6 +78,9 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
setFieldValue,
} = useFormikContext();
const theme = useTheme();
const fieldsClassName = getFieldsStyle(theme);
// Payment made form context.
const { accounts } = usePaymentMadeFormContext();
@@ -82,7 +106,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
};
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
<Stack spacing={18} flex={1} className={fieldsClassName}>
{/* ------------ Vendor name ------------ */}
<PaymentFormVendorSelect />
@@ -202,7 +226,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
>
<FInputGroup name={'reference'} minimal={true} fastField />
</FFormGroup>
</div>
</Stack>
);
}