diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx new file mode 100644 index 0000000000..9722693511 --- /dev/null +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx @@ -0,0 +1,177 @@ +import { styled } from '@mui/material'; +import { FeatureLifecycleStageIcon } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleStageIcon'; +import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; +import { Link } from 'react-router-dom'; + +const LifecycleBox = styled('li')(({ theme }) => ({ + padding: theme.spacing(2), + borderRadius: theme.shape.borderRadiusExtraLarge, + border: `2px solid ${theme.palette.divider}`, + width: '180px', + height: '175px', + display: 'flex', + flexFlow: 'column', + justifyContent: 'space-between', +})); + +const Wrapper = styled('ul')(({ theme }) => ({ + display: 'grid', + listStyle: 'none', + gridTemplateColumns: 'repeat(auto-fit, 180px)', + gap: theme.spacing(1), + justifyContent: 'center', +})); + +const Counter = styled('span')({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', +}); + +const BigNumber = styled('span')(({ theme }) => ({ + fontSize: `calc(2 * ${theme.typography.body1.fontSize})`, +})); + +const Stats = styled('dl')(({ theme }) => ({ + margin: 0, + fontSize: theme.typography.body2.fontSize, + '& dd': { + margin: 0, + fontWeight: 'bold', + }, +})); + +const NegativeStat = styled('span')(({ theme }) => ({ + color: theme.palette.warning.contrastText, +})); + +const NoData = styled('span')({ + fontWeight: 'normal', +}); + +const LinkNoUnderline = styled(Link)({ + textDecoration: 'none', +}); + +export const ProjectLifecycleSummary = () => { + const projectId = useRequiredPathParam('projectId'); + return ( + + +

+ + 15 + + + flags in initial +

+ +
Avg. time in stage
+
+ 21 days +
+ + + +

+ + 3 + + + flags in pre-live +

+ +
Avg. time in stage
+
18 days
+ + + +

+ + 2 + + + flags in live +

+ +
Avg. time in stage
+
10 days
+ + + +

+ + 6 + + + + + flags + {' '} + in cleanup + +

+ +
Avg. time in stage
+
+ No data +
+ + + +

+ + 15 + + + flags in archived +

+ +
This month
+
3 flags archived
+ + + + ); +}; diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx index aa35be2dbc..838255fc7a 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx @@ -2,6 +2,7 @@ import { styled } from '@mui/material'; import { SidebarModal } from 'component/common/SidebarModal/SidebarModal'; import { ProjectResources } from './ProjectResources'; import { ProjectActivity } from './ProjectActivity'; +import { ProjectLifecycleSummary } from './ProjectLifecycleSummary'; const ModalContentContainer = styled('div')(({ theme }) => ({ minHeight: '100vh', @@ -40,6 +41,8 @@ export const ProjectStatusModal = ({ open, close }: Props) => { + + );