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

feat: style the banking service

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-07-01 20:11:30 +02:00
parent 55caf037cd
commit 50861940a8
8 changed files with 56 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
View File

@@ -106,6 +106,10 @@ const DashboardConstrantTable = styled(DataTable)`
.thead {
.th {
background: #fff;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
font-size: 13px;
}
}

4
packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx
View File

@@ -120,6 +120,10 @@ const DashboardConstrantTable = styled(DataTable)`
.thead {
.th {
background: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 13px;i
font-weight: 500;
}
}

4
packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx
View File

@@ -55,14 +55,17 @@ export function useUncategorizedTransactionsColumns() {
Header: 'Date',
accessor: 'formatted_date',
width: 110,
textOverview: true,
},
{
Header: 'Description',
accessor: descriptionAccessor,
textOverview: true,
},
{
Header: 'Payee',
accessor: 'payee',
textOverview: true,
},
{
Header: 'Recognize',
@@ -72,6 +75,7 @@ export function useUncategorizedTransactionsColumns() {
{
Header: 'Rule',
accessor: 'bank_rule_name',
textOverview: true,
},
{
Header: 'Deposit',

10
packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx
View File

@@ -1,11 +1,10 @@
// @ts-nocheck
import styled from 'styled-components';
import { DrawerBody } from '@/components';
import { CategorizeTransactionBoot } from './CategorizeTransactionBoot';
import { CategorizeTransactionForm } from './CategorizeTransactionForm';
import { useCategorizeTransactionTabsBoot } from '@/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabsBoot';
export function CategorizeTransactionContent({}) {
export function CategorizeTransactionContent() {
const { uncategorizedTransactionId } = useCategorizeTransactionTabsBoot();
return (
@@ -19,7 +18,8 @@ export function CategorizeTransactionContent({}) {
);
}
const CategorizeTransactionDrawerBody = styled(DrawerBody)`
padding: 20px;
background-color: #fff;
const CategorizeTransactionDrawerBody = styled.div`
display: flex;
flex-direction: column;
flex: 1 1 auto;
`;

28
packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionForm.tsx
View File

@@ -63,18 +63,16 @@ function CategorizeTransactionFormRoot({
};
return (
<DivRoot>
<Formik
validationSchema={CreateCategorizeTransactionSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<Form>
<CategorizeTransactionFormContent />
<CategorizeTransactionFormFooter />
</Form>
</Formik>
</DivRoot>
<Formik
validationSchema={CreateCategorizeTransactionSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<FormRoot>
<CategorizeTransactionFormContent />
<CategorizeTransactionFormFooter />
</FormRoot>
</Formik>
);
}
@@ -82,7 +80,11 @@ export const CategorizeTransactionForm = compose(withBankingActions)(
CategorizeTransactionFormRoot,
);
const DivRoot = styled.div`
const FormRoot = styled(Form)`
display: flex;
flex-direction: column;
flex: 1 1 auto;
.bp4-form-group .bp4-form-content {
flex: 1 0;
}

6
packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormContent.tsx
View File

@@ -2,7 +2,7 @@
import React from 'react';
import styled from 'styled-components';
import { FormGroup } from '@blueprintjs/core';
import { FFormGroup, FSelect, } from '@/components';
import { Box, FFormGroup, FSelect } from '@/components';
import { getAddMoneyInOptions, getAddMoneyOutOptions } from '@/constants';
import { useFormikContext } from 'formik';
import { useCategorizeTransactionTabsBoot } from '@/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabsBoot';
@@ -25,7 +25,7 @@ export function CategorizeTransactionFormContent() {
: MoneyOutOptions;
return (
<>
<Box style={{ flex: 1, margin: 20 }}>
<FormGroup label={'Amount'} inline>
<Title>{uncategorizedTransaction.formatted_amount}</Title>
</FormGroup>
@@ -42,7 +42,7 @@ export function CategorizeTransactionFormContent() {
</FFormGroup>
<CategorizeTransactionFormSubContent />
</>
</Box>
);
}

45
packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx
View File

@@ -1,6 +1,6 @@
// @ts-nocheck
import * as R from 'ramda';
import { Button, Classes, Intent } from '@blueprintjs/core';
import { Button, Intent } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import styled from 'styled-components';
import { Group } from '@/components';
@@ -18,26 +18,24 @@ function CategorizeTransactionFormFooterRoot({
return (
<Root>
<div className={Classes.DRAWER_FOOTER}>
<Group spacing={10}>
<Button
intent={Intent.PRIMARY}
style={{ minWidth: '75px' }}
loading={isSubmitting}
type="submit"
>
Save
</Button>
<Group spacing={10}>
<Button
intent={Intent.PRIMARY}
style={{ minWidth: '85px' }}
loading={isSubmitting}
type="submit"
>
Save
</Button>
<Button
disabled={isSubmitting}
onClick={handleClose}
style={{ minWidth: '75px' }}
>
Close
</Button>
</Group>
</div>
<Button
disabled={isSubmitting}
onClick={handleClose}
style={{ minWidth: '75px' }}
>
Close
</Button>
</Group>
</Root>
);
}
@@ -47,9 +45,6 @@ export const CategorizeTransactionFormFooter = R.compose(withBankingActions)(
);
const Root = styled.div`
// position: absolute;
// bottom: 0;
// left: 0;
// right: 0;
// background: #fff;
border-top: 1px solid #c7d5db;
padding: 14px 20px;
`;