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

feat: add timesheet header.

Browse Source
This commit is contained in:
elforjani13
2022-06-23 17:50:14 +02:00
parent 6b6081e32e
commit d9de3341fe
7 changed files with 128 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/containers/Projects/containers/ProjectDetails/ProjectFinancialSection/components.tsx
View File

125
src/containers/Projects/containers/ProjectDetails/ProjectFinancialSection/index.tsx
View File

@@ -1,125 +0,0 @@
import React from 'react';
import intl from 'react-intl-universal';
import styled from 'styled-components';
import { Intent, ProgressBar } from '@blueprintjs/core';
import { FormatDate } from 'components';
import { calculateStatus } from 'utils';
/**
* Project Financial Section.
* @returns
*/
export default function ProjectFinancialSection() {
return (
<ProjectFinancialSectionRoot>
<FinancialSectionCard>
<FinancialSectionContent>
<FinancialSectionTitle>Project estimate</FinancialSectionTitle>
<FinancialSectionValue>3.14</FinancialSectionValue>
</FinancialSectionContent>
</FinancialSectionCard>
<FinancialSectionCard>
<FinancialSectionContent>
<FinancialSectionTitle>Invoiced</FinancialSectionTitle>
<FinancialSectionValue>0.00</FinancialSectionValue>
<FinancialSectionStatus>
<FinancialSectionText>0% of project estimate</FinancialSectionText>
<FinancialSectionProgressBar
animate={false}
intent={Intent.NONE}
value={0}
/>
</FinancialSectionStatus>
</FinancialSectionContent>
</FinancialSectionCard>
<FinancialSectionCard>
<FinancialSectionContent>
<FinancialSectionTitle>Time & Expenses</FinancialSectionTitle>
<FinancialSectionValue>0.00</FinancialSectionValue>
<FinancialSectionStatus>
<FinancialSectionText>0% of project estimate</FinancialSectionText>
<FinancialSectionProgressBar
animate={false}
intent={Intent.NONE}
value={0}
/>
</FinancialSectionStatus>
</FinancialSectionContent>
</FinancialSectionCard>
<FinancialSectionCard>
<FinancialSectionContent>
<FinancialSectionTitle>To be invoiced</FinancialSectionTitle>
<FinancialSectionValue>3.14</FinancialSectionValue>
</FinancialSectionContent>
</FinancialSectionCard>
<FinancialSectionCard>
<FinancialSectionContent>
<FinancialSectionTitle>Deadline</FinancialSectionTitle>
<FinancialSectionValue>
<FormatDate value={'2022-06-08T22:00:00.000Z'} />
</FinancialSectionValue>
<FinancialSectionText>4 days to go</FinancialSectionText>
</FinancialSectionContent>
</FinancialSectionCard>
</ProjectFinancialSectionRoot>
);
}
export const ProjectFinancialSectionRoot = styled.div`
display: flex;
flex-wrap: wrap;
margin: 20px 20px 20px;
gap: 10px;
`;
export const FinancialSectionCard = styled.div`
display: flex;
flex-direction: column;
flex-shrink: 0;
border-radius: 3px;
width: 220px;
height: 116px;
background-color: #fff;
border: 1px solid #c8cad0; // #000a1e33 #f0f0f0
`;
export const FinancialSectionContent = styled.div`
margin: 16px;
/* flex-direction: column; */
`;
export const FinancialSectionTitle = styled.div`
font-size: 15px;
color: #000;
white-space: nowrap;
font-weight: 400;
line-height: 1.5rem;
`;
export const FinancialSectionValue = styled.div`
font-size: 21px;
line-height: 2rem;
font-weight: 700;
`;
export const FinancialSectionStatus = styled.div``;
export const FinancialSectionText = styled.div`
font-size: 13px;
line-height: 1.5rem;
`;
export const FinancialSectionProgressBar = styled(ProgressBar)`
&.bp3-progress-bar {
height: 3px;
&,
.bp3-progress-meter {
border-radius: 0;
}
}
`;

41
src/containers/Projects/containers/ProjectDetails/ProjectTimesheet/TimesheetsHeader.tsx Normal file
View File

