Feat/opening metrics

frontend/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@aws-amplify/ui-react": "^6.1.4",
     "@bcgov-nr/nr-theme": "^1.7.0",
+    "@carbon/charts-react": "^1.13.32",
     "@carbon/pictograms-react": "^11.49.0",
     "@carbon/react": "^1.27.0",
     "@redux-devtools/extension": "^3.3.0",

frontend/src/App.tsx

@@ -14,6 +14,7 @@ import Dashboard from './screens/Dashboard';
 import PostLoginRoute from './routes/PostLoginRoute';
 import ProtectedRoute from './routes/ProtectedRoute';
 import Opening from './screens/Opening';
+import OpeningMetrics from './screens/OpeningMetrics';
 
 Amplify.configure(amplifyconfig);
 
@@ -32,6 +33,11 @@ const App: React.FC = () => {
             <SideLayout pageContent={<Opening/>} />
           </ProtectedRoute>
         } />
+        <Route path="/openings-metrics" element={
+          <ProtectedRoute signed={true}>
+            <SideLayout pageContent={<OpeningMetrics/>} />
+          </ProtectedRoute>
+        } />
         <Route path="/reports" element={
           <ProtectedRoute signed={true}>
             <SideLayout pageContent={<Reports/>} />

frontend/src/components/ActionsTable/index.jsx

@@ -0,0 +1,36 @@
+import { Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from "@carbon/react";
+import StatusTag from "../StatusTag";
+import { rows, headers } from "./testData";
+import ActivityTag from "../ActivityTag";
+const ActionsTable = () => {
+  return (
+    <Table size="lg" useZebraStyles={false} aria-label="sample table">
+      <TableHead>
+        <TableRow>
+          {headers.map(header => <TableHeader id={header.key} key={header.key}>
+              {header.header}
+            </TableHeader>)}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {rows.map((row, idx) => <TableRow key={idx}>
+        {Object.keys(row).filter(key => key !== 'id').map(key => {
+          return (
+          <TableCell key={key}>
+            {key === "status" ? (
+              <StatusTag type={row[key]} />
+            ):
+            key === "activityType" ? (
+              <ActivityTag type={row[key]} />
+            ):
+            row[key]}
+          </TableCell>
+          );
+        })}
+          </TableRow>)}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default ActionsTable;

frontend/src/components/RecentOpeningsTable/styles.scss → frontend/src/components/ActionsTable/styles.scss

@@ -1,5 +1,5 @@
+@use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors;
 @use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
-
 .activity-table {
   margin-bottom: 2.5rem;
 
@@ -25,6 +25,28 @@
   }
 }
 
+.#{vars.$bcgov-prefix}--data-table thead tr th#blank {
+  min-width:50px;
+}
+
+.#{vars.$bcgov-prefix}--data-table thead tr th  {
+  background-color: #F3F3F5;
+  border-top: 1px solid #DFDFE1;
+}
+
+.#{vars.$bcgov-prefix}--data-table thead tr th {
+  min-width:158px;
+}
+
+.#{vars.$bcgov-prefix}--data-table tr td {
+  background-color: white;
+  color:black;
+  height: 64px;
+}
+.#{vars.$bcgov-prefix}--data-table tr:hover td {
+  background-color: #F3F3F5;
+}
+
 @media only screen and (max-width: 672px) {
   .#{vars.$bcgov-prefix}--data-table-content {
     width: 100%;

frontend/src/components/ActionsTable/testData.js

@@ -0,0 +1,52 @@
+export const rows = [
+  {
+    activityType: 'Opening details',
+    openingID: '1541297',
+    status: 'Pending',
+    lastUpdated: 'Now'
+  },
+  {
+    activityType: 'Opening report',
+    openingID: '1541297',
+    status: 'Submitted',
+    lastUpdated: '1 minute ago'
+  },
+  {
+    activityType: 'Opening spatial',
+    openingID: '1541297',
+    status: 'Approved',
+    lastUpdated: 'Aug 20, 2023'
+  },
+  {
+    activityType:'Opening spatial', 
+    openingID:'1541297', 
+    status:'Approved', 
+    lastUpdated:'Nov 20, 2023'
+   },
+   {
+    activityType:'Opening details', 
+    openingID:'1541299', 
+    status:'In progress', 
+    lastUpdated:'Now'
+   }
+];
+
+  export const headers = [
+    {
+      key: 'activityType',
+      header: 'Activity Type',
+    },
+    {
+      key: 'openingID',
+      header: 'Opening ID',
+    },
+    {
+      key: 'status',
+      header: 'Status',
+    },
+    {
+      key: 'lastUpdated',
+      header: 'Last Updated',
+    }
+  ];
+

frontend/src/components/ActivityTag/definitions.ts

@@ -0,0 +1,6 @@
+export const ActivityIconMap = {
+  'Opening details': 'MapBoundary',
+  'Opening report': 'Document',
+  'Opening spatial': 'Map',
+  'Unkown': 'Help',
+};

frontend/src/components/ActivityTag/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import * as Carbon from '@carbon/icons-react';
+
+import { ActivityIconMap } from './definitions';
+
+import './styles.scss';
+
+type ActivityTagProps = {
+  type: keyof typeof ActivityIconMap
+}
+
+const ActivityTag = ({ type }: ActivityTagProps) => {
+  const tagType: keyof typeof ActivityIconMap = Object.keys(ActivityIconMap).includes(type) ? type : 'Unkown';
+  const iconName = ActivityIconMap[tagType]; // get the icon name by the type name
+  const Icon = Carbon[iconName]; // get the icon component by the icon name
+  return (
+    <>
+    <Icon size={18} /> {type} 
+    </>
+  );
+};
+
+export default ActivityTag;

frontend/src/components/ActivityTag/styles.scss

@@ -0,0 +1,3 @@
+.activity-tag {
+  white-space: nowrap;
+}

frontend/src/components/BCHeaderwSide/index.tsx

@@ -47,6 +47,12 @@ const listItems = [
         link: '/opening',
         disabled: false
       },
+      {
+        name: 'Opening Metrics',
+        icon: 'Dashboard',
+        link: '/openings-metrics',
+        disabled: false
+      },
     ]
   },
   {

frontend/src/components/BarChartGrouped/BarChartGrouped.scss

@@ -0,0 +1,2 @@
+@use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors;
+@use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;

frontend/src/components/BarChartGrouped/index.jsx

@@ -0,0 +1,97 @@
+import { GroupedBarChart } from "@carbon/charts-react";
+import "@carbon/charts/styles.css";
+
+const BarChartGrouped = () => {
+  const colors = {
+    "Openings": "#1192E8",
+  };
+
+  const data = [
+    {
+      group: "Openings",
+      key: "Mar",
+      value: 70,
+    },
+    {
+      group: "Openings",
+      key: "Apr",
+      value: 300,
+    },
+    {
+      group: "Openings",
+      key: "May",
+      value: 200,
+    },
+    {
+      group: "Openings",
+      key: "Jun",
+      value: 140,
+    },
+    {
+      group: "Openings",
+      key: "Jul",
+      value: 180,
+    },
+    {
+      group: "Openings",
+      key: "Aug",
+      value: 100,
+    },
+    {
+      group: "Openings",
+      key: "Sep",
+      value: 40,
+    },
+    {
+      group: "Openings",
+      key: "Oct",
+      value: 90,
+    },
+    {
+      group: "Openings",
+      key: "Nov",
+      value: 160,
+    },
+    {
+      group: "Openings",
+      key: "Dec",
+      value: 70,
+    },
+    {
+      group: "Openings",
+      key: "Jan",
+      value: 125,
+    },
+    {
+      group: "Openings",
+      key: "Feb",
+      value: 250,
+    }
+  ];
+
+  const options = {
+    title: "",
+    axes: {
+      left: {
+        mapsTo: "value",
+      },
+      bottom: {
+        scaleType: "labels",
+        mapsTo: "key",
+      },
+    },
+    color: {
+      scale: colors,
+    },
+    height: "23.5rem",
+  };
+
+  return (
+    <GroupedBarChart
+      data={data}
+      options={options}
+    ></GroupedBarChart>
+  );
+};
+
+export default BarChartGrouped;

frontend/src/components/ChartContainer/ChartContainer.scss

@@ -0,0 +1,11 @@
+@use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors;
+@use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
+
+.chart-container{
+    border: 1px solid #DFDFE1;
+    border-radius: 4px;
+    height: 100%;
+}
+.chart-container .content{
+    padding: 1.25rem;
+}

frontend/src/components/ChartContainer/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import SectionTitle from '../SectionTitle';
+import './ChartContainer.scss'
+import ChartTitle from '../ChartTitle';
+
+type Props = {
+  children?: React.ReactNode;
+  title:string;
+  description:string;
+};
+
+export default function ChartContainer({ children, title, description }: Props) {
+  return (
+    <div className='chart-container'>
+        <ChartTitle title={title} subtitle={description} />
+        <div className="content">
+            {children}
+        </div>
+    </div>
+  );
+}

frontend/src/components/ChartTitle/index.tsx

@@ -0,0 +1,32 @@
+import {
+  Column
+} from '@carbon/react';
+
+import Subtitle from '../Subtitle';
+
+import './styles.scss';
+
+interface ChartTitleProps {
+  title: string;
+  subtitle: string;
+  enableFavourite?: boolean;
+  activity?: string;
+}
+
+const ChartTitle = ({
+  title,
+  subtitle
+}: ChartTitleProps) => {
+
+
+  return (
+    <Column className="section-title">
+      <div className="title-favourite">
+        <h1>{title}</h1>
+      </div>
+      <Subtitle text={subtitle} />
+    </Column>
+  );
+};
+
+export default ChartTitle;

frontend/src/components/ChartTitle/styles.scss

@@ -0,0 +1,17 @@
+@use '@carbon/type';
+
+.section-title {
+  margin: 0;
+  padding: 16px;
+}
+
+.section-title h1 {
+  @include type.type-style('heading-02');
+  margin-bottom: 0.3rem;
+}
+
+.title-favourite {
+  display: flex;
+  align-items: center;
+}
+

frontend/src/components/DonutChartView/DonutChartView.scss

@@ -0,0 +1,2 @@
+@use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors;
+@use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;