Fix/tm 1425 add color tag monitored table (#768)

* [TM-1527] Update the defaults. * [TM-1425] fix error color tag in table monitored * [TM-1425] fix error table link --------- Co-authored-by: Nathan Curtis <[email protected]>
wri · Dec 18, 2024 · 29e71a0 · 29e71a0
1 parent f9bed09
commit 29e71a0
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 146 deletions.
diff --git a/next.config.js b/next.config.js
@@ -45,8 +45,8 @@ const userSentryWebpackPluginOptions = {
   // Suppresses source map uploading logs during build
   silent: true,
 
-  org: process.env.SENTRY_ORG || "3-sided-cube",
-  project: process.env.SENTRY_PROJECT || "wri-web-platform-version-2",
+  org: process.env.SENTRY_ORG ?? "wri-terramatch",
+  project: process.env.SENTRY_PROJECT ?? "terramatch-frontend",
   authToken: process.env.SENTRY_AUTH_TOKEN
 };
 

diff --git a/src/admin/components/Fields/CustomChipField.tsx b/src/admin/components/Fields/CustomChipField.tsx
@@ -16,7 +16,10 @@ const STATUS_CLASSNAME_MAP: { [key: string]: string } = {
   "Needs Info": "bg-tertiary-50 text-tertiary-650",
   "Needs more information": "bg-tertiary-50 text-tertiary-650",
   "More info requested": "bg-tertiary-50 text-tertiary-650",
-  "No Update": "bg-grey-200 text-grey-500"
+  "No Update": "bg-grey-200 text-grey-500",
+  approved: "bg-green-30 text-green-100",
+  submitted: "bg-blue-200 text-blue",
+  "needs-more-information": "bg-tertiary-50 text-tertiary-650"
 };
 
 const CustomChipField = ({

diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -120,144 +120,6 @@ const COMMON_COLUMNS: ColumnDef<RowData>[] = [
 
 type CustomColumnDefInternal<TData> = ColumnDef<TData> & { type?: string };
 
-const TABLE_COLUMNS_HECTARES_STRATEGY: ColumnDef<RowData>[] = [
-  ...COMMON_COLUMNS,
-  {
-    accessorKey: "data.tree_planting",
-    header: "Tree Planting",
-    cell: (props: any) => {
-      const value = props.getValue();
-      return value ?? "-";
-    },
-    meta: { style: { width: "11.95%" } }
-  },
-  {
-    accessorKey: "data.assisted_natural_regeneration",
-    header: () => (
-      <>
-        Asst. Nat.
-        <br />
-        Regeneration
-      </>
-    ),
-    cell: (props: any) => {
-      const value = props.getValue();
-      return value ?? "-";
-    },
-    meta: { style: { width: "12.09%" } }
-  },
-  {
-    accessorKey: "data.direct_seeding",
-    header: () => (
-      <>
-        Direct
-        <br />
-        Seeding
-      </>
-    ),
-    cell: (props: any) => {
-      const value = props.getValue();
-      return value ?? "-";
-    },
-    meta: { style: { width: "8.57%" } }
-  },
-  {
-    accessorKey: "more",
-    header: "",
-    enableSorting: false,
-    cell: props => (
-      <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
-        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
-      </div>
-    ),
-    meta: { style: { width: "5%" } }
-  }
-];
-
-const TABLE_COLUMNS_HECTARES_ECO_REGION: ColumnDef<RowData>[] = [
-  ...COMMON_COLUMNS,
-  {
-    accessorKey: "data.australasian",
-    header: "Australasian",
-    cell: (props: any) => {
-      const value = props.getValue();
-      return value ?? "-";
-    },
-    meta: { style: { width: "11.45%" } }
-  },
-  {
-    accessorKey: "data.afrotropical",
-    header: "Afrotropical",
-    cell: (props: any) => {
-      const value = props.getValue();
-      return value ?? "-";
-    },
-    meta: { style: { width: "11.05%" } }
-  },
-  {
-    accessorKey: "data.paleartic",
-    header: "Paleartic11",
-    cell: (props: any) => {
-      const value = props.getValue();
-      return value ?? "-";
-    },
-    meta: { style: { width: "10.33%" } }
-  },
-  {
-    accessorKey: "more",
-    header: "",
-    enableSorting: false,
-    cell: props => (
-      <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
-        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
-      </div>
-    ),
-    meta: { style: { width: "5%" } }
-  }
-];
-
-const TABLE_COLUMNS_HECTARES_LAND_USE: ColumnDef<RowData>[] = [
-  ...COMMON_COLUMNS,
-  {
-    accessorKey: "data.agroforest",
-    header: "Agroforest",
-    cell: (props: any) => {
-      const value = props.getValue();
-      return value ?? "-";
-    },
-    meta: { style: { width: "11.95%" } }
-  },
-  {
-    accessorKey: "data.natural_forest",
-    header: "Natural Forest",
-    cell: (props: any) => {
-      const value = props.getValue();
-      return value ?? "-";
-    },
-    meta: { style: { width: "12.09%" } }
-  },
-  {
-    accessorKey: "data.mangrove",
-    header: "Mangrove",
-    cell: (props: any) => {
-      const value = props.getValue();
-      return value ?? "-";
-    },
-    meta: { style: { width: "8.57%" } }
-  },
-  {
-    accessorKey: "more",
-    header: "",
-    enableSorting: false,
-    cell: props => (
-      <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
-        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
-      </div>
-    ),
-    meta: { style: { width: "5%" } }
-  }
-];
-
 const DROPDOWN_OPTIONS = [
   {
     title: "Tree Cover Loss",
@@ -549,7 +411,9 @@ const DataCard = ({
           enableSorting: false,
           cell: props => (
             <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
-              <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
+              <button onClick={() => navigate(`${basename}/site/${(props.row.original as any)?.site_id}/show/1`)}>
+                <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
+              </button>
             </div>
           ),
           meta: { style: { top: `${topHeaderFirstTable}`, borderRadius: "0" } }
@@ -558,6 +422,150 @@ const DataCard = ({
     }
   ];
 
+  const TABLE_COLUMNS_HECTARES_STRATEGY: ColumnDef<RowData>[] = [
+    ...COMMON_COLUMNS,
+    {
+      accessorKey: "data.tree_planting",
+      header: "Tree Planting",
+      cell: (props: any) => {
+        const value = props.getValue();
+        return value ?? "-";
+      },
+      meta: { style: { width: "11.95%" } }
+    },
+    {
+      accessorKey: "data.assisted_natural_regeneration",
+      header: () => (
+        <>
+          Asst. Nat.
+          <br />
+          Regeneration
+        </>
+      ),
+      cell: (props: any) => {
+        const value = props.getValue();
+        return value ?? "-";
+      },
+      meta: { style: { width: "12.09%" } }
+    },
+    {
+      accessorKey: "data.direct_seeding",
+      header: () => (
+        <>
+          Direct
+          <br />
+          Seeding
+        </>
+      ),
+      cell: (props: any) => {
+        const value = props.getValue();
+        return value ?? "-";
+      },
+      meta: { style: { width: "8.57%" } }
+    },
+    {
+      accessorKey: "more",
+      header: "",
+      enableSorting: false,
+      cell: props => (
+        <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+          <button onClick={() => navigate(`${basename}/site/${(props.row.original as any)?.site_id}/show/1`)}>
+            <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
+          </button>
+        </div>
+      ),
+      meta: { style: { width: "5%" } }
+    }
+  ];
+
+  const TABLE_COLUMNS_HECTARES_ECO_REGION: ColumnDef<RowData>[] = [
+    ...COMMON_COLUMNS,
+    {
+      accessorKey: "data.australasian",
+      header: "Australasian",
+      cell: (props: any) => {
+        const value = props.getValue();
+        return value ?? "-";
+      },
+      meta: { style: { width: "11.45%" } }
+    },
+    {
+      accessorKey: "data.afrotropical",
+      header: "Afrotropical",
+      cell: (props: any) => {
+        const value = props.getValue();
+        return value ?? "-";
+      },
+      meta: { style: { width: "11.05%" } }
+    },
+    {
+      accessorKey: "data.paleartic",
+      header: "Paleartic11",
+      cell: (props: any) => {
+        const value = props.getValue();
+        return value ?? "-";
+      },
+      meta: { style: { width: "10.33%" } }
+    },
+    {
+      accessorKey: "more",
+      header: "",
+      enableSorting: false,
+      cell: props => (
+        <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+          <button onClick={() => navigate(`${basename}/site/${(props.row.original as any)?.site_id}/show/1`)}>
+            <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
+          </button>
+        </div>
+      ),
+      meta: { style: { width: "5%" } }
+    }
+  ];
+
+  const TABLE_COLUMNS_HECTARES_LAND_USE: ColumnDef<RowData>[] = [
+    ...COMMON_COLUMNS,
+    {
+      accessorKey: "data.agroforest",
+      header: "Agroforest",
+      cell: (props: any) => {
+        const value = props.getValue();
+        return value ?? "-";
+      },
+      meta: { style: { width: "11.95%" } }
+    },
+    {
+      accessorKey: "data.natural_forest",
+      header: "Natural Forest",
+      cell: (props: any) => {
+        const value = props.getValue();
+        return value ?? "-";
+      },
+      meta: { style: { width: "12.09%" } }
+    },
+    {
+      accessorKey: "data.mangrove",
+      header: "Mangrove",
+      cell: (props: any) => {
+        const value = props.getValue();
+        return value ?? "-";
+      },
+      meta: { style: { width: "8.57%" } }
+    },
+    {
+      accessorKey: "more",
+      header: "",
+      enableSorting: false,
+      cell: props => (
+        <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+          <button onClick={() => navigate(`${basename}/site/${(props.row.original as any)?.site_id}/show/1`)}>
+            <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
+          </button>
+        </div>
+      ),
+      meta: { style: { width: "5%" } }
+    }
+  ];
+
   const TABLE_COLUMNS_MAPPING: Record<string, any> = {
     treeCoverLoss: TABLE_COLUMNS_TREE_COVER_LOSS,
     treeCoverLossFires: TABLE_COLUMNS_TREE_COVER_LOSS,
@@ -636,10 +644,6 @@ const DataCard = ({
                 classNameWrapper="!overflow-visible"
                 visibleRows={50}
                 border={1}
-                onRowClick={(row: any) => {
-                  navigate(`${basename}/site/${row?.site_id}/show/1`);
-                  setSelectPolygonFromMap?.({ isOpen: true, uuid: row?.poly_id });
-                }}
               />
             </div>
           </When>