From efcec320da8b97278a9279deca394a850b0f6442 Mon Sep 17 00:00:00 2001
From: Dotnara Condori <dottykurmi123@gmail.com>
Date: Tue, 17 Dec 2024 15:44:20 -0400
Subject: [PATCH] [TM-1563] Audit Log [Site, Nursery, Project Admin Views]:
 Extend the width of the audit log (#757)

---
 .../ResourceTabs/AuditLogTab/AuditLogTab.tsx  | 31 +++++++++++++++
 .../components/SiteAuditLogEntityStatus.tsx   | 38 ++++++++++---------
 .../components/SiteAuditLogProjectStatus.tsx  | 11 ++++--
 .../MonitoredTab/components/DataCard.tsx      |  2 +-
 .../components/EcoRegionDoughnutChart.tsx     |  3 +-
 .../components/MonitoredCharts.tsx            |  8 +++-
 .../components/TreesLossBarChart.tsx          |  4 +-
 .../components/GraphicIconDashboard.tsx       | 15 +++++++-
 src/pages/project/[uuid]/tabs/AuditLog.tsx    |  2 +-
 9 files changed, 85 insertions(+), 29 deletions(-)

diff --git a/src/admin/components/ResourceTabs/AuditLogTab/AuditLogTab.tsx b/src/admin/components/ResourceTabs/AuditLogTab/AuditLogTab.tsx
index 32459384f..0dcc8dc09 100644
--- a/src/admin/components/ResourceTabs/AuditLogTab/AuditLogTab.tsx
+++ b/src/admin/components/ResourceTabs/AuditLogTab/AuditLogTab.tsx
@@ -9,6 +9,7 @@ import { NURSERY_REPORT, PROJECT_REPORT, SITE_REPORT } from "@/constants/entitie
 import useAuditLogActions from "@/hooks/AuditStatus/useAuditLogActions";
 
 import AuditLogSiteTabSelection from "./components/AuditLogSiteTabSelection";
+import AuditLogTable from "./components/AuditLogTable";
 import SiteAuditLogEntityStatus from "./components/SiteAuditLogEntityStatus";
 import SiteAuditLogEntityStatusSide from "./components/SiteAuditLogEntityStatusSide";
 import SiteAuditLogProjectStatus from "./components/SiteAuditLogProjectStatus";
@@ -58,6 +59,10 @@ const AuditLogTab: FC<IProps> = ({ label, entity, ...rest }) => {
     loadEntityList();
   }, [buttonToggle]);
 
