Tailwind introduction (#771)

* add tailwind config and dependencies to project

* add tailwind eslint dependencies and config

* rename routes directory to features directory again

I think this keeps things clearer until we actually\/if adopt remix

* use react router dom lazy loading functionality (instead of React.lazy) to decouple, bundle and break apart features

* fix expected type for new manifest

* remove example accordian section from dashbaord

client/app/App.scss

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 :root {
   --bs-card-cap-padding-y: 0;
   --haztrak-info: #33cccc;
@@ -11,13 +14,13 @@
   --toastify-icon-color-warning: var(--bs-warning);
   --toastify-icon-color-error: var(--bs-danger);
   --toastify-color-progress-light: linear-gradient(
-    to right,
-    #4cd964,
-    #5ac8fa,
-    #007aff,
-    #34aadc,
-    #5856d6,
-    #ff2d55
+                  to right,
+                  #4cd964,
+                  #5ac8fa,
+                  #007aff,
+                  #34aadc,
+                  #5856d6,
+                  #ff2d55
   );
   --toastify-color-progress-dark: #bb86fc;
   --toastify-color-progress-info: var(--bs-info);

client/app/components/Layout/index.ts

@@ -1 +1,4 @@
-export { Root as Component } from './Root';
+import { Root } from './Root';
+
+export { Root as Component };
+export default Root;

client/app/components/Manifest/ManifestForm.spec.tsx

@@ -1,13 +1,13 @@
 import { fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { cleanup, renderWithProviders } from 'app/mocks';
-import { mockUserEndpoints, mockWasteEndpoints } from 'app/mocks/handlers';
+import { mockSiteEndpoints, mockUserEndpoints, mockWasteEndpoints } from 'app/mocks/handlers';
 import { setupServer } from 'msw/node';
 import React from 'react';
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 import { ManifestForm } from '~/components/Manifest';
 
-const server = setupServer(...mockUserEndpoints, ...mockWasteEndpoints);
+const server = setupServer(...mockUserEndpoints, ...mockWasteEndpoints, ...mockSiteEndpoints);
 afterEach(() => cleanup());
 beforeAll(() => server.listen());
 afterAll(() => server.close());

client/app/components/Manifest/ManifestForm.tsx

@@ -1,4 +1,9 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import React, { createContext, useEffect, useState } from 'react';
+import { Container, Stack } from 'react-bootstrap';
+import { FormProvider, SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
 import {
   ManifestCancelBtn,
   ManifestEditBtn,
@@ -16,11 +21,6 @@ import { WasteLineSection } from '~/components/Manifest/WasteLine/WasteLineSecti
 import { HtCard, HtForm } from '~/components/UI';
 import { useUserSiteIds } from '~/hooks';
 import { useManifestStatus, useReadOnly, useSaveManifest } from '~/hooks/manifest';
-import React, { createContext, useEffect, useState } from 'react';
-import { Container, Stack } from 'react-bootstrap';
-import { FormProvider, SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { toast } from 'react-toastify';
 import { manifest } from '~/services';
 import { HandlerSearchModal } from './Handler';
 import { Manifest, manifestSchema, SiteType } from './manifestSchema';
@@ -188,7 +188,7 @@ export function ManifestForm({
 
   const { userSiteIds } = useUserSiteIds();
   const nextSigner = manifest.getNextSigner(manifestData);
-  const signAble = userSiteIds.some((site) => site.epaSiteId === nextSigner?.epaSiteId || '');
+  const signAble = userSiteIds.some((siteEpaId) => siteEpaId === nextSigner?.epaSiteId || '');
   const isDraft = manifestData?.manifestTrackingNumber === undefined;
 
   return (

client/app/features/ErrorPage/index.ts

@@ -0,0 +1 @@
+export { ErrorPage as Component } from '~/features/ErrorPage/ErrorPage';

client/app/features/ManifestDetails/index.ts

@@ -0,0 +1,4 @@
+import { ManifestDetails } from './ManifestDetails';
+
+export { ManifestDetails as Component };
+export default ManifestDetails;

client/app/features/ManifestList/index.ts

@@ -0,0 +1,4 @@
+import { ManifestList } from './ManifestList';
+
+export { ManifestList as Component };
+export default ManifestList;

client/app/routes/NewManifest/NewManifest.spec.tsx → client/app/features/NewManifest/NewManifest.spec.tsx

@@ -1,13 +1,13 @@
 import userEvent from '@testing-library/user-event';
-import { NewManifest } from '~/routes/NewManifest/NewManifest';
+import { cleanup, renderWithProviders, screen } from 'app/mocks';
+import { mockSiteEndpoints, mockUserEndpoints } from 'app/mocks/handlers';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
+import NewManifest from '~/features/NewManifest';
 import { createMockSite } from '~/mocks/fixtures';
-import { mockSiteEndpoints, mockUserEndpoints } from 'app/mocks/handlers';
 import { API_BASE_URL } from '~/mocks/handlers/mockSiteEndpoints';
-import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 
 const mockSites = [createMockSite(), createMockSite()];
 const server = setupServer(...mockUserEndpoints, ...mockSiteEndpoints);

client/app/routes/NewManifest/NewManifest.tsx → client/app/features/NewManifest/NewManifest.tsx

@@ -1,16 +1,17 @@
 import { createSelector } from '@reduxjs/toolkit';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Col, Container, Form } from 'react-bootstrap';
+import { useForm } from 'react-hook-form';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { HaztrakSite } from '~/components/HaztrakSite';
 import { Manifest, ManifestForm } from '~/components/Manifest';
 import { RcraSiteType } from '~/components/Manifest/manifestSchema';
 import { SiteSelect, SiteTypeSelect } from '~/components/Manifest/SiteSelect';
 import { RcraSite } from '~/components/RcraSite';
 import { HtCard, HtSpinner } from '~/components/UI';
 import { useTitle } from '~/hooks';
 import { useReadOnly } from '~/hooks/manifest';
-import React, { useEffect, useMemo, useState } from 'react';
-import { Col, Container, Form } from 'react-bootstrap';
-import { useForm } from 'react-hook-form';
-import { useParams, useSearchParams } from 'react-router-dom';
-import { useGetProfileQuery } from '~/store';
+import { useGetUserHaztrakSitesQuery } from '~/store';
 
 /**
  * NewManifest component allows a user to create a new electronic manifest.
@@ -41,17 +42,16 @@ export function NewManifest() {
 
   const selectBySiteId = useMemo(() => {
     return createSelector(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (res: any) => res.data,
       (_res, siteId) => siteId,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (data: any, siteId) => {
-        return data?.sites[siteId]?.handler ?? undefined;
+      (data: HaztrakSite[], siteId) => {
+        const site = data?.find((site) => site.handler.epaSiteId === siteId) ?? undefined;
+        return site?.handler;
       }
     );
   }, []);
 
-  const { rcraSite, isLoading } = useGetProfileQuery(undefined, {
+  const { rcraSite, isLoading } = useGetUserHaztrakSitesQuery(undefined, {
     selectFromResult: (result) => ({
       ...result,
       rcraSite: selectBySiteId(result, siteId),
@@ -74,7 +74,6 @@ export function NewManifest() {
 
   if (isLoading && siteId) return <HtSpinner center />;
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleSiteChange = (site: any) => {
     updateSiteSelection(site);
   };

client/app/features/NewManifest/index.ts

@@ -0,0 +1,4 @@
+import { NewManifest } from './NewManifest';
+
+export { NewManifest as Component };
+export default NewManifest;

client/app/routes/SiteDetails/index.ts → client/app/features/SiteDetails/index.ts

@@ -1,4 +1,4 @@
-import { SiteDetails } from '~/routes/SiteDetails/SiteDetails';
+import { SiteDetails } from '~/features/SiteDetails/SiteDetails';
 
 export { SiteDetails as Component };
 export default SiteDetails;

client/app/routes/SiteList/index.ts → client/app/features/SiteList/index.ts

@@ -1,4 +1,4 @@
-import { SiteList } from '~/routes/SiteList/SiteList';
+import { SiteList } from '~/features/SiteList/SiteList';
 
 export { SiteList as Component };
 export default SiteList;

client/app/routes/about/About.tsx → client/app/features/about/About.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
-import { useTitle } from '~/hooks';
 import { HaztrakLicense, SectionTitle } from '~/components/Help';
+import { useTitle } from '~/hooks';
 
 /**
  * Static page that talks about Haztrak's licensing, maybe versioning in future

client/app/routes/dashboard/Dashboard.spec.tsx → client/app/features/dashboard/Dashboard.spec.tsx

@@ -37,6 +37,6 @@ describe('Home', () => {
         },
       },
     });
-    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+    expect(screen.queryAllByText(/status/i)).length.greaterThanOrEqual(1);
   });
 });

client/app/features/dashboard/Dashboard.tsx

@@ -0,0 +1,38 @@
+import { HtCard } from '~/components/UI';
+import React, { ReactElement } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+import {
+  GeneratorStatusAreaChart,
+  ManifestCountBarChart,
+  ManifestStatusPieChart,
+} from '~/components/Charts';
+import { useTitle } from '~/hooks';
+
+/** Dashboard page for logged-in user*/
+export function Dashboard(): ReactElement {
+  useTitle(`Haztrak`, false, true);
+
+  return (
+    <Container className="py-2 pt-3">
+      <Row xs={1} lg={2}>
+        <Col className="my-3">
+          <HtCard title="Calculated Status" className="p-2">
+            <GeneratorStatusAreaChart />
+          </HtCard>
+        </Col>
+        <Col className="my-3">
+          <HtCard title="Manifest by Status" className="p-2">
+            <ManifestStatusPieChart />
+          </HtCard>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <HtCard title="Manifest count" className="p-2">
+            <ManifestCountBarChart />
+          </HtCard>
+        </Col>
+      </Row>
+    </Container>
+  );
+}

client/app/routes/login/login.spec.tsx → client/app/features/login/login.spec.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { renderWithProviders, screen } from 'app/mocks';
-import { Login } from 'app/routes/login';
+import React from 'react';
 import { describe, expect, test } from 'vitest';
+import { Login } from '~/features/login';
 
 describe('Login component', () => {
   test('renders', () => {

client/app/routes/register/index.ts → client/app/features/register/index.ts

@@ -1,4 +1,4 @@
-import { RegisterHero } from '~/routes/register/RegisterHero';
+import { RegisterHero } from '~/features/register/RegisterHero';
 
 export { RegisterHero as Component };
 export default RegisterHero;

client/app/hooks/useUserSiteIds/useUserSiteIds.spec.tsx

@@ -15,8 +15,8 @@ function TestComponent() {
   return (
     <>
       {isLoading && <p>Loading...</p>}
-      {userSiteIds.map((site, index) => (
-        <p key={index}>{site.epaSiteId}</p>
+      {userSiteIds.map((epaSiteId, index) => (
+        <p key={index}>{epaSiteId}</p>
       ))}
     </>
   );

client/app/hooks/useUserSiteIds/useUserSiteIds.tsx

@@ -1,32 +1,13 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useMemo } from 'react';
-import { ProfileSlice, useGetProfileQuery } from '~/store';
+import { HaztrakSite } from '~/components/HaztrakSite';
+import { useGetUserHaztrakSitesQuery } from '~/store';
 
 /**
  * Get select details for sites that the user has access to
  */
 export function useUserSiteIds() {
-  const selectUserSiteIds = useMemo(
-    () =>
-      createSelector(
-        (res) => res.data,
-        (data: ProfileSlice) =>
-          !data || !data.sites
-            ? []
-            : Object.values(data.sites).map((site) => ({
-                epaSiteId: site.handler.epaSiteId,
-                permissions: site.permissions,
-              }))
-      ),
-    []
-  );
+  const { data, ...rest } = useGetUserHaztrakSitesQuery(undefined);
 
-  const { userSiteIds, ...rest } = useGetProfileQuery(undefined, {
-    selectFromResult: (result) => ({
-      ...result,
-      userSiteIds: selectUserSiteIds(result),
-    }),
-  });
+  const userSiteIds: string[] = data?.map((site: HaztrakSite) => site.handler.epaSiteId) || [];
 
-  return { userSiteIds, ...rest };
+  return { userSiteIds, data, ...rest };
 }