feat: overview page

backend/src/api/dashboard/dashboardMetricsGet.ts

@@ -0,0 +1,12 @@
+import DashboardService from '@/services/dashboardService'
+
+import Permissions from '../../security/permissions'
+import PermissionChecker from '../../services/user/permissionChecker'
+
+export default async (req, res) => {
+  new PermissionChecker(req).validateHas(Permissions.values.memberRead)
+
+  const payload = await new DashboardService(req).getMetrics(req.query)
+
+  await req.responseHandler.success(req, res, payload)
+}

backend/src/api/dashboard/index.ts

@@ -2,4 +2,5 @@ import { safeWrap } from '../../middlewares/errorMiddleware'
 
 export default (app) => {
   app.get(`/dashboard`, safeWrap(require('./dashboardGet').default))
+  app.get(`/dashboard/metrics`, safeWrap(require('./dashboardMetricsGet').default))
 }

backend/src/services/dashboardService.ts

@@ -1,6 +1,9 @@
+import { getMetrics } from '@crowd/data-access-layer/src/dashboards'
 import { RedisCache } from '@crowd/redis'
 import { DashboardTimeframe } from '@crowd/types'
 
+import SequelizeRepository from '../database/repositories/sequelizeRepository'
+
 import { IServiceOptions } from './IServiceOptions'
 
 interface IDashboardQueryParams {
@@ -9,6 +12,10 @@ interface IDashboardQueryParams {
   timeframe: DashboardTimeframe
 }
 
+interface IDashboardMetricsQueryParams {
+  segment?: string
+}
+
 export default class DashboardService {
   options: IServiceOptions
 
@@ -75,4 +82,19 @@ export default class DashboardService {
 
     return JSON.parse(data)
   }
+
+  async getMetrics(params: IDashboardMetricsQueryParams) {
+    try {
+      if (!params.segment) {
+        this.options.log.warn('No segment ID provided for metrics query')
+      }
+
+      const qx = SequelizeRepository.getQueryExecutor(this.options)
+      const metrics = await getMetrics(qx, params.segment)
+      return metrics
+    } catch (error) {
+      this.options.log.error('Failed to fetch dashboard metrics', { error, params })
+      throw new Error('Unable to fetch dashboard metrics')
+    }
+  }
 }

frontend/package.json

@@ -33,6 +33,7 @@
     "@linuxfoundation/lfx-ui-core": "^0.0.20",
     "@nangohq/frontend": "^0.9.0",
     "@nangohq/frontend-v2": "npm:@nangohq/frontend@^0.52.4",
+    "@sxzz/popperjs-es": "^2.11.7",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tanstack/vue-query": "^5.75.1",
     "@tanstack/vue-query-devtools": "^5.75.1",
@@ -49,6 +50,7 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.27.5",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "logrocket": "^3.0.1",
     "logrocket-vuex": "^0.0.3",
     "marked": "^4.3.0",

frontend/src/config/integrations/confluence/config.ts

@@ -4,22 +4,24 @@ import ConfluenceParams from './components/confluence-params.vue';
 import ConfluenceDropdown from './components/confluence-dropdown.vue';
 import LfConfluenceSettingsDrawer from './components/confluence-settings-drawer.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/confluence.svg',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/confluence.svg', import.meta.url).href;
 
 const confluence: IntegrationConfig = {
   key: 'confluence',
   name: 'Confluence',
   image,
-  description:
-    'Connect Confluence to sync documentation activities from your repos.',
+  description: 'Connect Confluence to sync documentation activities from your repos.',
   connectComponent: ConfluenceConnect,
   connectedParamsComponent: ConfluenceParams,
   dropdownComponent: ConfluenceDropdown,
   settingComponent: LfConfluenceSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default confluence;

frontend/src/config/integrations/devto/config.ts

@@ -2,18 +2,22 @@ import { IntegrationConfig } from '@/config/integrations';
 import DevtoConnect from './components/devto-connect.vue';
 import DevtoParams from './components/devto-params.vue';
 
-const image = new URL('@/assets/images/integrations/devto.png', import.meta.url)
-  .href;
+const image = new URL('@/assets/images/integrations/devto.png', import.meta.url).href;
 
 const devto: IntegrationConfig = {
   key: 'devto',
   name: 'DEV',
   image,
-  description:
-    'Connect DEV to sync profile information and comments on articles.',
+  description: 'Connect DEV to sync profile information and comments on articles.',
   connectComponent: DevtoConnect,
   connectedParamsComponent: DevtoParams,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default devto;