+  const isSite = buttonToggle === AuditLogButtonStates.SITE;
+  const redirectTo = `${basename}/${modules.site.ResourceName}/${selected?.uuid}/show/6`;
+  const title = () => selected?.title ?? selected?.name;
+
   const verifyEntity = ["reports", "nursery"].some(word => ReverseButtonStates2[entity!].includes(word));
 
   const verifyEntityReport = () => {
@@ -133,6 +138,32 @@ const AuditLogTab: FC<IProps> = ({ label, entity, ...rest }) => {
             />
           </Grid>
         </Grid>
+        <div className="px-2 py-2">
+          <When condition={buttonToggle === AuditLogButtonStates.PROJECT && !record?.project}>
+            <Text variant="text-16-bold" className="mb-6">
+              History and Discussion for {record && record?.name}
+            </Text>
+            {auditLogData && <AuditLogTable auditLogData={auditLogData} auditData={auditData} refresh={refetch} />}
+          </When>
+          <When condition={buttonToggle !== AuditLogButtonStates.PROJECT || verifyEntity}>
+            <>
+              <div className="mb-6">
+                {!isSite && !verifyEntity && <Text variant="text-16-bold">History and Discussion for {title()}</Text>}
+                {(isSite || verifyEntity) && (
+                  <Text variant="text-16-bold">
+                    History and Discussion for{" "}
+                    <Link className="text-16-bold !text-[#000000DD]" to={redirectTo}>
+                      {title()}
+                    </Link>
+                  </Text>
+                )}
+              </div>
+              <When condition={!!auditLogData}>
+                <AuditLogTable auditLogData={auditLogData!} auditData={auditData} refresh={refetch} />
+              </When>
+            </>
+          </When>
+        </div>
       </TabbedShowLayout.Tab>
     </When>
   );
diff --git a/src/admin/components/ResourceTabs/AuditLogTab/components/SiteAuditLogEntityStatus.tsx b/src/admin/components/ResourceTabs/AuditLogTab/components/SiteAuditLogEntityStatus.tsx
index d8815bae6..21a51288a 100644
--- a/src/admin/components/ResourceTabs/AuditLogTab/components/SiteAuditLogEntityStatus.tsx
+++ b/src/admin/components/ResourceTabs/AuditLogTab/components/SiteAuditLogEntityStatus.tsx
@@ -63,24 +63,26 @@ const SiteAuditLogEntityStatus: FC<SiteAuditLogEntityStatusProps> = ({
         </Text>
         <CommentarySection record={record} entity={entityType} refresh={refresh} viewCommentsList={false} />
       </div>
-      <div>
-        {!isSite && !verifyEntity && <Text variant="text-16-bold">History and Discussion for {title()}</Text>}
-        {(isSite || verifyEntity) && (
-          <Text variant="text-16-bold">
-            History and Discussion for{" "}
-            {viewPD ? (
-              <Link className="text-16-bold !text-[#000000DD]" href={redirectTo}>
-                {title()}
-              </Link>
-            ) : (
-              <RaLink className="text-16-bold !text-[#000000DD]" to={redirectTo}>
-                {title()}
-              </RaLink>
-            )}
-          </Text>
-        )}
-      </div>
-      <When condition={!!auditLogData}>
+      <When condition={viewPD}>
+        <div>
+          {!isSite && !verifyEntity && <Text variant="text-16-bold">History and Discussion for {title()}</Text>}
+          {(isSite || verifyEntity) && (
+            <Text variant="text-16-bold">
+              History and Discussion for{" "}
+              {viewPD ? (
+                <Link className="text-16-bold !text-[#000000DD]" href={redirectTo}>
+                  {title()}
+                </Link>
+              ) : (
+                <RaLink className="text-16-bold !text-[#000000DD]" to={redirectTo}>
+                  {title()}
+                </RaLink>
+              )}
+            </Text>
+          )}
+        </div>
+      </When>
+      <When condition={!!auditLogData && viewPD}>
         <AuditLogTable auditLogData={auditLogData!} auditData={auditData} refresh={refresh} />
       </When>
     </div>
diff --git a/src/admin/components/ResourceTabs/AuditLogTab/components/SiteAuditLogProjectStatus.tsx b/src/admin/components/ResourceTabs/AuditLogTab/components/SiteAuditLogProjectStatus.tsx
index a9d23ffc1..57684ba9c 100644
--- a/src/admin/components/ResourceTabs/AuditLogTab/components/SiteAuditLogProjectStatus.tsx
+++ b/src/admin/components/ResourceTabs/AuditLogTab/components/SiteAuditLogProjectStatus.tsx
@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { When } from "react-if";
 
 import Text from "@/components/elements/Text/Text";
 import { AuditStatusResponse, ProjectLiteRead } from "@/generated/apiSchemas";
@@ -10,13 +11,15 @@ export interface SiteAuditLogProjectStatusProps {
   auditLogData?: { data: AuditStatusResponse[] };
   auditData?: { entity: string; entity_uuid: string };
   refresh?: () => void;
+  viewPD?: boolean;
 }
 
 const SiteAuditLogProjectStatus: FC<SiteAuditLogProjectStatusProps> = ({
   record,
   auditLogData,
   auditData,
-  refresh
+  refresh,
+  viewPD = false
 }) => (
   <div className="flex flex-col gap-6">
     <div>
@@ -27,8 +30,10 @@ const SiteAuditLogProjectStatus: FC<SiteAuditLogProjectStatusProps> = ({
         Update the project status, view updates, or add comments
       </Text>
     </div>
-    <Text variant="text-16-bold">History and Discussion for {record && record?.name}</Text>
-    {auditLogData && <AuditLogTable auditLogData={auditLogData} auditData={auditData} refresh={refresh} />}
+    <When condition={viewPD}>
+      <Text variant="text-16-bold">History and Discussion for {record && record?.name}</Text>
+      {auditLogData && <AuditLogTable auditLogData={auditLogData} auditData={auditData} refresh={refresh} />}
+    </When>
   </div>
 );
 
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
index 8533f70e7..ec2e28b5c 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -650,7 +650,7 @@ const DataCard = ({
                   hidden: selected.includes("6")
                 })}
                 optionsClassName="!w-max right-0"
-                className="w-max"
+                className="!h-8 w-max"
                 options={polygonOptions}
                 defaultValue={["0"]}
                 onChange={option => setSelectedPolygonUuid(option[0])}
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
index 9ca86a03d..3b00446ab 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
@@ -102,7 +102,8 @@ const EcoRegionDoughnutChart: React.FC<EcoRegionDoughnutChartProps> = ({ data })
   };
 
   return (
-    <div className="relative flex h-80 w-full items-center justify-center">
+    <div className="relative flex h-[380px] w-full flex-col items-center justify-center p-4 pt-0">
+      <h2 className="text-14 w-full pl-10 uppercase text-darkCustom">Hectares Under Restoration By WWF EcoRegion</h2>
       <ResponsiveContainer width="100%" height="100%">
         <PieChart>
           <Tooltip content={<CustomTooltip />} />
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
index 16cbee3ff..95da0709c 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
@@ -138,8 +138,12 @@ const MonitoredCharts = ({
       case "5":
         return (
           <ChartContainer isLoading={isLoadingIndicator} hasNoData={!landUseData?.graphicTargetLandUseTypes?.length}>
-            <div className="w-full pt-[38px]">
-              <GraphicIconDashboard data={landUseData.graphicTargetLandUseTypes} maxValue={totalHectaresRestoredGoal} />
+            <div className="w-full">
+              <GraphicIconDashboard
+                title="Hectares Under Restoration By Target Land Use System"
+                data={landUseData.graphicTargetLandUseTypes}
+                maxValue={totalHectaresRestoredGoal}
+              />
             </div>
           </ChartContainer>
         );
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx
index 772cc6150..66f3b0172 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx
@@ -36,8 +36,8 @@ const TreeLossBarChart = ({ data, className = "" }: TreeLossBarChartProps) => {
   };
 
   return (
-    <div className={`h-[500px] w-full p-4 ${className} pt-2.5`}>
-      <h2 className="text-12 mb-1 pl-10">Tree Loss Retrospective (ha)</h2>
+    <div className={`h-[500px] w-full p-4 ${className} pt-0`}>
+      <h2 className="text-14 mb-3 pl-10 uppercase text-darkCustom">Tree Loss Retrospective (ha)</h2>
       <h3 className="text-14-semibold mb-4 pl-10">2015-2024</h3>
       <ResponsiveContainer width="100%" height="100%">
         <BarChart
diff --git a/src/pages/dashboard/components/GraphicIconDashboard.tsx b/src/pages/dashboard/components/GraphicIconDashboard.tsx
index fc123b7f7..583272a8e 100644
--- a/src/pages/dashboard/components/GraphicIconDashboard.tsx
+++ b/src/pages/dashboard/components/GraphicIconDashboard.tsx
@@ -9,7 +9,15 @@ import { getPercentage } from "@/utils/dashboardUtils";
 
 import { DashboardTableDataProps } from "../index.page";
 
-const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProps[]; maxValue: number }) => {
+const GraphicIconDashboard = ({
+  data,
+  maxValue,
+  title
+}: {
+  data: DashboardTableDataProps[];
+  maxValue: number;
+  title?: string;
+}) => {
   const t = useT();
   const [tooltip, setTooltip] = useState<{
     text: string | null;
@@ -67,6 +75,11 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
 
   return (
     <div className="relative grid w-full gap-4">
+      <When condition={title}>
+        <Text variant="text-14" className="text-14 mb-1 uppercase text-darkCustom">
+          {title}
+        </Text>
+      </When>
       <When condition={data.length > 0}>
         <div className="relative flex h-9 w-full rounded bg-blueCustom-30 first:rounded-l first-of-type:rounded-l lg:h-10">
           {data.map((item, index) => {
diff --git a/src/pages/project/[uuid]/tabs/AuditLog.tsx b/src/pages/project/[uuid]/tabs/AuditLog.tsx
index 71b957309..0339eb275 100644
--- a/src/pages/project/[uuid]/tabs/AuditLog.tsx
+++ b/src/pages/project/[uuid]/tabs/AuditLog.tsx
@@ -62,7 +62,7 @@ const AuditLog = ({ label, project, refresh: refreshProject, enableChangeStatus,
                 <div className="grid w-[64%] gap-6">
                   <AuditLogSiteTabSelection buttonToggle={buttonToggle} setButtonToggle={setButtonToggle} />
                   <When condition={buttonToggle === ButtonStates.PROJECTS}>
-                    <SiteAuditLogProjectStatus record={project} auditLogData={auditLogData} />
+                    <SiteAuditLogProjectStatus viewPD={true} record={project} auditLogData={auditLogData} />
                   </When>
                   <When condition={buttonToggle !== ButtonStates.PROJECTS}>
                     <SiteAuditLogEntityStatus