feat(front): pdf revision [MARXAN-1516]

app/layout/scenarios/reports/solutions/header/component.tsx

@@ -2,16 +2,19 @@ import React from 'react';
 
 import { useRouter } from 'next/router';
 
-import { format } from 'date-fns';
-
 import { useProjectUsers } from 'hooks/project-users';
 import { useProject } from 'hooks/projects';
 import { useScenario } from 'hooks/scenarios';
 
+import LOGO_BLACK from 'svgs/logo-black.svg';
+
 export interface ScenariosReportHeaderProps {
+  title: string;
 }
 
-export const ScenariosReportHeader: React.FC<ScenariosReportHeaderProps> = () => {
+export const ScenariosReportHeader: React.FC<ScenariosReportHeaderProps> = ({
+  title,
+}: ScenariosReportHeaderProps) => {
   const { query } = useRouter();
   const { pid, sid } = query;
 
@@ -37,31 +40,44 @@ export const ScenariosReportHeader: React.FC<ScenariosReportHeaderProps> = () =>
 
   return (
     reportDataIsFetched && (
-      <header className="w-full pb-6">
-
-        <div className="flex justify-between">
-          <div className="flex space-x-1 text-xs">
-            <p className="font-semibold uppercase">
-              Created by:
-            </p>
-            <p className="capitalize">{projectOwner?.displayName || projectOwner?.email}</p>
+      <header className="flex items-start justify-between w-full pb-6">
+        <div className="w-1/3">
+          <div className="flex justify-between">
+            <div className="flex space-x-1 text-xs">
+              <p className="font-semibold uppercase">
+                Created by:
+              </p>
+              <p className="capitalize">{projectOwner?.displayName || projectOwner?.email}</p>
+            </div>
           </div>
-        </div>
 
-        <h1 className="pb-4 text-2xl text-gray-500 font-heading">
-          {`${projectData?.name}-${scenarioData?.name}`}
-        </h1>
+          <h1 className="pb-2 text-2xl font-semibold text-gray-500 font-heading">
+            {title}
+          </h1>
+          <div className="flex flex-col text-xxs">
+            <div className="flex space-x-1">
+              <p className="font-semibold">Project:</p>
+              <p>
+                {projectData?.name}
+              </p>
+            </div>
 
-        <div className="flex space-x-12 text-xxs">
-          <div className="flex space-x-1">
-            <p className="font-semibold">Marxan platform version:</p>
-            <p> V.0.0.1</p>
-          </div>
-          <div className="flex space-x-1">
-            <p className="font-semibold">Date:</p>
-            <p>{format(new Date().getTime(), 'MM/dd/yyyy')}</p>
+            <div className="flex space-x-1">
+              <p className="font-semibold">Scenario:</p>
+              <p>
+                {scenarioData?.name}
+              </p>
+            </div>
           </div>
+
         </div>
+
+        <img
+          className="w-32 h-12"
+          alt="Marxan logo"
+          src={LOGO_BLACK}
+        />
+
       </header>
     )
   );

app/layout/scenarios/reports/solutions/intro-page/component.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import { useRouter } from 'next/router';
+
+import { format } from 'date-fns';
+
+import { useProjectUsers } from 'hooks/project-users';
+import { useProject } from 'hooks/projects';
+import { useScenario } from 'hooks/scenarios';
+
+import LOGO_BLACK from 'svgs/logo-black.svg';
+
+export interface IntroPageProps {
+
+}
+
+export const IntroPage: React.FC<IntroPageProps> = () => {
+  const { query } = useRouter();
+  const { pid, sid } = query;
+
+  const {
+    data: projectData,
+    isFetched: projectDataIsFetched,
+  } = useProject(pid);
+
+  const {
+    data: scenarioData,
+    isFetched: scenarioDataIsFetched,
+  } = useScenario(sid);
+
+  const {
+    data: projectUsers,
+    isFetched: projectUsersAreFetched,
+  } = useProjectUsers(pid);
+
+  const projectOwner = projectUsers?.find((u) => u.roleName === 'project_owner')?.user || {};
+
+  const reportDataIsFetched = projectDataIsFetched
+    && scenarioDataIsFetched && projectUsersAreFetched;
+
+  const {
+    description, name, planningAreaName, planningUnitGridShape, planningUnitAreakm2,
+  } = projectData || {};
+
+  return (
+    reportDataIsFetched && (
+      <div className="pt-6 space-y-6">
+        <div className="flex justify-between">
+          <div>
+            <div className="flex space-x-1 text-xs">
+              <p className="font-semibold uppercase">
+                Created by:
+              </p>
+              <p className="capitalize">{projectOwner?.displayName || projectOwner?.email}</p>
+            </div>
+            <h1 className="pb-2 text-2xl font-semibold text-gray-500 font-heading">
+              Solution Report
+            </h1>
+          </div>
+          <img
+            className="w-32 h-12"
+            alt="Marxan logo"
+            src={LOGO_BLACK}
+          />
+        </div>
+        <section className="w-1/2 space-y-8 text-xs">
+          <div className="flex flex-col space-y-3 text-xs">
+            <div className="flex space-x-1">
+              <p className="font-semibold">Project:</p>
+              <p>
+                {name}
+              </p>
+            </div>
+
+            <div className="flex space-x-1">
+              <p className="font-semibold">Scenario:</p>
+              <p>
+                {scenarioData?.name}
+              </p>
+            </div>
+
+            <div className="flex space-x-1">
+              <p className="font-semibold">Description:</p>
+              <p>
+                {description}
+              </p>
+            </div>
+
+            <div className="flex space-x-1">
+              <p className="font-semibold">Planning Area:</p>
+              <p>
+                {planningAreaName || 'Custom'}
+              </p>
+            </div>
+
+            <div className="flex space-x-1">
+              <p className="font-semibold">Planning Unit Area:</p>
+              <p>
+                {planningUnitAreakm2 ? `${planningUnitAreakm2}
+                km2` : 'Custom'}
+              </p>
+            </div>
+            <div className="flex space-x-1">
+              <p className="font-semibold">Planning Unit Grid Shape:</p>
+              <p>
+                {(planningUnitGridShape === 'hexagon' || planningUnitGridShape === 'square') ? planningUnitGridShape : 'Custom'}
+              </p>
+            </div>
+
+            <div className="flex space-x-1">
+              <p className="font-semibold">Marxan platform version:</p>
+              <p> V.0.0.1</p>
+            </div>
+            <div className="flex space-x-1">
+              <p className="font-semibold">Date:</p>
+              <p>{format(new Date().getTime(), 'MM/dd/yyyy')}</p>
+            </div>
+          </div>
+        </section>
+      </div>
+    )
+  );
+};
+
+export default IntroPage;

app/layout/scenarios/reports/solutions/page-2/component.tsx → app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx

@@ -6,15 +6,15 @@ import { LEGEND_LAYERS } from 'hooks/map/constants';
 import { useScenario } from 'hooks/scenarios';
 import { useBestSolution, useSolution } from 'hooks/solutions';
 
-import ScenarioReportsMap from 'layout/scenarios/reports/solutions/page-2/map';
+import ScenarioReportsMap from 'layout/scenarios/reports/solutions/selected-solution-page/map';
 
 import LegendItem from 'components/map/legend/item/component';
 
-export interface ScenariosReportPage2Props {
+export interface SelectedSolutionPageProps {
 
 }
 
-export const ScenariosReportPage2: React.FC<ScenariosReportPage2Props> = () => {
+export const SelectedSolutionPage: React.FC<SelectedSolutionPageProps> = () => {
   const { query } = useRouter();
   const { sid, solutionId } = query;
 
@@ -43,7 +43,7 @@ export const ScenariosReportPage2: React.FC<ScenariosReportPage2Props> = () => {
   }, [SOLUTION_DATA]);
 
   return (
-    <div className="flex space-x-4">
+    <div className="flex space-x-8">
       <section className="flex flex-col justify-between w-1/3 text-xs">
         <div className="space-y-8">
           <div>
@@ -84,4 +84,4 @@ export const ScenariosReportPage2: React.FC<ScenariosReportPage2Props> = () => {
   );
 };
 
-export default ScenariosReportPage2;
+export default SelectedSolutionPage;

app/layout/scenarios/reports/solutions/page-3/component.tsx → app/layout/scenarios/reports/solutions/settings-page/component.tsx

@@ -9,11 +9,11 @@ import { useWDPACategories } from 'hooks/wdpa';
 
 import { SCENARIO_PARAMETERS, Types } from './constants';
 
-export interface ScenariosReportPage3Props {
+export interface SettingsPageProps {
 
 }
 
-export const ScenariosReportPage3: React.FC<ScenariosReportPage3Props> = () => {
+export const SettingsPage: React.FC<SettingsPageProps> = () => {
   const { query } = useRouter();
   const { pid, sid } = query;
 
@@ -164,4 +164,4 @@ export const ScenariosReportPage3: React.FC<ScenariosReportPage3Props> = () => {
   );
 };
 
-export default ScenariosReportPage3;
+export default SettingsPage;

app/layout/scenarios/reports/solutions/page-1/component.tsx → app/layout/scenarios/reports/solutions/solution-frequency-page/component.tsx

@@ -8,16 +8,16 @@ import { useProject } from 'hooks/projects';
 import { useScenarioPU } from 'hooks/scenarios';
 import { useWDPACategories } from 'hooks/wdpa';
 
-import ScenarioReportsMap from 'layout/scenarios/reports/solutions/page-1/map';
+import ScenarioReportsMap from 'layout/scenarios/reports/solutions/solution-frequency-page/map';
 
 import LegendItem from 'components/map/legend/item/component';
 import LegendTypeGradient from 'components/map/legend/types/gradient';
 
-export interface ScenariosReportPage1Props {
+export interface SolutionFrequencyPageProps {
 
 }
 
-export const ScenariosReportPage1: React.FC<ScenariosReportPage1Props> = () => {
+export const SolutionFrequencyPage: React.FC<SolutionFrequencyPageProps> = () => {
   const { query } = useRouter();
   const { pid, sid } = query;
 
@@ -46,7 +46,23 @@ export const ScenariosReportPage1: React.FC<ScenariosReportPage1Props> = () => {
     scenarioId: sid,
   });
 
-  const protectedAreas = protectedAreasData?.filter((a) => a.selected).map((a) => a.name);
+  const protectedAreas = useMemo(() => {
+    return protectedAreasData?.sort((a, b) => {
+      if (a.kind === 'project') return 1;
+      if (a.name === 'Not Reported') return 1;
+      if (b.name !== 'Not Reported') return -1;
+      return a - b;
+    }).map((pa) => {
+      if (pa.kind === 'global' && pa.name !== 'Not Reported') {
+        return {
+          ...pa,
+          name: `Category ${pa.name}`,
+        };
+      } return {
+        ...pa,
+      };
+    }).filter((a) => a.selected).map((a) => a.name);
+  }, [protectedAreasData]);
 
   const {
     data: PUData,
@@ -66,24 +82,23 @@ export const ScenariosReportPage1: React.FC<ScenariosReportPage1Props> = () => {
 
   return (
     reportDataIsFetched && (
-      <div className="flex space-x-4">
+      <div className="flex space-x-8">
 
         <section className="flex flex-col justify-between w-1/3">
           <div className="space-y-8 text-xs">
             <div>
               <p className="font-semibold">Contributors</p>
               <p>{contributors.join(', ')}</p>
             </div>
-
             <div>
               <p className="font-semibold">Protected Areas:</p>
               <p>{protectedAreas.join(', ')}</p>
             </div>
 
             <div>
               <p className="font-semibold">No. of planning units</p>
-              <p>{`In: ${PUData.included.length || 0}`}</p>
-              <p>{`Out: ${PUData.excluded.length || 0}`}</p>
+              <p>{`In the solution: ${PUData.included.length || 0}`}</p>
+              <p>{`Not included in the solution: ${PUData.excluded.length || 0}`}</p>
             </div>
           </div>
 
@@ -121,4 +136,4 @@ export const ScenariosReportPage1: React.FC<ScenariosReportPage1Props> = () => {
   );
 };
 
-export default ScenariosReportPage1;
+export default SolutionFrequencyPage;

app/layout/scenarios/reports/solutions/solution-frequency-page/map/index.ts

@@ -0,0 +1 @@
+export { default } from './component';