Feat/Update Components with Latest Changes

src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx

@@ -42,9 +42,9 @@ const GoalProgressCard: FC<GoalProgressCardProps> = ({
             {label}
           </Text>
           <Text variant="text-24-bold" className="flex w-full items-baseline">
-            {value}&nbsp;
+            {value?.toLocaleString()}&nbsp;
             <When condition={!!limit}>
-              <Text variant="text-16-light">of {limit}</Text>
+              <Text variant="text-16-light">of {limit?.toLocaleString()}</Text>
             </When>
             <Text variant="text-16-light">{labelValue}</Text>
           </Text>

src/components/elements/Cards/GoalProgressCard/GoalProgressCardItem.tsx

@@ -20,9 +20,7 @@ const GoalProgressCardItem: FC<GoalProgressCardItemProps> = ({ iconName, label,
         {label}
       </Text>
 
-      <Text variant="text-14-bold" className="">
-        {value}
-      </Text>
+      <Text variant="text-14-bold">{value?.toLocaleString()}</Text>
     </div>
   );
 };

src/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards.tsx

@@ -9,7 +9,7 @@ import ToolTip from "@/components/elements/Tooltip/Tooltip";
 
 import Icon, { IconNames } from "../../../extensive/Icon/Icon";
 
-export interface LeyendItemMonitoringCardsProps {
+export interface LegendItemMonitoringCardsProps {
   title: string;
   color: string;
 }
@@ -27,7 +27,7 @@ export interface ItemMonitoringCardsProps
   className?: string;
   img?: IconNames;
   type?: "graph" | "map" | "graph-button";
-  legends?: LeyendItemMonitoringCardsProps[];
+  legends?: LegendItemMonitoringCardsProps[];
 }
 
 const ItemMonitoringCards = ({

src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx

@@ -18,6 +18,7 @@ export interface UserRoleCardProps {
   setSelectedOption?: any;
   refContentCard?: React.RefObject<HTMLDivElement>;
   selectedOption?: string;
+  icon?: IconNames;
 }
 
 const UserRoleCard: React.FC<UserRoleCardProps> = ({
@@ -29,7 +30,8 @@ const UserRoleCard: React.FC<UserRoleCardProps> = ({
   setSelectedOption,
   refContentCard,
   selectedOption,
-  menu
+  menu,
+  icon
 }) => {
   const t = useT();
   const MenuOption: MenuItemProps[] = options ?? [
@@ -64,7 +66,7 @@ const UserRoleCard: React.FC<UserRoleCardProps> = ({
       })}
     >
       <div className="rounded-lg border border-grey-350 p-2">
-        <Icon name={IconNames.USER_ROLE} className="h-10 w-10 lg:h-11 lg:w-11 wide:h-12 wide:w-12" />
+        <Icon name={icon ?? IconNames.USER_ROLE} className="h-10 w-10 lg:h-11 lg:w-11 wide:h-12 wide:w-12" />
       </div>
       <div className="flex flex-1 flex-col items-start gap-1">
         <Text variant="text-12-bold" className="text-darkCustom">

src/components/elements/Commentary/Commentary.tsx

@@ -10,7 +10,7 @@ export interface CommentaryProps {
   lastName: string;
   date: string;
   commentary: string;
-  status?: "draft" | "submitted";
+  status?: string;
   files?: CommentaryFilesProps[];
 }
 
@@ -21,14 +21,15 @@ const statusStyle = {
 
 const Commentary = (props: CommentaryProps) => {
   const { name, lastName, date, commentary, files = [], status } = props;
+  const statusKey = status as keyof typeof statusStyle;
   return (
     <div className="flex flex-col gap-2">
       <div className="flex justify-between">
         <div className="flex items-center gap-2">
           <div className="ml-3 flex h-fit min-h-[32px] min-w-[32px] items-center justify-center rounded-full bg-primary-500">
             <Text variant="text-14-semibold" className="uppercase text-white">
-              {name[0]}
-              {lastName[0]}
+              {name?.[0]}
+              {lastName?.[0]}
             </Text>
           </div>
           <div className="flex w-full flex-col gap-1">
@@ -43,27 +44,26 @@ const Commentary = (props: CommentaryProps) => {
         <When condition={status}>
           <div
             className={`flex h-fit w-[92px] items-center justify-center rounded-xl py-2 ${
-              status ? statusStyle[status].container : ""
+              status ? statusStyle[statusKey].container : ""
             }`}
           >
-            <Text variant="text-12-semibold" className={`${status ? statusStyle[status].textColor : ""}`}>
+            <Text variant="text-12-semibold" className={`${status ? statusStyle[statusKey].textColor : ""}`}>
               {status}
             </Text>
           </div>
         </When>
       </div>
-
       <Text
         variant="text-12-light"
         className="max-h-72 overflow-auto rounded-2xl border border-grey-750 p-3 leading-[175%] text-blueCustom-250 opacity-50"
       >
         {commentary}
       </Text>
       <div className="flex flex-wrap gap-2">
-        {files.map(file => (
+        {files?.map((file: any) => (
           <div key={file.id} className="rounded-xl bg-neutral-150 px-2 py-1">
             <Text variant="text-14-light" className="text-grey-700">
-              {file.file}
+              {file?.attachment}
             </Text>
           </div>
         ))}

src/components/elements/Inputs/Checkbox/Checkbox.tsx

@@ -15,11 +15,24 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
   className?: string;
   textClassName?: string;
   inputClassName?: string;
+  errorClassName?: string;
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (
-    { label, required, error, className, disabled, defaultChecked, textClassName, form, inputClassName, ...props },
+    {
+      label,
+      required,
+      error,
+      className,
+      disabled,
+      defaultChecked,
+      textClassName,
+      form,
+      inputClassName,
+      errorClassName,
+      ...props
+    },
     ref
   ) => {
     const id = useId();
@@ -75,7 +88,10 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           )}
         />
         <When condition={!!error}>
-          <Text variant="text-body-500" className="absolute right-0 -bottom-6 w-full text-right text-error">
+          <Text
+            variant="text-body-500"
+            className={classNames("absolute right-0 -bottom-6 w-full text-right text-error", errorClassName)}
+          >
             {t(error?.message ?? "")}
           </Text>
         </When>

src/components/elements/Inputs/Dropdown/Dropdown.tsx

@@ -47,6 +47,7 @@ export interface DropdownProps {
   feedbackRequired?: boolean;
   formHook?: UseFormReturn;
   onChangeConfirm?: boolean;
+  disableOptionTitles?: string[] | undefined;
   setOnChangeConfirm?: (confirm: boolean) => void;
   onChange: (value: OptionValue[]) => void;
   onInternalError?: (error: ErrorOption) => void;
@@ -136,6 +137,10 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [otherIsSelected, otherValue, t]);
 
+  const verifyDisableOption = (title: string) => {
+    return props?.disableOptionTitles?.includes(title);
+  };
+
   return (
     <div className={tw("space-y-2", props.containerClassName)}>
       <Listbox value={selected} defaultValue={selected} onChange={onChange} multiple={props.multiSelect}>
@@ -197,7 +202,7 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
               <Listbox.Options
                 as="div"
                 className={tw(
-                  "border-light absolute mt-2 max-h-[400px] min-w-full overflow-auto rounded-lg bg-white",
+                  "border-light absolute mt-2 max-h-[235px] min-w-full overflow-auto rounded-lg bg-white lg:max-h-[250px] wide:max-h-[266px]",
                   props.optionsClassName
                 )}
               >
@@ -218,9 +223,11 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
                           "w-full cursor-pointer hover:bg-primary-100",
                           props.multiSelect ? "p-3.5" : "p-3",
                           isSelected && !props.multiSelect && "bg-primary-100",
-                          props.optionClassName
+                          props.optionClassName,
+                          verifyDisableOption(option.title) ? "cursor-not-allowed bg-grey-750 hover:bg-grey-750" : ""
                         )
                       )}
+                      disabled={verifyDisableOption(option.title)}
                     >
                       <If condition={props.multiSelect}>
                         <Then>

src/components/elements/Inputs/Dropdown/constants/colorMap.ts

@@ -1,7 +1,9 @@
 export const COLOR_MAP: { [key: string]: string } = {
-  approved: "bg-green",
+  approved: "bg-secondary",
   submitted: "bg-blue",
   draft: "bg-pinkCustom",
   "Under Review": "bg-tertiary-600",
-  "Needs More Info": "bg-tertiary-600"
+  "needs-more-information": "bg-tertiary-600",
+  "planting-in-progress": "bg-blue",
+  "awaiting-approval": "bg-tertiary-600"
 };

src/components/elements/Inputs/Input/Input.tsx

@@ -25,7 +25,7 @@ export interface InputProps
   descriptionClassName?: string;
   descriptionFooter?: string;
   format?: "number";
-  sufixLabelView?: boolean;
+  suffixLabelView?: boolean;
   classNameContainerInput?: string;
   classNameError?: string;
 }
@@ -61,7 +61,7 @@ const Input = forwardRef(
       labelVariant,
       readOnly,
       format,
-      sufixLabelView,
+      suffixLabelView,
       classNameContainerInput,
       classNameError,
       ...inputWrapperProps
@@ -79,6 +79,7 @@ const Input = forwardRef(
       ...inputProps
     } = inputWrapperProps;
     const id = useId();
+    const customVariantClasses = customVariant ? customVariant : {};
     const variantClasses = {
       default: {
         "px-3 py-[9px] rounded-lg focus:border-primary-500": true,
@@ -113,7 +114,7 @@ const Input = forwardRef(
       "w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent",
       { ...variantClasses[variant] },
       { ["border border-error focus:border-error"]: error },
-      customVariant
+      customVariantClasses
     );
 
     const clearInput = () => formHook?.setValue(inputWrapperProps.name, "");
@@ -159,6 +160,14 @@ const Input = forwardRef(
       input.value = formattedValue;
     };
 
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (format === "number") {
+        formatNumber(event);
+      } else if (inputProps.type === "password") {
+        registeredFormProps?.onChange(event);
+      }
+    };
+
     return (
       <InputWrapper
         inputId={id}
@@ -172,15 +181,15 @@ const Input = forwardRef(
         feedbackRequired={feedbackRequired}
         labelClassName={labelClassName}
         descriptionClassName={descriptionClassName}
-        sufixLabelView={sufixLabelView}
+        suffixLabelView={suffixLabelView}
         classNameError={classNameError}
       >
         <div className={classNames("relative", classNameContainerInput)}>
           <input
             {...inputProps}
             {...registeredFormProps}
             onKeyDown={inputProps.type === "number" ? preventScientificNumbers : undefined}
-            onChange={format === "number" ? formatNumber : undefined}
+            onChange={handleChange}
             ref={registeredFormProps?.ref || ref}
             id={id}
             className={inputClasses}

src/components/elements/Inputs/InputElements/InputWrapper.tsx

@@ -21,7 +21,7 @@ export interface InputWrapperProps {
   feedbackRequired?: boolean;
   labelClassName?: string;
   descriptionClassName?: string;
-  sufixLabelView?: boolean;
+  suffixLabelView?: boolean;
   classNameError?: string;
 }
 
@@ -34,7 +34,7 @@ const InputWrapper = (props: PropsWithChildren<InputWrapperProps>) => {
         feedbackRequired={props.feedbackRequired}
         labelVariant={props.labelVariant}
         className={props.labelClassName}
-        suffixLabelView={props.sufixLabelView}
+        suffixLabelView={props.suffixLabelView}
       >
         {props.label}
       </InputLabel>

src/components/elements/Inputs/textArea/TextArea.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import { ChangeEvent, DetailedHTMLProps, TextareaHTMLAttributes, useCallback, useId, useState } from "react";
+import { ChangeEvent, DetailedHTMLProps, TextareaHTMLAttributes, useCallback, useEffect, useId, useState } from "react";
 import { UseFormReturn } from "react-hook-form";
 
 import InputWrapper, { InputWrapperProps } from "@/components/elements/Inputs/InputElements/InputWrapper";
@@ -32,10 +32,12 @@ const TextArea = ({ formHook, className, onChange: externalOnChange, ...inputWra
     { "border-light ": !error },
     { ["border border-error focus:border-error"]: error }
   );
-  if (error && formHook?.watch(inputWrapperProps.name)) {
-    formHook?.trigger();
-    formHook?.reset(formHook.getValues());
-  }
+  useEffect(() => {
+    if (inputProps.value === "") {
+      setTextValue("");
+    }
+  }, [inputProps.value]);
+
   const [textValue, setTextValue] = useState("");
   const handleTextAreaChange = useCallback(
     (event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -46,6 +48,7 @@ const TextArea = ({ formHook, className, onChange: externalOnChange, ...inputWra
   );
   const { textareaProps } = useTextAreaAuto(handleTextAreaChange, textValue?.toString());
   const mergedProps = { ...inputProps, ...textareaProps };
+
   return (
     <InputWrapper
       inputId={id}

src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot

@@ -26,6 +26,7 @@ exports[`Storyshots Components/Elements/Inputs/TextArea Default 1`] = `
     id=":r2g:"
     onChange={[Function]}
     placeholder="Input placeholder"
+    value=""
   />
 </div>
 `;

src/components/elements/Map-mapbox/Map.tsx

@@ -14,13 +14,11 @@ import { ValidationError } from "yup";
 
 import ControlGroup from "@/components/elements/Map-mapbox/components/ControlGroup";
 import { EditControl } from "@/components/elements/Map-mapbox/MapControls/EditControl";
-import { FeatureDetailCard } from "@/components/elements/Map-mapbox/MapControls/FeatureDetailCard";
 import { FilterControl } from "@/components/elements/Map-mapbox/MapControls/FilterLayer";
 import { StyleControl } from "@/components/elements/Map-mapbox/MapControls/StyleControl";
 import { MapStyle } from "@/components/elements/Map-mapbox/MapControls/types";
 import { ZoomControl } from "@/components/elements/Map-mapbox/MapControls/ZoomControl";
 import { GeoJSONLayer } from "@/components/elements/Map-mapbox/MapLayers/GeoJsonLayer";
-import { ImagesLayer } from "@/components/elements/Map-mapbox/MapLayers/ImagesLayer";
 import {
   AdditionalPolygonProperties,
   user_shapePropertiesValidationSchema
@@ -29,6 +27,9 @@ import mapStyles from "@/components/elements/Map-mapbox/mapStyle";
 import MapProvider from "@/context/map.provider";
 import { useDebounce } from "@/hooks/useDebounce";
 
+import { FeatureDetailCard } from "./MapControls/FeatureDetailCard";
+import { ImagesLayer } from "./MapLayers/ImagesLayer";
+
 mapboxgl.accessToken =
   process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN ||
   "pk.eyJ1IjoiM3NpZGVkY3ViZSIsImEiOiJjam55amZrdjIwaWY3M3FueDAzZ3ZjeGR2In0.DhSsxs-8XhbTgoVmFcs94Q";

src/components/elements/Map-mapbox/MapControls/FeatureDetailCard.tsx

@@ -5,7 +5,6 @@ import { useEffect } from "react";
 import { When } from "react-if";
 
 import IconButton from "@/components/elements/IconButton/IconButton";
-import { useOnHoverFeature } from "@/components/elements/Map-mapbox/hooks/useOnHoverFeature";
 import { useSelectFeature } from "@/components/elements/Map-mapbox/hooks/useSelectFeature";
 import {
   AdditionalPolygonProperties,
@@ -22,6 +21,8 @@ import { useMapContext } from "@/context/map.provider";
 import { useModalContext } from "@/context/modal.provider";
 import { formatOptionsList, getOptionTitle } from "@/utils/options";
 
+import { useOnHoverFeature } from "../hooks/useOnHoverFeature";
+
 interface FeatureDetailCardProps {
   editable?: boolean;
   additionalPolygonProperties?: AdditionalPolygonProperties;

src/components/elements/Map-mapbox/MapControls/ZoomControl.tsx

@@ -15,7 +15,7 @@ export const ZoomControl = () => {
           width: 16
         }}
         onClick={() => map?.zoomIn()}
-        className="h-8 w-8 rounded-b-none rounded-t-lg"
+        className="h-8 w-8 rounded-t-lg rounded-b-none"
         aria-label="Zoom in"
       />
       <ControlDivider direction="horizontal" />