feat: change request insights widget (#6606)

frontend/src/component/project/Project/ProjectInsights/ChangeRequests/ChangeRequests.tsx

@@ -0,0 +1,131 @@
+import { Box, styled, Typography } from '@mui/material';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import { Link } from 'react-router-dom';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+
+const Container = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+}));
+
+const BoxesContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+}));
+
+const NumberBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing(1),
+    borderRadius: theme.shape.borderRadiusMedium,
+    border: `1px solid ${theme.palette.divider}`,
+}));
+
+const OpenBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    borderRadius: theme.shape.borderRadiusMedium,
+    padding: theme.spacing(3),
+    border: `2px solid ${theme.palette.primary.main}`,
+}));
+
+const ColorBox = styled(Box)(({ theme }) => ({
+    borderRadius: '8px',
+    padding: theme.spacing(1, 2),
+    display: 'flex',
+    gap: theme.spacing(6),
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: theme.spacing(1.5),
+    whiteSpace: 'nowrap',
+}));
+
+const ApplyBox = styled(ColorBox)(({ theme }) => ({
+    background: theme.palette.success.light,
+}));
+
+const ReviewBox = styled(ColorBox)(({ theme }) => ({
+    background: theme.palette.secondary.light,
+}));
+
+const ChangeRequestNavigation = styled(Link)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginBottom: theme.spacing(2.5),
+    textDecoration: 'none',
+    color: theme.palette.text.primary,
+}));
+
+const Title = styled(Typography)(({ theme }) => ({
+    fontSize: theme.spacing(2),
+    color: theme.palette.text.secondary,
+    marginBottom: theme.spacing(1),
+}));
+
+const MediumNumber = styled(Typography)(({ theme }) => ({
+    fontSize: theme.spacing(3),
+    color: theme.palette.text.primary,
+}));
+
+const BigNumber = styled(Typography)(({ theme }) => ({
+    fontSize: theme.spacing(5.5),
+    color: theme.palette.text.primary,
+}));
+
+export const ChangeRequests = () => {
+    const projectId = useRequiredPathParam('projectId');
+
+    const toBeApplied = 12;
+    const toBeReviewed = 3;
+    const total = 32;
+    const applied = 28;
+    const rejected = 4;
+
+    return (
+        <Container>
+            <ChangeRequestNavigation
+                to={`/projects/${projectId}/change-requests`}
+            >
+                <Typography variant='h3'>Change requests</Typography>
+                <KeyboardArrowRight />
+            </ChangeRequestNavigation>
+
+            <BoxesContainer>
+                <OpenBox>
+                    <ChangeRequestNavigation
+                        to={`/projects/${projectId}/change-requests`}
+                    >
+                        <span>Open</span>
+                        <KeyboardArrowRight />
+                    </ChangeRequestNavigation>
+                    <ApplyBox>
+                        <span>To be applied</span>
+                        <MediumNumber>{toBeApplied}</MediumNumber>
+                    </ApplyBox>
+                    <ReviewBox>
+                        <span>To be reviewed</span>
+                        <MediumNumber>{toBeReviewed}</MediumNumber>
+                    </ReviewBox>
+                </OpenBox>
+                <NumberBox>
+                    <Title>Total</Title>
+                    <BigNumber>{total}</BigNumber>
+                </NumberBox>
+                <NumberBox>
+                    <Title>Applied</Title>
+                    <BigNumber>{applied}</BigNumber>
+                </NumberBox>
+                <NumberBox>
+                    <Title>Rejected</Title>
+                    <BigNumber>{rejected}</BigNumber>
+                </NumberBox>
+            </BoxesContainer>
+        </Container>
+    );
+};

frontend/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.tsx

@@ -17,7 +17,7 @@ import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColum
 import theme from 'themes/theme';
 
 const Container = styled(Box)(({ theme }) => ({
-    gridColumn: 'span 5',
+    gridColumn: 'span 6',
     backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(3),
     display: 'flex',

frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx

@@ -1,4 +1,5 @@
 import { Box, styled } from '@mui/material';
+import { ChangeRequests } from './ChangeRequests/ChangeRequests';
 import { LeadTimeForChanges } from './LeadTimeForChanges/LeadTimeForChanges';
 import { ProjectHealth } from './ProjectHealth/ProjectHealth';
 
@@ -18,20 +19,20 @@ const Overview = styled(Box)(({ theme }) => ({
     gridColumn: '1 / -1',
 }));
 
-const Health = styled(Container)(({ theme }) => ({
-    gridColumn: 'span 5',
+const HealthCard = styled(Container)(({ theme }) => ({
+    gridColumn: 'span 4',
 }));
 
-const ToggleTypesUsed = styled(Box)(({ theme }) => ({
+const ToggleTypesUsedCard = styled(Container)(({ theme }) => ({
     gridColumn: 'span 2',
 }));
 
-const ProjectMembers = styled(Box)(({ theme }) => ({
+const ProjectMembersCard = styled(Container)(({ theme }) => ({
     gridColumn: 'span 2',
 }));
 
-const ChangeRequests = styled(Box)(({ theme }) => ({
-    gridColumn: 'span 5',
+const ChangeRequestsCard = styled(Container)(({ theme }) => ({
+    gridColumn: 'span 6',
 }));
 
 export const ProjectInsights = () => {
@@ -41,13 +42,15 @@ export const ProjectInsights = () => {
                 Total changes / avg time to production / feature flags /stale
                 flags
             </Overview>
-            <Health>
+            <HealthCard>
                 <ProjectHealth />
-            </Health>
+            </HealthCard>
             <LeadTimeForChanges />
-            <ToggleTypesUsed>Toggle types used</ToggleTypesUsed>
-            <ProjectMembers>Project members</ProjectMembers>
-            <ChangeRequests>Change Requests</ChangeRequests>
+            <ToggleTypesUsedCard>Toggle types used</ToggleTypesUsedCard>
+            <ProjectMembersCard>Project members</ProjectMembersCard>
+            <ChangeRequestsCard>
+                <ChangeRequests />
+            </ChangeRequestsCard>
         </Grid>
     );
 };