Merge pull request #219 from wri/feat/admin_add_new_view

Feat/ Add style to new admin view

src/admin/components/Actions/ListActionsCreate.tsx

@@ -6,11 +6,11 @@ interface ListActionsCreateProps {
   onExport?: () => void;
 }
 
-const ListActionsCreate = (props: ListActionsCreateProps) => (
+const ListActionsCreate = ({ onExport }: ListActionsCreateProps) => (
   <TopToolbar>
     <CreateButton className="filter-button-page-admin" />
-    <When condition={!!props.onExport}>
-      <Button className="button-page-admin" label="Export" startIcon={<DownloadIcon />} onClick={props.onExport} />
+    <When condition={!!onExport}>
+      <Button className="button-page-admin" label="Export" startIcon={<DownloadIcon />} onClick={onExport} />
     </When>
   </TopToolbar>
 );

src/admin/components/ResourceTabs/PolygonReviewTab/components/ComentarySection/ComentarySection.tsx

@@ -0,0 +1,69 @@
+import { When } from "react-if";
+
+import Commentary from "@/components/elements/Commentary/Commentary";
+import CommentaryBox from "@/components/elements/CommentaryBox/CommentaryBox";
+import Text from "@/components/elements/Text/Text";
+import Loader from "@/components/generic/Loading/Loader";
+import { useGetAuthMe } from "@/generated/apiComponents";
+
+const ComentarySection = ({
+  auditLogData,
+  refresh,
+  record,
+  entity,
+  viewCommentsList = true,
+  attachmentRefetch
+}: {
+  auditLogData?: any;
+  refresh?: any;
+  record?: any;
+  entity?: "Project" | "SitePolygon" | "Site";
+  viewCommentsList?: boolean;
+  attachmentRefetch?: any;
+}) => {
+  const { data: authMe } = useGetAuthMe({}) as {
+    data: {
+      data: any;
+      first_name: string;
+      last_name: string;
+    };
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Text variant="text-16-bold">Send Comment</Text>
+      <CommentaryBox
+        name={authMe?.data.first_name}
+        lastName={authMe?.data.last_name}
+        refresh={refresh}
+        record={record}
+        entity={entity}
+      />
+      <When condition={viewCommentsList}>
+        <div className="max-h-[60vh] min-h-[10vh] grid-cols-[14%_20%_18%_15%_33%] overflow-auto">
+          {auditLogData ? (
+            auditLogData.length > 0 ? (
+              auditLogData
+                .filter((item: any) => item.type === "comment")
+                .map((item: any) => (
+                  <Commentary
+                    key={item.id}
+                    name={item?.first_name || item.created_by}
+                    lastName={item?.last_name}
+                    date={item.date_created}
+                    comentary={item.comment}
+                  />
+                ))
+            ) : (
+              <></>
+            )
+          ) : (
+            <Loader />
+          )}
+        </div>
+      </When>
+    </div>
+  );
+};
+
+export default ComentarySection;

src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/PolygonValidation.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Else, If, Then } from "react-if";
+
+import Button from "@/components/elements/Button/Button";
+import Text from "@/components/elements/Text/Text";
+import Icon from "@/components/extensive/Icon/Icon";
+import { IconNames } from "@/components/extensive/Icon/Icon";
+
+export interface ICriteriaCheckItemProps {
+  id: string;
+  status: boolean;
+  label: string;
+  date?: string;
+}
+
+export interface ICriteriaCheckProps {
+  menu: ICriteriaCheckItemProps[];
+  clickedValidation: (value: boolean) => void;
+  status: boolean;
+}
+const PolygonValidation = (props: ICriteriaCheckProps) => {
+  const { clickedValidation, status, menu } = props;
+  const [failedValidationCounter, setFailedValidationCounter] = useState(0);
+  const [lastValidationDate, setLastValidationDate] = useState(new Date("1970-01-01"));
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const formattedDate = (dateObject: Date) => {
+    const localDate = new Date(dateObject.getTime() - dateObject.getTimezoneOffset() * 60000);
+    return `${localDate.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit"
+    })} on ${localDate.toLocaleDateString("en-US", {
+      month: "short",
+      day: "2-digit",
+      year: "numeric"
+    })}`;
+  };
+
+  useEffect(() => {
+    if (menu) {
+      const lastValidationDate = menu.reduce((latestDate, record) => {
+        const currentDate = record.date ? new Date(record.date) : null;
+        return currentDate && currentDate > latestDate ? currentDate : latestDate;
+      }, new Date("1970-01-01"));
+      setLastValidationDate(lastValidationDate);
+
+      const failedValidationCounter = menu.reduce((count, record) => {
+        return record.status === false ? count + 1 : count;
+      }, 0);
+      setFailedValidationCounter(failedValidationCounter);
+    }
+  }, [menu]);
+
+  return (
+    <div>
+      <Button variant="orange" className="mb-4 px-10" onClick={() => clickedValidation(true)}>
+        Check Polygon
+      </Button>
+      <If condition={status}>
+        <Then>
+          <div className="mb-1 flex items-center">
+            <Text variant="text-14-bold" className="text-darkCustom">
+              {`${failedValidationCounter} out of ${menu.length}`} &nbsp;
+            </Text>
+            <Text variant="text-14" className="text-darkCustom">
+              criteria are not met
+            </Text>
+          </div>
+          <Text variant="text-10-light" className="mb-4 text-blueCustom-900 opacity-80">
+            Last check at {formattedDate(lastValidationDate)}
+          </Text>
+          <div ref={containerRef} className="flex max-h-[168px] flex-col gap-3 overflow-auto">
+            {menu.map(item => (
+              <div key={item.id} className="flex items-center gap-2">
+                <Icon name={item.status ? IconNames.ROUND_GREEN_TICK : IconNames.ROUND_RED_CROSS} className="h-4 w-4" />
+                <Text variant="text-14-light">{item.label}</Text>
+              </div>
+            ))}
+          </div>
+        </Then>
+        <Else>
+          <Text variant="text-14" className="text-darkCustom">
+            No criteria checked yet
+          </Text>
+        </Else>
+      </If>
+    </div>
+  );
+};
+
+export default PolygonValidation;

src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx

@@ -0,0 +1,40 @@
+import { useT } from "@transifex/react";
+
+import Button from "@/components/elements/Button/Button";
+import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown";
+
+const dropdownOptions = [
+  {
+    title: "1213023412",
+    value: 1
+  },
+  {
+    title: "1213023414",
+    value: 2
+  }
+];
+const VersionHistory = () => {
+  const t = useT();
+  return (
+    <div className="flex flex-col gap-4">
+      <Dropdown
+        label="Polygon Version"
+        labelClassName="capitalize"
+        labelVariant="text-14-light"
+        options={dropdownOptions}
+        defaultValue={[1]}
+        onChange={() => {}}
+      />
+      <div className="mt-auto flex items-center justify-end gap-5">
+        <Button variant="semi-red" className="w-full">
+          {t("Delete")}
+        </Button>
+        <Button variant="semi-black" className="w-full">
+          {t("Create")}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default VersionHistory;