added warranty filters and labels for assets

src/Components/Assets/AssetFilter.tsx

@@ -14,6 +14,11 @@ import { AssetClass, AssetLocationObject } from "./AssetTypes";
 import { FieldLabel } from "../Form/FormFields/FormField";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
+import DateRangeFormField from "../Form/FormFields/DateRangeFormField";
+import dayjs from "dayjs";
+import { FieldChangeEvent } from "../Form/FormFields/Utils";
+import { DateRange } from "../Common/DateRangeInputV2";
+import { dateQueryString } from "../../Utils/utils";
 
 const initialLocation = {
   id: "",
@@ -25,6 +30,9 @@ const initialLocation = {
   },
 };
 
+const getDate = (value: any) =>
+  value && dayjs(value).isValid() && dayjs(value).toDate();
+
 function AssetFilter(props: any) {
   const { filter, onChange, closeFilter } = props;
   const dispatch: any = useDispatch();
@@ -40,6 +48,10 @@ function AssetFilter(props: any) {
   );
   const [facilityId, setFacilityId] = useState<number | "">(filter.facility);
   const [locationId, setLocationId] = useState<string | "">(filter.location);
+  const [warrantyExpiry, setWarrantyExpiry] = useState({
+    before: filter.warranty_amc_end_of_validity_before || null,
+    after: filter.warranty_amc_end_of_validity_after || null,
+  });
   const [qParams, _] = useQueryParams();
 
   useEffect(() => {
@@ -112,6 +124,10 @@ function AssetFilter(props: any) {
       asset_class: asset_class ?? "",
       status: asset_status ?? "",
       location: locationId,
+      warranty_amc_end_of_validity_before: dateQueryString(
+        warrantyExpiry.before
+      ),
+      warranty_amc_end_of_validity_after: dateQueryString(warrantyExpiry.after),
     };
     onChange(data);
   };
@@ -124,6 +140,13 @@ function AssetFilter(props: any) {
     setLocationId(selectedId);
   };
 
+  const handleDateRangeChange = (event: FieldChangeEvent<DateRange>) => {
+    const state = { ...warrantyExpiry };
+    state.after = event.value.start?.toString();
+    state.before = event.value.end?.toString();
+    setWarrantyExpiry(state);
+  };
+
   return (
     <FiltersSlideover
       advancedFilter={props}
@@ -203,6 +226,17 @@ function AssetFilter(props: any) {
         value={asset_class}
         onChange={({ value }) => setAssetClass(value)}
       />
+
+      <DateRangeFormField
+        name="warranty_amc_end_of_validity"
+        label="Warranty/AMC End of Validity"
+        value={{
+          start: getDate(warrantyExpiry.after),
+          end: getDate(warrantyExpiry.before),
+        }}
+        onChange={handleDateRangeChange}
+        errorClassName="hidden"
+      />
     </FiltersSlideover>
   );
 }

src/Components/Assets/AssetManage.tsx

@@ -35,6 +35,7 @@ import useAuthUser from "../../Common/hooks/useAuthUser";
 import dayjs from "dayjs";
 import RelativeDateUserMention from "../Common/RelativeDateUserMention";
 import { AssetServiceEditModal } from "./AssetServiceEditModal";
+import { warrantyAmcValidityChip } from "./AssetsList";
 
 interface AssetManageProps {
   assetId: string;
@@ -392,6 +393,9 @@ const AssetManage = (props: AssetManageProps) => {
                       startIcon="l-times"
                     />
                   )}
+                  {warrantyAmcValidityChip(
+                    asset?.warranty_amc_end_of_validity as string
+                  )}
                 </div>
               </div>
               <span className="text-gray-700">{asset?.description}</span>

src/Components/Assets/AssetsList.tsx

@@ -74,6 +74,10 @@ const AssetsList = () => {
         asset_class: qParams.asset_class || "",
         location: qParams.facility ? qParams.location || "" : "",
         status: qParams.status || "",
+        warranty_amc_end_of_validity_before:
+          qParams.warranty_amc_end_of_validity_before || "",
+        warranty_amc_end_of_validity_after:
+          qParams.warranty_amc_end_of_validity_after || "",
       };
       const { data } = await dispatch(listAssets(params));
       if (!status.aborted) {
@@ -103,6 +107,8 @@ const AssetsList = () => {
       qParams.asset_class,
       qParams.location,
       qParams.status,
+      qParams.warranty_amc_end_of_validity_before,
+      qParams.warranty_amc_end_of_validity_after,
       dispatch,
     ]
   );
@@ -288,6 +294,7 @@ const AssetsList = () => {
                 ) : (
                   <Chip variant="danger" startIcon="l-cog" text="Not Working" />
                 )}
+                {warrantyAmcValidityChip(asset.warranty_amc_end_of_validity)}
               </div>
             </div>
           </Link>
@@ -428,6 +435,16 @@ const AssetsList = () => {
               value("Asset Class", "asset_class", asset_class ?? ""),
               value("Status", "status", status?.replace(/_/g, " ") ?? ""),
               value("Location", "location", locationName ?? ""),
+              value(
+                "Warranty AMC End Of Validity Before",
+                "warranty_amc_end_of_validity_before",
+                qParams.warranty_amc_end_of_validity_before ?? ""
+              ),
+              value(
+                "Warranty AMC End Of Validity After",
+                "warranty_amc_end_of_validity_after",
+                qParams.warranty_amc_end_of_validity_after ?? ""
+              ),
             ]}
           />
           <div className="grow">
@@ -484,4 +501,44 @@ const AssetsList = () => {
   );
 };
 
+export const warrantyAmcValidityChip = (
+  warranty_amc_end_of_validity: string
+) => {
+  if (warranty_amc_end_of_validity === "" || !warranty_amc_end_of_validity)
+    return;
+  const today = new Date();
+  const warrantyAmcEndDate = new Date(warranty_amc_end_of_validity);
+
+  if (warrantyAmcEndDate < today) {
+    return (
+      <Chip
+        variant="danger"
+        startIcon="l-times-circle"
+        text="AMC/Warranty Expired"
+      />
+    );
+  } else if (
+    warrantyAmcEndDate < new Date(today.setMonth(today.getMonth() + 1))
+  ) {
+    return (
+      <Chip
+        variant="custom"
+        className="border-orange-300 bg-orange-100 text-orange-900"
+        startIcon="l-exclamation-circle"
+        text="AMC/Warranty Expiring Soon"
+      />
+    );
+  } else if (
+    warrantyAmcEndDate < new Date(today.setMonth(today.getMonth() + 3))
+  ) {
+    return (
+      <Chip
+        variant="warning"
+        startIcon="l-exclamation-triangle"
+        text="AMC/Warranty Expiring Soon"
+      />
+    );
+  }
+};
+
 export default AssetsList;