From d9de3341feb2259fd8800a6cd7af542bd049360f Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Thu, 23 Jun 2022 17:50:14 +0200 Subject: [PATCH] feat: add timesheet header. --- .../ProjectFinancialSection/components.tsx | 0 .../ProjectFinancialSection/index.tsx | 125 ------------------ .../ProjectTimesheet/TimesheetsHeader.tsx | 41 ++++++ .../ProjectDetails/ProjectTimesheet/index.tsx | 5 +- .../components/FinancialSection.tsx | 82 ++++++++++++ .../ProjectSelect.tsx} | 2 +- .../ProjectDetails/components/index.tsx | 2 + 7 files changed, 128 insertions(+), 129 deletions(-) delete mode 100644 src/containers/Projects/containers/ProjectDetails/ProjectFinancialSection/components.tsx delete mode 100644 src/containers/Projects/containers/ProjectDetails/ProjectFinancialSection/index.tsx create mode 100644 src/containers/Projects/containers/ProjectDetails/ProjectTimesheet/TimesheetsHeader.tsx create mode 100644 src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx rename src/containers/Projects/containers/ProjectDetails/{components.tsx => components/ProjectSelect.tsx} (96%) create mode 100644 src/containers/Projects/containers/ProjectDetails/components/index.tsx diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectFinancialSection/components.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectFinancialSection/components.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectFinancialSection/index.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectFinancialSection/index.tsx deleted file mode 100644 index 7d33ae44c..000000000 --- a/src/containers/Projects/containers/ProjectDetails/ProjectFinancialSection/index.tsx +++ /dev/null @@ -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 ( - - - - Project estimate - 3.14 - - - - - - Invoiced - 0.00 - - 0% of project estimate - - - - - - - - Time & Expenses - 0.00 - - 0% of project estimate - - - - - - - - To be invoiced - 3.14 - - - - - - Deadline - - - - 4 days to go - - - - ); -} - -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; - } - } -`; diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectTimesheet/TimesheetsHeader.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectTimesheet/TimesheetsHeader.tsx new file mode 100644 index 000000000..d883a758a --- /dev/null +++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimesheet/TimesheetsHeader.tsx @@ -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 ( + + + + 0% of project estimate + + + + 0% of project estimate + + + + + } + > + 4 days to go + + + ); +} diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectTimesheet/index.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectTimesheet/index.tsx index 6a325a9bb..4307fffbb 100644 --- a/src/containers/Projects/containers/ProjectDetails/ProjectTimesheet/index.tsx +++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimesheet/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import TimesheetsTable from './TimesheetsTable'; -import ProjectFinancialSection from '../ProjectFinancialSection'; +import TimesheetsHeader from './TimesheetsHeader'; /** * Project Timesheet. @@ -11,8 +11,7 @@ import ProjectFinancialSection from '../ProjectFinancialSection'; export default function ProjectTimesheet() { return ( - - + diff --git a/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx b/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx new file mode 100644 index 000000000..635ce230e --- /dev/null +++ b/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import styled from 'styled-components'; +import { ProgressBar } from '@blueprintjs/core'; + +export function DetailFinancialSection({ children }) { + return {children}; +} + +export function DetailFinancialCard({ label, value, children }) { + return ( + + + + {label} + {value} + {children} + + + + ); +} +export const FinancialDescription = ({ childern }) => { + return {childern}; +}; + +export const FinancialProgressBar = ({ ...rest }) => { + return ; +}; + +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; + } + } +`; diff --git a/src/containers/Projects/containers/ProjectDetails/components.tsx b/src/containers/Projects/containers/ProjectDetails/components/ProjectSelect.tsx similarity index 96% rename from src/containers/Projects/containers/ProjectDetails/components.tsx rename to src/containers/Projects/containers/ProjectDetails/components/ProjectSelect.tsx index 311cae6d6..1d7d55960 100644 --- a/src/containers/Projects/containers/ProjectDetails/components.tsx +++ b/src/containers/Projects/containers/ProjectDetails/components/ProjectSelect.tsx @@ -1,7 +1,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import { MenuItem, Button } from '@blueprintjs/core'; -import { FSelect, FFormGroup } from 'components'; +import { FSelect } from 'components'; /** * diff --git a/src/containers/Projects/containers/ProjectDetails/components/index.tsx b/src/containers/Projects/containers/ProjectDetails/components/index.tsx new file mode 100644 index 000000000..5c37da236 --- /dev/null +++ b/src/containers/Projects/containers/ProjectDetails/components/index.tsx @@ -0,0 +1,2 @@ +export * from './ProjectSelect'; +export * from './FinancialSection';