Feat/opening search

frontend/package.json

@@ -17,8 +17,11 @@
     "amazon-cognito-identity-js": "^6.3.13",
     "aws-amplify": "^6.5.0",
     "axios": "^1.6.8",
+    "jspdf": "^2.5.2",
+    "jspdf-autotable": "^3.8.3",
     "leaflet": "^1.9.4",
     "lottie-react": "^2.4.0",
+    "qs": "^6.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-esri-leaflet": "^2.0.1",
@@ -31,6 +34,7 @@
     "vite": "^5.0.0",
     "vite-plugin-svgr": "^4.0.0",
     "vite-tsconfig-paths": "^5.0.0",
+    "web-vitals": "^4.0.0",
     "yaml": "^2.3.2"
   },
   "scripts": {
@@ -60,7 +64,9 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
+    "@types/jspdf": "^2.0.0",
     "@types/leaflet": "^1.9.12",
+    "@types/qs": "^6.9.16",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.5.0",

frontend/src/App.tsx

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

frontend/src/__test__/components/OpeningScreenDataTable.test.tsx

@@ -21,7 +21,7 @@ const rows: RecentOpening[] = [{
 }];
 
 const headers = [{ key: 'openingId', header: 'Opening Id', },
-  { key: 'fileId', header: 'File Id', },
+  { key: 'forestFileId', header: 'File Id', },
   { key: 'cuttingPermit', header: 'Cutting permit', },
   { key: 'timberMark', header: 'Timber mark', },
   { key: 'cutBlock', header: 'Cut block', },
@@ -42,6 +42,8 @@ const paginationValueMock = {
   handlePageChange: vi.fn(),
   handleItemsPerPageChange: vi.fn(),
   itemsPerPage: 5,
+  totalResultItems:100,
+  setTotalResultItems:vi.fn(),
   setPageData: vi.fn(),
   setInitialItemsPerPage: vi.fn(),
 };

frontend/src/components/BCHeaderwSide/constants.ts

@@ -36,7 +36,7 @@ const mainActivitiesItems: LeftMenu[] = [
           },
           {
             name: 'Silviculture search',
-            link: '/opening/silviculture',
+            link: '/silviculture-search',
             disabled: false
           },
           {

frontend/src/components/ChartContainer/ChartContainer.scss

@@ -12,6 +12,6 @@
     padding: 0rem;
 }
 
-.bx--list-box__label {
+.#{vars.$bcgov-prefix}--list-box__label {
     color: var(--#{vars.$bcgov-prefix}-text-secondary);
 }

frontend/src/components/EmptySection/styles.scss

@@ -22,6 +22,7 @@
   font-family: 'BC Sans', 'IBM Plex Sans', sans-serif;
   font-style: normal;
   padding-bottom: 0.5rem;
+  max-width: 368px;
 }
 
 .empty-section-title {

frontend/src/components/MyRecentActions/filesData.ts

@@ -52,18 +52,23 @@ export const rows: RecentAction[] = [
 export const headers: ITableHeader[] = [
   {
     key: 'activityType',
-    header: 'Activity Type'
+    header: 'Activity Type',
+    selected: true
   },
   {
     key: 'fileFormat',
-    header: 'File Format'
+    header: 'File Format',
+    selected: true
   },
   {
     key: 'statusCode',
-    header: 'Status'
+    header: 'Status',
+    selected: true
   },
   {
     key: 'lastUpdatedLabel',
-    header: 'Last Updated'
+    header: 'Last Updated',
+    selected: true
   }
 ];
+

frontend/src/components/MyRecentActions/index.tsx

@@ -14,18 +14,22 @@ const MyRecentActions: React.FC = () => {
     {
       key: 'activityType',
       header: 'Activity Type',
+      selected: true
     },
     {
       key: 'openingId',
       header: 'Opening ID',
+      selected: true
     },
     {
       key: 'statusCode',
       header: 'Status',
+      selected: true
     },
     {
       key: 'lastUpdatedLabel',
       header: 'Last Updated',
+      selected: true
     }
   ];
 

frontend/src/components/OpeningMetricsTab/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import './styles.scss';
 import SectionTitle from "../SectionTitle";
 import BarChartGrouped from "../BarChartGrouped";
@@ -8,48 +8,61 @@ import OpeningHistory from "../OpeningHistory";
 import OpeningHistoryItems from "../../mock-data/OpeningHistoryItems";
 import MyRecentActions from "../MyRecentActions";
 
-const OpeningMetricsTab: React.FC = () => (
-  <>
-    <div className="container-fluid tab-padding">
-    <div className="title-container pb-32">
-      <SectionTitle title="Dashboard" subtitle="Manage and track silvicultural information about openings" />
-    </div>
-      <div className="row gy-4">
-        <div className="col-xxl-6">
-          <ChartContainer
-            title="Openings submission trends"
-            description="Check quantity and evolution of openings"
-          >
-            <BarChartGrouped />
-          </ChartContainer>
-        </div>
-        <div className="col-xxl-6">
-          <ChartContainer title="Track Openings" description="Follow your favourite openings">
-            <OpeningHistory 
-              histories={OpeningHistoryItems}
-            />
-          </ChartContainer>
-        </div>
-        <div className="col-xxl-6">
-          <ChartContainer
-            title="Free growing milestone declarations"
-            description="Check opening standards unit for inspections purposes"
-          >
-            <DoughnutChartView />
-          </ChartContainer>
+const OpeningMetricsTab: React.FC = () => {
+  const trackOpeningRef = useRef<HTMLDivElement>(null);
+
+  // Optional: Scroll to "Track Openings" when this component mounts
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const scrollToSection = params.get('scrollTo');
+
+    if (scrollToSection === 'trackOpenings' && trackOpeningRef.current) {
+      trackOpeningRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, []);
+
+  return (
+    <>
+      <div className="container-fluid tab-padding">
+        <div className="title-container pb-32">
+          <SectionTitle title="Dashboard" subtitle="Manage and track silvicultural information about openings" />
         </div>
-        <div className="col-xxl-6">
-          <ChartContainer
-            title="My recent actions"
-            description="Check your recent requests and files"
-          >
-            <MyRecentActions />
-          </ChartContainer>
+        <div className="row gy-4">
+          <div className="col-xxl-6">
+            <ChartContainer
+              title="Openings submission trends"
+              description="Check quantity and evolution of openings"
+            >
+              <BarChartGrouped />
+            </ChartContainer>
+          </div>
+          <div className="col-xxl-6" ref={trackOpeningRef}> {/* Add ref here to scroll */}
+            <ChartContainer title="Track Openings" description="Follow your favourite openings">
+              <OpeningHistory 
+                histories={OpeningHistoryItems}
+              />
+            </ChartContainer>
+          </div>
+          <div className="col-xxl-6">
+            <ChartContainer
+              title="Free growing milestone declarations"
+              description="Check opening standards unit for inspections purposes"
+            >
+              <DoughnutChartView />
+            </ChartContainer>
+          </div>
+          <div className="col-xxl-6">
+            <ChartContainer
+              title="My recent actions"
+              description="Check your recent requests and files"
+            >
+              <MyRecentActions />
+            </ChartContainer>
+          </div>
         </div>
-
       </div>
-    </div>
-  </>
-);
+    </>
+  );
+};
 
 export default OpeningMetricsTab;

frontend/src/components/OpeningMetricsTab/styles.scss

@@ -21,6 +21,9 @@
   .pb-32{
     padding-bottom: 32px;
   }
+  .p-32{
+    padding: 32px;
+  }
 
   @media only screen and (max-width: 671px) {
     .favourite-activities {

frontend/src/components/OpeningScreenDataTable/testData.ts

@@ -3,42 +3,53 @@ import { ITableHeader } from "../../types/TableHeader";
 export const headers: ITableHeader[] = [
   {
     key: 'openingId',
-    header: 'Opening Id'
+    header: 'Opening Id',
+    selected: false
   },
   {
-    key: 'fileId',
-    header: 'File Id'
+    key: 'forestFileId',
+    header: 'File Id',
+    selected: false
   },
   {
     key: 'cuttingPermit',
-    header: 'Cutting permit'
+    header: 'Cutting permit',
+    selected: false
   },
   {
     key: 'timberMark',
-    header: 'Timber mark'
+    header: 'Timber mark',
+    selected: false
   },
   {
     key: 'cutBlock',
-    header: 'Cut block'
+    header: 'Cut block',
+    selected: false
   },
   {
     key: 'grossAreaHa',
-    header: 'Gross area (ha)'
+    header: 'Gross area (ha)',
+    selected: false
   },
   {
     key: 'status',
-    header: 'Status'
+    header: 'Status',
+    selected: false
   },
   {
     key: 'category',
-    header: 'Category'
+    header: 'Category',
+    selected: false
   },
   {
     key: 'disturbanceStart',
-    header: 'Disturbance start'
+    header: 'Disturbance start',
+    selected: false
   },
   {
     key: 'actions',
-    header: 'Actions'
+    header: 'Actions',
+    selected: false
   }
 ];
+