Intersection Dashboard UI Update

webapp/src/components/VerticalTabs.tsx

@@ -36,6 +36,7 @@ interface VerticalTabItem {
   adminRequired?: boolean
   child: React.ReactNode
   tag?: FEATURE_KEY
+  icon?: React.ReactNode
 }
 
 interface VerticalTabProps {
@@ -74,15 +75,15 @@ function VerticalTabs(props: VerticalTabProps) {
     <Box
       sx={{
         flexGrow: 1,
-        bgcolor: 'background.default',
+        bgcolor: theme.palette.background.default,
         display: 'flex',
         width: '100%',
         ...(props.height !== undefined && { height: props.height }),
       }}
     >
       <Box
         sx={{
-          bgcolor: 'background.paper',
+          bgcolor: theme.palette.background.paper,
         }}
       >
         <Tabs
@@ -92,14 +93,7 @@ function VerticalTabs(props: VerticalTabProps) {
           indicatorColor="secondary"
           textColor="inherit"
           orientation="vertical"
-          sx={{ width: 170 }}
-          TabIndicatorProps={{
-            style: {
-              right: 'auto', // remove the default right positioning
-              left: 0, // add left positioning
-              width: 5, // width of the indicator
-            },
-          }}
+          sx={{ width: 250 }}
         >
           {filteredTabs.map((tab) => {
             const index = filteredTabs.indexOf(tab)
@@ -110,22 +104,21 @@ function VerticalTabs(props: VerticalTabProps) {
                 value={tab.path}
                 component={Link}
                 to={tab.path}
+                icon={<>{tab.icon}</>}
                 sx={{
-                  backgroundColor: value === tab.path || value === index ? theme.palette.primary.main : 'transparent',
                   fontSize: 20,
-                  height: '80px',
-                  alignItems: 'flex-start',
+                  height: '60px',
+                  alignItems: 'center',
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
                   textTransform: 'none',
                   borderRadius: 1,
-                  '&&': {
-                    color:
-                      value === tab.path || value === index
-                        ? theme.palette.primary.contrastText
-                        : theme.palette.text.primary,
-                    border:
-                      value === tab.path || value === index
-                        ? 'none'
-                        : `0.5px solid ${alpha(theme.palette.divider, 0.2)}`,
+                  fontWeight: value === tab.path || value === index ? 'bold' : 'normal',
+                  color: theme.palette.text.primary,
+                  backgroundColor: 'transparent',
+                  '&:hover': {
+                    backgroundColor: alpha(theme.palette.primary.main, 0.2),
                   },
                 }}
               />

webapp/src/components/intersections/DashboardPage.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, Grid2 } from '@mui/material'
+import { Box, Grid2, useTheme } from '@mui/material'
 import { NotificationsTable } from '../../features/intersections/notifications/notifications-table'
 import { ConnectionOfTravelAssessmentCard } from '../../features/intersections/assessments/connection-of-travel-assessment'
 import { LaneDirectionOfTravelAssessmentCard } from '../../features/intersections/assessments/lane-direction-of-travel-assessment'
@@ -11,10 +11,10 @@ import { selectToken } from '../../generalSlices/userSlice'
 import { useSelector } from 'react-redux'
 
 const Page = () => {
-  const [assessment, setAssessments] = useState<Assessment[]>([])
   const intersectionId = useSelector(selectSelectedIntersectionId)
   const roadRegulatorId = useSelector(selectSelectedRoadRegulatorId)
   const token = useSelector(selectToken)
+  const theme = useTheme()
 
   // create hooks, and methods for each assessment type:
   const [stopLineStopAssessment, setStopLineStopAssessment] = useState<StopLineStopAssessment | undefined>(undefined)
@@ -81,17 +81,30 @@ const Page = () => {
           py: 8,
         }}
       >
-        <Container maxWidth={false}>
-          <Grid2 container spacing={3} alignItems="flex-start">
+        <Grid2
+          container
+          spacing={0.5}
+          sx={{
+            marginTop: theme.spacing(3),
+          }}
+          justifyContent="center"
+        >
+          <Grid2 size={{ xs: 12, md: 6, lg: 3 }}>
             <ConnectionOfTravelAssessmentCard assessment={connectionOfTravelAssessment} />
+          </Grid2>
+          <Grid2 size={{ xs: 12, md: 6, lg: 3 }}>
             <StopLineStopAssessmentCard assessment={stopLineStopAssessment} />
+          </Grid2>
+          <Grid2 size={{ xs: 12, md: 6, lg: 3 }}>
             <SignalStateEventAssessmentCard assessment={signalStateEventAssessment} />
+          </Grid2>
+          <Grid2 size={{ xs: 12, md: 6, lg: 3 }}>
             <LaneDirectionOfTravelAssessmentCard assessment={laneDirectionOfTravelAssessment} />
-            <Grid2 size={{ xs: 12 }}>
-              <NotificationsTable simple={true} />
-            </Grid2>
           </Grid2>
-        </Container>
+          <Grid2 size={12}>
+            <NotificationsTable simple={true} />
+          </Grid2>
+        </Grid2>
       </Box>
     </>
   )

webapp/src/components/intersections/DataSelectorPage.tsx

@@ -280,22 +280,10 @@ const DataSelectorPage = () => {
           backgroundColor: 'background.default',
           flexGrow: 1,
           py: 8,
+          width: '100%',
         }}
       >
-        <Container maxWidth={false}>
-          <Box
-            sx={{
-              alignItems: 'center',
-              display: 'flex',
-              overflow: 'hidden',
-            }}
-          >
-            <div>
-              <Typography noWrap variant="h4" color="text.secondary">
-                Query
-              </Typography>
-            </div>
-          </Box>
+        <Container maxWidth={false} disableGutters>
           <Box mt={3}>
             <DataSelectorEditForm
               onQuery={query}

webapp/src/components/intersections/ReportsPage.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { Box, Button, Stack, Typography } from '@mui/material'
-import { styled } from '@mui/material/styles'
-import { FilterAlt } from '@mui/icons-material'
+import { Box, Container, Grid2, Typography } from '@mui/material'
+import { styled, useTheme } from '@mui/material/styles'
 import { ReportListFilters } from '../../features/intersections/reports/report-list-filters'
 import { ReportListTable } from '../../features/intersections/reports/report-list-table'
 import ReportsApi, { ReportMetadata } from '../../apis/intersections/reports-api'
@@ -12,41 +11,17 @@ import { useSelector } from 'react-redux'
 
 const applyPagination = (logs, page, rowsPerPage) => logs.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
 
-const LogsListInner = styled('div', { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme, open }: { theme: any; open: boolean }) => ({
-    flexGrow: 1,
-    overflow: 'hidden',
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3),
-    paddingTop: theme.spacing(8),
-    paddingBottom: theme.spacing(8),
-    zIndex: 1,
-    marginLeft: -380,
-    transition: theme.transitions.create('margin', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    ...(open && {
-      marginLeft: 0,
-      transition: theme.transitions.create('margin', {
-        easing: theme.transitions.easing.easeOut,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    }),
-  })
-) as React.FC<{ open: boolean; theme: any }>
-
 const Page = () => {
   const rootRef = useRef(null)
   const intersectionId = useSelector(selectSelectedIntersectionId)
   const roadRegulatorId = useSelector(selectSelectedRoadRegulatorId)
   const token = useSelector(selectToken)
+  const theme = useTheme()
 
   const [group, setGroup] = useState(true)
   const [logs, setLogs] = useState<ReportMetadata[]>([])
   const [page, setPage] = useState(0)
   const [rowsPerPage, setRowsPerPage] = useState(5)
-  const [openFilters, setOpenFilters] = useState(true)
   const [loading, setLoading] = useState(false)
   const [filters, setFilters] = useState({
     query: '',
@@ -101,23 +76,11 @@ const Page = () => {
     [filters, intersectionId]
   )
 
-  const handleChangeGroup = (event) => {
-    setGroup(event.target.checked)
-  }
-
-  const handleToggleFilters = () => {
-    setOpenFilters((prevState) => !prevState)
-  }
-
   const handleChangeFilters = (newFilters) => {
     setFilters(newFilters)
     setPage(0)
   }
 
-  const handleCloseFilters = () => {
-    setOpenFilters(false)
-  }
-
   const handlePageChange = (event, newPage) => {
     setPage(newPage)
   }
@@ -130,52 +93,36 @@ const Page = () => {
   const paginatedLogs = applyPagination(logs, page, rowsPerPage)
 
   return (
-    <>
-      <Box
+    <Box>
+      <Grid2
+        container
         component="main"
         ref={rootRef}
         sx={{
-          backgroundColor: 'background.default',
+          backgroundColor: theme.palette.background.paper,
           display: 'flex',
           flexGrow: 1,
           overflow: 'hidden',
+          mt: 11,
+          mb: 1,
         }}
+        justifyContent="flex-start"
       >
-        <ReportListFilters
-          containerRef={rootRef}
-          filters={filters}
-          onChange={handleChangeFilters}
-          onClose={handleCloseFilters}
-          open={openFilters}
-          loading={loading}
-          setOpenReportGenerationDialog={setOpenReportGenerationDialog}
-        />
-        <LogsListInner open={openFilters} theme={undefined}>
-          <Box sx={{ mb: 3 }}>
-            <Stack spacing={3} maxWidth="sm">
-              <Typography noWrap variant="h4" color="text.secondary">
-                Reports
-              </Typography>
-              <Box>
-                <Button
-                  endIcon={<FilterAlt fontSize="small" />}
-                  onClick={handleToggleFilters}
-                  variant="outlined"
-                  fullWidth={false}
-                  size="small"
-                >
-                  Filters
-                </Button>
-              </Box>
-            </Stack>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-                mt: 3,
-              }}
-            ></Box>
-          </Box>
+        <Grid2 size={12}>
+          <Typography variant="h6" sx={{ m: 2 }}>
+            Generate Report
+          </Typography>
+        </Grid2>
+        <Grid2 size={12}>
+          <ReportListFilters
+            containerRef={rootRef}
+            filters={filters}
+            onChange={handleChangeFilters}
+            loading={loading}
+            setOpenReportGenerationDialog={setOpenReportGenerationDialog}
+          />
+        </Grid2>
+        <Grid2 size={12} sx={{ my: 3 }}>
           <ReportListTable
             group={group}
             reports={paginatedLogs}
@@ -185,15 +132,15 @@ const Page = () => {
             page={page}
             rowsPerPage={rowsPerPage}
           />
-        </LogsListInner>
-      </Box>
+        </Grid2>
+      </Grid2>
       <ReportGenerationDialog
         open={openReportGenerationDialog}
         onClose={() => {
           setOpenReportGenerationDialog(false)
         }}
       />
-    </>
+    </Box>
   )
 }
 

webapp/src/features/intersections/assessments/connection-of-travel-assessment.tsx

@@ -1,10 +1,11 @@
-import { Card, CardContent, Grid2, Typography } from '@mui/material'
+import { Card, CardContent, Grid2, Typography, useTheme } from '@mui/material'
 import React from 'react'
 import { BarChart, CartesianGrid, XAxis, YAxis, Legend, Bar, Tooltip, TooltipProps } from 'recharts'
 import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent'
 
 export const ConnectionOfTravelAssessmentCard = (props: { assessment: ConnectionOfTravelAssessment | undefined }) => {
   const { assessment } = props
+  const theme = useTheme()
 
   function getWidthFactorFromData(data: any[] | undefined): number {
     if (!data) return 0.1
@@ -68,16 +69,16 @@ export const ConnectionOfTravelAssessmentCard = (props: { assessment: Connection
   const hasInvalidEvents = data?.some((item) => item.eventCountInvalid > 0)
 
   return (
-    <Grid2 width={assessment === undefined ? 200 : 80 + widthFactor * 1600}>
+    <Grid2 width={assessment === undefined ? '100%' : 80 + widthFactor * 1600}>
       <Card sx={{ height: '100%', overflow: 'visible' }}>
         <CardContent>
-          <Grid2 container spacing={3} sx={{ justifyContent: 'space-between' }}>
+          <Grid2 container spacing={1} sx={{ justifyContent: 'flex-start' }}>
             <Grid2>
-              <Typography color="textSecondary" gutterBottom variant="overline">
+              <Typography color="textSecondary" gutterBottom variant="h6">
                 Connection of Travel Assessment
               </Typography>
               {assessment === undefined ? (
-                <Typography color="textPrimary" variant="h5" key={''}>
+                <Typography color="textPrimary" fontSize="small" key={''}>
                   No Data
                 </Typography>
               ) : (

webapp/src/features/intersections/assessments/lane-direction-of-travel-assessment.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, Grid2, Typography } from '@mui/material'
+import { Card, CardContent, Grid2, Typography, useTheme } from '@mui/material'
 import React from 'react'
 import { BarChart, CartesianGrid, XAxis, YAxis, Legend, Bar, Tooltip, TooltipProps } from 'recharts'
 import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent'
@@ -8,6 +8,8 @@ export const LaneDirectionOfTravelAssessmentCard = (props: {
 }) => {
   const { assessment } = props
 
+  const theme = useTheme()
+
   function getWidthFactorFromData(data: any[] | undefined): number {
     if (!data) return 0.1
     const maxFactor = 0.9
@@ -119,16 +121,16 @@ export const LaneDirectionOfTravelAssessmentCard = (props: {
   }
 
   return (
-    <Grid2 width={assessment === undefined ? 200 : 80 + widthFactor * 1200}>
+    <Grid2 width={assessment === undefined ? '100%' : 80 + widthFactor * 1200}>
       <Card sx={{ height: '100%', overflow: 'visible' }}>
         <CardContent>
           <Grid2 container spacing={3} sx={{ justifyContent: 'space-between' }}>
             <Grid2>
-              <Typography color="textSecondary" gutterBottom variant="overline">
+              <Typography color="textSecondary" gutterBottom variant="h6">
                 Lane Direction of Travel Assessment
               </Typography>
               {assessment === undefined ? (
-                <Typography color="textPrimary" variant="h5" key={''}>
+                <Typography color="textPrimary" fontSize="small" key={''}>
                   No Data
                 </Typography>
               ) : (