feat: add Insights UI skeleton

packages/client/modules/teamDashboard/components/TeamDashHeader/TeamDashHeader.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {useFragment} from 'react-relay'
-import {useRouteMatch} from 'react-router'
 import {NavLink} from 'react-router-dom'
 import DashboardAvatars from '~/components/DashboardAvatars/DashboardAvatars'
 import AgendaToggle from '~/modules/teamDashboard/components/AgendaToggle/AgendaToggle'
@@ -112,10 +111,19 @@ const TeamDashHeader = (props: Props) => {
   )
   const {organization, id: teamId, name: teamName, teamMembers} = team
   const {name: orgName, id: orgId} = organization
-  const isTasks = useRouteMatch('/team/:teamId/tasks')
-  const isIntegrations = useRouteMatch('/team/:teamId/integrations')
   const {history} = useRouter()
 
+  const tabs = [
+    {label: 'Activity', path: 'activity'},
+    {label: 'Tasks', path: 'tasks'},
+    {label: 'Integrations', path: 'integrations'},
+    {label: 'Insights', path: 'insights'}
+  ]
+
+  const activePath = location.pathname.split('/').pop()
+  const activeTab = tabs.find((tab) => tab.path === activePath) ? activePath : 'activity'
+  const activeIdx = tabs.findIndex((tab) => tab.path === activeTab)
+
   return (
     <DashSectionHeader>
       <TeamHeaderAndAvatars>
@@ -158,12 +166,16 @@ const TeamDashHeader = (props: Props) => {
         </Avatars>
       </TeamHeaderAndAvatars>
       <Tabs
-        activeIdx={isTasks ? 1 : isIntegrations ? 2 : 0}
+        activeIdx={activeIdx}
         className='full-w max-w-none border-b border-solid border-slate-300'
       >
-        <Tab label='Activity' onClick={() => history.push(`/team/${teamId}/activity`)} />
-        <Tab label='Tasks' onClick={() => history.push(`/team/${teamId}/tasks`)} />
-        <Tab label='Integrations' onClick={() => history.push(`/team/${teamId}/integrations`)} />
+        {tabs.map((tab) => (
+          <Tab
+            key={tab.path}
+            label={tab.label}
+            onClick={() => history.push(`/team/${teamId}/${tab.path}`)}
+          />
+        ))}
       </Tabs>
     </DashSectionHeader>
   )

packages/client/modules/teamDashboard/components/TeamDashInsightsTab/TeamDashInsightsTab.tsx

@@ -0,0 +1,21 @@
+import React, {lazy} from 'react'
+
+interface Props {
+  teamId: string
+}
+
+const TeamInsightsRoot = lazy(
+  () => import(/* webpackChunkName: 'InsightsRoot' */ './TeamInsightsRoot')
+)
+
+const TeamDashInsightsTab = (props: Props) => {
+  const {teamId} = props
+  return (
+    <div className='flex w-full flex-wrap px-4'>
+      <div className='m-0'>
+        <TeamInsightsRoot teamId={teamId} />
+      </div>
+    </div>
+  )
+}
+export default TeamDashInsightsTab

packages/client/modules/teamDashboard/components/TeamDashInsightsTab/TeamInsights.tsx

@@ -0,0 +1,48 @@
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'
+import graphql from 'babel-plugin-relay/macro'
+import React from 'react'
+import {PreloadedQuery, usePreloadedQuery} from 'react-relay'
+import {TeamInsightsQuery} from '../../../../__generated__/TeamInsightsQuery.graphql'
+
+interface Props {
+  queryRef: PreloadedQuery<TeamInsightsQuery>
+}
+
+const query = graphql`
+  query TeamInsightsQuery($teamId: ID!) {
+    viewer {
+      team(teamId: $teamId) {
+        id
+        name
+      }
+    }
+  }
+`
+
+const Insights = (props: Props) => {
+  const {queryRef} = props
+  const data = usePreloadedQuery<TeamInsightsQuery>(query, queryRef)
+  // TODO: use the query rather than just console logging it
+  console.log('🚀 ~ data:', data)
+
+  return (
+    <div className='mb-8 space-y-6'>
+      <p className='text-sm text-slate-700'>
+        Only you (as <span className='font-bold'>Team Lead</span>) can see Team Insights. Insights
+        are auto-generated.{' '}
+        <a href='#' className='font-semibold text-sky-500 hover:underline'>
+          Give us feedback
+        </a>
+        .
+      </p>
+      <div className='mx-auto aspect-[1/1.414] max-w-3xl overflow-y-auto rounded-lg bg-white p-6 shadow-md'>
+        <h2 className='mb-4 flex items-center text-2xl font-semibold'>
+          <AutoAwesomeIcon className='mr-2 text-grape-500' />
+          <span>Insights - Aug to Sep 2024</span>
+        </h2>
+      </div>
+    </div>
+  )
+}
+
+export default Insights

packages/client/modules/teamDashboard/components/TeamDashInsightsTab/TeamInsightsRoot.tsx

@@ -0,0 +1,23 @@
+import React, {Suspense} from 'react'
+import teamInsightsQuery, {
+  TeamInsightsQuery
+} from '../../../../__generated__/TeamInsightsQuery.graphql'
+import useQueryLoaderNow from '../../../../hooks/useQueryLoaderNow'
+import TeamInsights from './TeamInsights'
+
+interface Props {
+  teamId: string
+}
+
+const TeamInsightsRoot = ({teamId}: Props) => {
+  const queryRef = useQueryLoaderNow<TeamInsightsQuery>(teamInsightsQuery, {
+    teamId
+  })
+  return (
+    <div className='flex flex-col items-center py-0 px-4'>
+      <Suspense fallback={''}>{queryRef && <TeamInsights queryRef={queryRef} />}</Suspense>
+    </div>
+  )
+}
+
+export default TeamInsightsRoot

packages/client/modules/teamDashboard/components/TeamDashMain/TeamDashMain.tsx

@@ -9,6 +9,7 @@ import useDocumentTitle from '../../../../hooks/useDocumentTitle'
 import getTeamIdFromPathname from '../../../../utils/getTeamIdFromPathname'
 import TeamTasksHeaderContainer from '../../containers/TeamTasksHeader/TeamTasksHeaderContainer'
 import TeamDashActivityTab from '../TeamDashActivityTab/TeamDashActivityTab'
+import TeamDashInsightsTab from '../TeamDashInsightsTab/TeamDashInsightsTab'
 import TeamDashIntegrationsTab from '../TeamDashIntegrationsTab/TeamDashIntegrationsTab'
 import TeamDashTasksTab from '../TeamDashTasksTab/TeamDashTasksTab'
 import TeamDrawer from './TeamDrawer'
@@ -59,6 +60,9 @@ const TeamDashMain = (props: Props) => {
           <Route path='/team/:teamId/integrations'>
             <TeamDashIntegrationsTab teamRef={teamId} />
           </Route>
+          <Route path='/team/:teamId/insights'>
+            <TeamDashInsightsTab teamId={teamId} />
+          </Route>
           {/*Fall back to activity view if nothing is specified*/}
           <Route path='/team/:teamId'>
             <TeamDashActivityTab teamRef={team} />