Update project overview layout

ui/src/app.tsx

@@ -21,12 +21,18 @@ import { CollectionDetails } from 'pages/collection-details/collection-details'
 import { Deployments } from 'pages/deployments/deployments'
 import { Jobs } from 'pages/jobs/jobs'
 import { Occurrences } from 'pages/occurrences/occurrences'
+import { Collections } from 'pages/overview/collections/collections'
+import { Devices } from 'pages/overview/entities/devices'
+import { Sites } from 'pages/overview/entities/sites'
 import Overview from 'pages/overview/overview'
+import { Pipelines } from 'pages/overview/pipelines/pipelines'
+import { ProcessingServices } from 'pages/overview/processing-services/processing-services'
+import { Storage } from 'pages/overview/storage/storage'
+import { Summary } from 'pages/overview/summary/summary'
 import { Projects } from 'pages/projects/projects'
 import SessionDetails from 'pages/session-details/session-details'
 import { Sessions } from 'pages/sessions/sessions'
 import { Species } from 'pages/species/species'
-import { UnderConstruction } from 'pages/under-construction/under-construction'
 import { ReactNode, useContext, useEffect } from 'react'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
 import {
@@ -91,15 +97,29 @@ export const App = () => (
         </Route>
         <Route path="projects" element={<ProjectsContainer />} />
         <Route path="projects/:projectId" element={<ProjectContainer />}>
-          <Route path="" element={<Overview />} />
+          <Route path="" element={<Overview />}>
+            <Route
+              path=""
+              element={<Navigate to={{ pathname: 'summary' }} replace={true} />}
+            />
+            <Route path="summary" element={<Summary />} />
+            <Route path="collections" element={<Collections />} />
+            <Route path="collections/:id" element={<CollectionDetails />} />
+            <Route
+              path="processing-services/:id?"
+              element={<ProcessingServices />}
+            />
+            <Route path="pipelines/:id?" element={<Pipelines />} />
+            <Route path="sites" element={<Sites />} />
+            <Route path="devices" element={<Devices />} />
+            <Route path="storage" element={<Storage />} />
+          </Route>
           <Route path="jobs/:id?" element={<Jobs />} />
           <Route path="deployments/:id?" element={<Deployments />} />
           <Route path="sessions" element={<Sessions />} />
           <Route path="sessions/:id" element={<SessionDetails />} />
           <Route path="occurrences/:id?" element={<Occurrences />} />
           <Route path="taxa/:id?" element={<Species />} />
-          <Route path="collections/:id" element={<CollectionDetails />} />
-          <Route path="*" element={<UnderConstruction />} />
         </Route>
         <Route
           path="/terms-of-service"
@@ -181,15 +201,19 @@ const ProjectContainer = () => {
   })
 
   useEffect(() => {
-    setProjectBreadcrumb({
-      title: projectDetails.project?.name ?? '',
-      path: APP_ROUTES.PROJECT_DETAILS({ projectId: projectId as string }),
-    })
+    if (projectDetails.error) {
+      setProjectBreadcrumb(undefined)
+    } else {
+      setProjectBreadcrumb({
+        title: projectDetails.project?.name ?? '',
+        path: APP_ROUTES.PROJECT_DETAILS({ projectId: projectId as string }),
+      })
+    }
 
     return () => {
       setProjectBreadcrumb(undefined)
     }
-  }, [projectDetails.project])
+  }, [projectDetails.project, projectDetails.error])
 
   return (
     <>

ui/src/components/breadcrumbs/breadcrumbs.module.scss

@@ -5,8 +5,8 @@
   display: flex;
   align-items: center;
 
-  :not(:last-child) {
-    margin-right: 8px;
+  > :not(:last-child) {
+    margin-right: 16px;
   }
 }
 

ui/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon'
+import { ChevronRightIcon } from 'lucide-react'
 import { Fragment, useContext, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { Breadcrumb, BreadcrumbContext } from 'utils/breadcrumbContext'
@@ -22,9 +22,9 @@ export const Breadcrumbs = ({
   } = useContext(BreadcrumbContext)
 
   useEffect(() => {
-    const activeNavItem =
-      activeNavItemId !== 'overview' &&
-      navItems.find((navItem) => navItem.id === activeNavItemId)
+    const activeNavItem = navItems.find(
+      (navItem) => navItem.id === activeNavItemId
+    )
 
     setMainBreadcrumb(
       activeNavItem
@@ -70,11 +70,7 @@ export const Breadcrumbs = ({
               </Link>
             )}
             {!isLast && (
-              <Icon
-                type={IconType.ToggleRight}
-                theme={IconTheme.Neutral}
-                size={8}
-              />
+              <ChevronRightIcon className="w-3 h-3 text-muted-foreground/50" />
             )}
           </Fragment>
         )

ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts

@@ -10,8 +10,7 @@ const convertServerRecord = (record: ServerProcessingService) =>
   new ProcessingService(record)
 
 export const useProcessingServiceDetails = (
-  processingServiceId: string,
-  queryParams: { projectId: string }
+  processingServiceId: string
 ): {
   processingService?: ProcessingService
   isLoading: boolean
@@ -21,7 +20,7 @@ export const useProcessingServiceDetails = (
   const { data, isLoading, isFetching, error } =
     useAuthorizedQuery<ProcessingService>({
       queryKey: [API_ROUTES.PROCESSING_SERVICES, processingServiceId],
-      url: `${API_URL}/${API_ROUTES.PROCESSING_SERVICES}/${processingServiceId}/?project_id=${queryParams.projectId}`,
+      url: `${API_URL}/${API_ROUTES.PROCESSING_SERVICES}/${processingServiceId}`,
     })
 
   const processingService = useMemo(

ui/src/design-system/components/box/box.module.scss

@@ -4,7 +4,7 @@
 .box {
   background: $color-generic-white;
   width: 100%;
-  border-radius: 4px;
+  border-radius: 6px;
   border: 1px solid $color-neutral-100;
   overflow-x: auto;
 }

ui/src/design-system/components/pagination-bar/pagination-bar.tsx

@@ -6,21 +6,28 @@ import { PageButton } from './page-button/page-button'
 import styles from './pagination-bar.module.scss'
 
 interface PaginationBarProps {
+  compact?: boolean
   pagination: {
     page: number
     perPage: number
   }
-  total: number
   setPage: (page: number) => void
+  total: number
 }
 
 export const PaginationBar = ({
+  compact,
   pagination,
-  total,
   setPage,
+  total,
 }: PaginationBarProps) => {
   const { page: currentPage, perPage } = pagination
   const numPages = Math.ceil(total / perPage)
+
+  if (compact && numPages === 1) {
+    return null
+  }
+
   const firstPage = 0
   const lastPage = numPages - 1
   const pageWindow = getPageWindow(currentPage, numPages)

ui/src/design-system/components/plot-grid/plot-grid.module.scss

@@ -6,7 +6,7 @@
 .grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  gap: 16px;
+  gap: 24px;
 }
 
 /* Adjust number of columns based on container width, to avoid horizontal scrolling.
@@ -15,13 +15,13 @@
  * maxWidth = plotWidth * numBoxes + gapSize * (numBoxes - 1)
  */
 
-@container container (max-width: calc(384px * 3 + 16px * 2)) {
+@container container (max-width: calc(384px * 3 + 24px * 2)) {
   .grid {
     grid-template-columns: 1fr 1fr;
   }
 }
 
-@container container (max-width: calc(384px * 2 + 16px * 1)) {
+@container container (max-width: calc(384px * 2 + 24px * 1)) {
   .grid {
     grid-template-columns: 1fr;
   }

ui/src/design-system/map/styles.module.scss

@@ -7,7 +7,7 @@
   width: 100%;
   height: 320px;
   border: 1px solid $color-neutral-100;
-  border-radius: 4px;
+  border-radius: 6px;
   overflow: hidden;
   position: relative;
   z-index: 0;

ui/src/pages/collection-details/collection-details.tsx

@@ -7,9 +7,8 @@ import { PaginationBar } from 'design-system/components/pagination-bar/paginatio
 import { Table } from 'design-system/components/table/table/table'
 import { TableSortSettings } from 'design-system/components/table/types'
 import { ToggleGroup } from 'design-system/components/toggle-group/toggle-group'
-import { useContext, useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useParams } from 'react-router-dom'
-import { BreadcrumbContext } from 'utils/breadcrumbContext'
 import { STRING, translate } from 'utils/language'
 import { usePagination } from 'utils/usePagination'
 import { useSelectedView } from 'utils/useSelectedView'
@@ -21,17 +20,8 @@ export const CollectionDetails = () => {
   const { selectedView, setSelectedView } = useSelectedView('table')
 
   // Collection details
-  const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
   const { collection } = useCollectionDetails(id as string)
 
-  useEffect(() => {
-    setDetailBreadcrumb(collection ? { title: collection.name } : undefined)
-
-    return () => {
-      setDetailBreadcrumb(undefined)
-    }
-  }, [collection])
-
   // Collection captures
   const [sort, setSort] = useState<TableSortSettings>()
   const { pagination, setPage } = usePagination()

ui/src/pages/overview/collections/collections.tsx

@@ -33,7 +33,7 @@ export const Collections = () => {
   return (
     <>
       <PageHeader
-        title={translate(STRING.TAB_ITEM_COLLECTIONS)}
+        title={translate(STRING.NAV_ITEM_COLLECTIONS)}
         subTitle={translate(STRING.RESULTS, {
           total,
         })}
@@ -59,9 +59,10 @@ export const Collections = () => {
       />
       {collections?.length ? (
         <PaginationBar
+          compact
           pagination={pagination}
-          total={total}
           setPage={setPage}
+          total={total}
         />
       ) : null}
     </>

ui/src/pages/overview/entities/devices.tsx

@@ -0,0 +1,12 @@
+import { API_ROUTES } from 'data-services/constants'
+import { STRING, translate } from 'utils/language'
+import { Entities } from './entities'
+
+export const Devices = () => (
+  <Entities
+    title={translate(STRING.NAV_ITEM_DEVICES)}
+    collection={API_ROUTES.DEVICES}
+    type="device"
+    tooltip={translate(STRING.TOOLTIP_DEVICE)}
+  />
+)

ui/src/pages/overview/entities/entities.tsx

@@ -62,9 +62,10 @@ export const Entities = ({
       />
       {entities?.length ? (
         <PaginationBar
+          compact
           pagination={pagination}
-          total={total}
           setPage={setPage}
+          total={total}
         />
       ) : null}
     </>

ui/src/pages/overview/entities/sites.tsx

@@ -0,0 +1,12 @@
+import { API_ROUTES } from 'data-services/constants'
+import { STRING, translate } from 'utils/language'
+import { Entities } from './entities'
+
+export const Sites = () => (
+  <Entities
+    title={translate(STRING.NAV_ITEM_SITES)}
+    collection={API_ROUTES.SITES}
+    type="site"
+    tooltip={translate(STRING.TOOLTIP_SITE)}
+  />
+)