@@ -0,0 +1,41 @@
//@ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import styled from 'styled-components';
import { Intent } from '@blueprintjs/core';
import { FormatDate } from 'components';
import {
DetailFinancialCard,
DetailFinancialSection,
FinancialProgressBar,
FinancialCardText,
} from '../components';
import { calculateStatus } from 'utils';
/**
* Timesheets header
* @returns
*/
export default function TimesheetsHeader() {
return (
<DetailFinancialSection>
<DetailFinancialCard label={'Project estimate'} value={'3.14'} />
<DetailFinancialCard label={'Invoiced'} value={'0.00'}>
<FinancialCardText>0% of project estimate</FinancialCardText>
<FinancialProgressBar intent={Intent.NONE} value={0} />
</DetailFinancialCard>
<DetailFinancialCard label={'Time & Expenses'} value={'0.00'}>
<FinancialCardText>0% of project estimate</FinancialCardText>
<FinancialProgressBar intent={Intent.NONE} value={0} />
</DetailFinancialCard>
<DetailFinancialCard label={'To be invoiced'} value={'3.14'} />
<DetailFinancialCard
label={'Deadline'}
value={<FormatDate value={'2022-06-08T22:00:00.000Z'} />}
>
<FinancialCardText>4 days to go</FinancialCardText>
</DetailFinancialCard>
</DetailFinancialSection>
);
}

5
src/containers/Projects/containers/ProjectDetails/ProjectTimesheet/index.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import TimesheetsTable from './TimesheetsTable'; import TimesheetsTable from './TimesheetsTable';
import ProjectFinancialSection from '../ProjectFinancialSection'; import TimesheetsHeader from './TimesheetsHeader';
/** /**
* Project Timesheet. * Project Timesheet.
@@ -11,8 +11,7 @@ import ProjectFinancialSection from '../ProjectFinancialSection';
export default function ProjectTimesheet() { export default function ProjectTimesheet() {
return ( return (
<React.Fragment> <React.Fragment>
<ProjectFinancialSection /> <TimesheetsHeader />
<ProjectTimesheetTableCard> <ProjectTimesheetTableCard>
<TimesheetsTable /> <TimesheetsTable />
</ProjectTimesheetTableCard> </ProjectTimesheetTableCard>

82
src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx Normal file
View File

@@ -0,0 +1,82 @@
import React from 'react';
import styled from 'styled-components';
import { ProgressBar } from '@blueprintjs/core';
export function DetailFinancialSection({ children }) {
return <FinancialSectionWrap>{children}</FinancialSectionWrap>;
}
export function DetailFinancialCard({ label, value, children }) {
return (
<React.Fragment>
<FinancialSectionCard>
<FinancialSectionCardContent>
<FinancialCardTitle>{label}</FinancialCardTitle>
<FinancialCardValue>{value}</FinancialCardValue>
{children}
</FinancialSectionCardContent>
</FinancialSectionCard>
</React.Fragment>
);
}
export const FinancialDescription = ({ childern }) => {
return <FinancialCardText>{childern}</FinancialCardText>;
};
export const FinancialProgressBar = ({ ...rest }) => {
return <FinancialCardProgressBar animate={false} stripes={false} {...rest} />;
};
export const FinancialSectionWrap = styled.div`
display: flex;
flex-wrap: wrap;
margin: 20px 20px 20px;
gap: 10px;
`;
export const FinancialSectionCard = styled.div`
display: flex;
flex-direction: column;
flex-shrink: 0;
border-radius: 3px;
width: 220px;
height: 116px;
background-color: #fff;
border: 1px solid #c8cad0; // #000a1e33 #f0f0f0
`;
export const FinancialSectionCardContent = styled.div`
margin: 16px;
/* flex-direction: column; */
`;
export const FinancialCardWrap = styled.div``;
export const FinancialCardTitle = styled.div`
font-size: 15px;
color: #000;
white-space: nowrap;
font-weight: 400;
line-height: 1.5rem;
`;
export const FinancialCardValue = styled.div`
font-size: 21px;
line-height: 2rem;
font-weight: 700;
`;
export const FinancialCardStatus = styled.div``;
export const FinancialCardText = styled.div`
font-size: 13px;
line-height: 1.5rem;
`;
export const FinancialCardProgressBar = styled(ProgressBar)`
&.bp3-progress-bar {
height: 3px;
&,
.bp3-progress-meter {
border-radius: 0;
}
}
`;

2
src/containers/Projects/containers/ProjectDetails/components.tsx → src/containers/Projects/containers/ProjectDetails/components/ProjectSelect.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { MenuItem, Button } from '@blueprintjs/core'; import { MenuItem, Button } from '@blueprintjs/core';
import { FSelect, FFormGroup } from 'components'; import { FSelect } from 'components';
/** /**
* *

2
src/containers/Projects/containers/ProjectDetails/components/index.tsx Normal file
View File

@@ -0,0 +1,2 @@
export * from './ProjectSelect';
export * from './FinancialSection';