feat: added seedlot dashboard page and initial grid display for it (#32)

* feat: added seedlot dashboard page and initial grid display for it

* fix: seedlot dashboard url

src/App.tsx

@@ -13,8 +13,9 @@ import { useAuth } from './contexts/AuthContext';
 import SilentCheckSso from './components/SilentCheckSso';
 import Logout from './components/Logout';
 import Layout from './layout/PublicLayout';
-import Dashboard from './views/Dashboard/dashboard';
 import NewLanding from './views/NewLanding';
+import Dashboard from './views/Dashboard/dashboard';
+import SeedlotDashboard from './views/SeedlotDashboard';
 
 /**
  * Create an app structure conaining all the routes.
@@ -41,6 +42,15 @@ const App: React.FC = () => {
             )}
           />
 
+          <Route
+            path="/seedlot"
+            element={(
+              <ProtectedRoute signed={signed}>
+                <SeedlotDashboard />
+              </ProtectedRoute>
+            )}
+          />
+
           <Route
             path="/form"
             element={(

src/components/ActivityTable/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import './styles.css';
+import { hashObject } from 'react-hash-string';
 
 import {
   Table,
@@ -12,10 +11,11 @@ import {
 } from '@carbon/react';
 import { DataViewAlt } from '@carbon/icons-react';
 
-import { hashObject } from 'react-hash-string';
+import StatusItem from '../StatusItem';
 
 import Activity from '../../types/Activity';
-import StatusItem from '../StatusItem';
+
+import './styles.css';
 
 interface TableProps {
   elements: Activity[];

src/components/AvatarImage/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import './style.css';
 import emptyUser from '../../mock-data/img/EmptyUser.jpg';
+import './style.css';
 
 type Size = 'small' | 'large';
 

src/components/BCHeader/index.tsx

@@ -122,14 +122,14 @@ const BCHeader = () => {
               <Icons.UserAvatar size={20} />
             </HeaderGlobalAction>
           </HeaderGlobalBar>
-          <HeaderPanel expanded={notifications} className="notifications-panel">
+          <HeaderPanel aria-label="Notifications Tab" expanded={notifications} className="notifications-panel">
             <RightPanelTitle
               title="Notifications"
               closeFn={closeNotificationsPanel}
             />
             <NotificationsCentral />
           </HeaderPanel>
-          <HeaderPanel expanded={myProfile} className="profile-panel">
+          <HeaderPanel aria-label="My Profile Tab" expanded={myProfile} className="profile-panel">
             <RightPanelTitle
               title="My Profile"
               closeFn={closeMyProfilePanel}

src/components/Card/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import './styles.scss';
-
 import { Tile, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import * as Icons from '@carbon/icons-react';
 
+import './styles.scss';
+
 interface CardProps {
   icon: string;
   header: string;

src/components/EmptySection/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import './styles.scss';
 
 import * as Icons from '@carbon/icons-react';
 
+import './styles.scss';
+
 interface EmptySectionProps {
   icon: string;
   title: string;

src/components/FavoriteActivities/index.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 
 import { Tooltip, Row, Column } from '@carbon/react';
 import { Information } from '@carbon/icons-react';
+
 import Card from '../Card';
+import EmptySection from '../EmptySection';
 
 import CardType from '../../types/Card';
-import './styles.scss';
 import FavoriteActivitiesCardItems from '../../mock-data/FavoriteActivitiesCardItems';
-import EmptySection from '../EmptySection';
+
+import './styles.scss';
 
 const FavoriteActivities = () => {
   const [cards, setCards] = React.useState<CardType[]>(FavoriteActivitiesCardItems);

src/components/PageTitle/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {
+  Column,
+  IconButton
+} from '@carbon/react';
+import { Favorite } from '@carbon/icons-react';
+
+import './styles.css';
+
+interface PageTitleProps {
+  title: string;
+  subtitle: string;
+  favorite?: boolean;
+}
+
+// TODO: Toggle Favorite logic
+const PageTitle = ({ title, subtitle, favorite }: PageTitleProps) => (
+  <Column sm={4} md={4} className="title-section">
+    <div className={favorite ? 'title-favorite' : ''}>
+      <h1>{title}</h1>
+      {favorite && (
+        <IconButton kind="ghost" label="Favorite" align="right">
+          <Favorite size={28} />
+        </IconButton>
+      )}
+    </div>
+    <h4>
+      {subtitle}
+    </h4>
+  </Column>
+);
+
+export default PageTitle;

src/components/PageTitle/styles.css

@@ -0,0 +1,33 @@
+.title-section {
+  padding-left: 3.5rem;
+}
+
+.title-favorite {
+  display: flex;
+  align-items: center;
+}
+
+.title-favorite button{
+  margin-left: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.title-favorite button svg{
+  margin-bottom: 0.1875rem;
+}
+
+@media only screen and (max-width: 1584px) {
+  .title-section {
+    padding-left: 3rem;
+  }
+}
+
+@media only screen and (max-width: 672px) {
+  .title-section {
+    padding-left: 2rem;
+  }
+
+  .title-section h4 {
+    width: 90vw;
+  }
+}

src/components/RecentActivities/index.tsx

@@ -10,12 +10,13 @@ import {
   TabPanels,
   TabPanel
 } from '@carbon/react';
+
 import ActivityTable from '../ActivityTable';
+import EmptySection from '../EmptySection';
 
 import RecentActivityItems from '../../mock-data/RecentActivityItems';
 
 import './styles.scss';
-import EmptySection from '../EmptySection';
 
 const RecentActivities = () => {
   const listItems = RecentActivityItems;
@@ -62,7 +63,6 @@ const RecentActivities = () => {
                   description="Your recent requests will appear here once you generate one"
                 />
               </div>
-
               )}
             </TabPanel>
             <TabPanel>Placeholder</TabPanel>

src/components/RightPanelTitle/index.tsx

@@ -11,11 +11,11 @@ interface RightPanelTitleProps {
 }
 
 const RightPanelTitle = ({ title, closeFn }: RightPanelTitleProps) => (
-  <div className="title-section">
+  <div className="right-title-section">
     <h4>
       {title}
     </h4>
-    <div className="title-buttons">
+    <div className="right-title-buttons">
       <IconButton kind="ghost" label="Settings" align="bottom">
         <Settings />
       </IconButton>

src/components/RightPanelTitle/styles.css

@@ -1,4 +1,4 @@
-.title-section {
+.right-title-section {
   display: flex;
   justify-content: space-between;
   align-items: center;

src/layout/PublicLayout/styles.scss

@@ -1,6 +1,7 @@
 @use '../../theme/variables.scss' as vars;
 
 .mainContainer {
+  overflow-x: hidden;
   padding-top: 5.625rem;
   padding-left: 16rem;
 }
@@ -9,6 +10,11 @@
   max-width: none;
 }
 
+.page-content h1,
+.page-content h3 {
+  padding-bottom: 0.5rem;
+}
+
 @media only screen and (max-width: 1056px) {
   .mainContainer {
     padding-top: 5rem;

src/mock-data/LeftPanelItems.ts

@@ -11,7 +11,7 @@ const LeftPanelItems = [
       {
         name: 'Seedlots',
         icon: 'SoilMoistureField',
-        link: '#',
+        link: '/seedlot',
         disabled: true
       },
       {

src/views/Dashboard/dashboard.tsx

@@ -2,26 +2,22 @@ import React from 'react';
 
 import {
   FlexGrid,
-  Column,
   Row,
   Stack
 } from '@carbon/react';
 
+import PageTitle from '../../components/PageTitle';
 import FavoriteActivities from '../../components/FavoriteActivities';
 import RecentActivities from '../../components/RecentActivities';
 
-import './styles.scss';
-
 const Dashboard = () => (
   <FlexGrid className="dashboard-page">
     <Stack gap={7}>
       <Row>
-        <Column sm={4} md={4} className="dashboard-title">
-          <h1 data-testid="home-title">Dashboard</h1>
-          <h4>
-            See your favorite and recent activities inside SPAR system
-          </h4>
-        </Column>
+        <PageTitle
+          title="Dashboard"
+          subtitle="See your favorite and recent activities inside SPAR system"
+        />
       </Row>
       <FavoriteActivities />
       <RecentActivities />

src/views/SeedlotDashboard/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  FlexGrid,
+  Row,
+  Column,
+  Stack
+} from '@carbon/react';
+
+import PageTitle from '../../components/PageTitle';
+
+import './styles.css';
+
+const SeedlotDashboard = () => (
+  <FlexGrid className="seedlot-page">
+    <Stack gap={7}>
+      <Row>
+        <PageTitle
+          title="Seedlots"
+          subtitle="Register and manage your seedlots"
+          favorite
+        />
+      </Row>
+      <Row className="seedlot-dashboard-content">
+        <Column sm={4} md={4} lg={4}>
+          <span>
+            Card Placeholder
+          </span>
+        </Column>
+        <Column sm={4} md={4} lg={4}>
+          <span>
+            Card Placeholder
+          </span>
+        </Column>
+        <Column sm={4} md={4} lg={4}>
+          <span>
+            Card Placeholder
+          </span>
+        </Column>
+        <Column sm={4} md={4} lg={4}>
+          <span>
+            Card Placeholder
+          </span>
+        </Column>
+      </Row>
+      <Row className="seedlot-dashboard-content">
+        <Column>
+          Exisisting Seedlot Placeholder
+        </Column>
+      </Row>
+    </Stack>
+  </FlexGrid>
+);
+
+export default SeedlotDashboard;

src/views/SeedlotDashboard/styles.css

@@ -0,0 +1,15 @@
+.seedlot-dashboard-content {
+  padding-left: 2.5rem;
+}
+
+@media only screen and (max-width: 1584px) {
+  .seedlot-dashboard-content {
+    padding-left: 2rem;
+  }
+}
+
+@media only screen and (max-width: 672px) {
+  .seedlot-dashboard-content {
+    padding-left: 1rem;
+  }
+}