Merge branch 'develop' into asset_changes

package.json

@@ -97,7 +97,7 @@
     "rehype-raw": "^6.1.1",
     "rescript-webapi": "^0.8.0",
     "use-keyboard-shortcut": "^1.1.6",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.26",

public/config.json

@@ -22,5 +22,6 @@
     "kasp_full_string": "Karunya Arogya Suraksha Padhathi",
     "sample_format_asset_import": "https://spreadsheets.google.com/feeds/download/spreadsheets/Export?key=11JaEhNHdyCHth4YQs_44YaRlP77Rrqe81VSEfg1glko&exportFormat=xlsx",
     "sample_format_external_result_import": "https://docs.google.com/spreadsheets/d/17VfgryA6OYSYgtQZeXU9mp7kNvLySeEawvnLBO_1nuE/export?format=csv&id=17VfgryA6OYSYgtQZeXU9mp7kNvLySeEawvnLBO_1nuE",
-    "enable_abdm": true
+    "enable_abdm": true,
+    "jwt_token_refresh_interval": 300000
 }

src/Common/hooks/useConfig.ts

@@ -68,6 +68,7 @@ export interface IConfig {
    * Env to toggle peacetime and wartime shifting
    */
   wartime_shifting: boolean;
+  jwt_token_refresh_interval?: number;
 }
 
 const useConfig = () => {

src/Components/Assets/AssetFilter.tsx

@@ -9,6 +9,11 @@ import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
 import routes from "../../Redux/api";
 import useQuery from "../../Utils/request/useQuery";
+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: "",
@@ -20,6 +25,9 @@ const initialLocation = {
   },
 };
 
+const getDate = (value: any) =>
+  value && dayjs(value).isValid() && dayjs(value).toDate();
+
 function AssetFilter(props: any) {
   const { filter, onChange, closeFilter } = props;
   const [facility, setFacility] = useState<FacilityModel>({ name: "" });
@@ -34,6 +42,10 @@ function AssetFilter(props: any) {
   );
   const [facilityId, setFacilityId] = useState<string | "">(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();
 
   useQuery(routes.getPermittedFacility, {
@@ -87,6 +99,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);
   };
@@ -99,6 +115,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}
@@ -178,6 +201,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

@@ -26,6 +26,7 @@ import useAuthUser from "../../Common/hooks/useAuthUser";
 import dayjs from "dayjs";
 import RelativeDateUserMention from "../Common/RelativeDateUserMention";
 import { AssetServiceEditModal } from "./AssetServiceEditModal";
+import { warrantyAmcValidityChip } from "./AssetsList";
 import Page from "../Common/components/Page";
 import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
@@ -139,18 +140,18 @@ const AssetManage = (props: AssetManageProps) => {
                 {transaction.from_location.name}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
               <span className="font-medium text-gray-900">
                 {transaction.to_location.name}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
               <span className="font-medium text-gray-900">
                 {transaction.performed_by.first_name}{" "}
                 {transaction.performed_by.last_name}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
+            <td className="whitespace-nowrap px-6 py-4 text-right text-sm leading-5 text-gray-500">
               <span className="font-medium text-gray-900">
                 {formatDateTime(transaction.modified_date)}
               </span>
@@ -177,7 +178,7 @@ const AssetManage = (props: AssetManageProps) => {
       setServiceDetails(
         services?.results.map((service: AssetService) => (
           <tr key={`service_id_${service.id}`}>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
+            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
               <span className="font-medium text-gray-900">
                 {dayjs(service.serviced_on).format("DD MMM YYYY")}
               </span>
@@ -204,7 +205,7 @@ const AssetManage = (props: AssetManageProps) => {
                 )}
               </span>
             </td>
-            <td className="gap-4 whitespace-nowrap px-6 py-4 text-left text-sm leading-5">
+            <td className="gap-4 whitespace-nowrap px-6 py-4 text-right text-sm leading-5">
               <ButtonV2
                 id="edit-service-history"
                 authorizeFor={NonReadOnlyUsers}
@@ -387,6 +388,9 @@ const AssetManage = (props: AssetManageProps) => {
                       startIcon="l-times"
                     />
                   )}
+                  {warrantyAmcValidityChip(
+                    asset?.warranty_amc_end_of_validity as string
+                  )}
                 </div>
               </div>
               <div className="mt-3 hidden text-gray-700 sm:block">
@@ -504,7 +508,7 @@ const AssetManage = (props: AssetManageProps) => {
         <table className="min-w-full divide-y divide-gray-200">
           <thead>
             <tr>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
                 Serviced on
               </th>
               <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
@@ -516,7 +520,7 @@ const AssetManage = (props: AssetManageProps) => {
               <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
                 Last Updated
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="relative right-10 bg-gray-50 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
                 Edit
               </th>
             </tr>
@@ -537,13 +541,13 @@ const AssetManage = (props: AssetManageProps) => {
               <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
                 Moved from
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
                 Moved to
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
                 Moved By
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="relative right-5 bg-gray-50 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
                 Moved On
               </th>
             </tr>

src/Components/Assets/AssetsList.tsx

@@ -230,6 +230,7 @@ const AssetsList = () => {
                 ) : (
                   <Chip variant="danger" startIcon="l-cog" text="Not Working" />
                 )}
+                {warrantyAmcValidityChip(asset.warranty_amc_end_of_validity)}
               </div>
             </div>
           </Link>
@@ -369,7 +370,17 @@ const AssetsList = () => {
               value("Asset Type", "asset_type", asset_type ?? ""),
               value("Asset Class", "asset_class", asset_class ?? ""),
               value("Status", "status", status?.replace(/_/g, " ") ?? ""),
-              value("Location", "location", location?.name ?? ""),
+              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">
@@ -426,4 +437,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);
+
+  const days = Math.ceil(
+    Math.abs(Number(warrantyAmcEndDate) - Number(today)) / (1000 * 60 * 60 * 24)
+  );
+
+  if (warrantyAmcEndDate < today) {
+    return (
+      <Chip
+        variant="danger"
+        startIcon="l-times-circle"
+        text="AMC/Warranty Expired"
+      />
+    );
+  } else if (days <= 30) {
+    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 (days <= 90) {
+    return (
+      <Chip
+        variant="warning"
+        startIcon="l-exclamation-triangle"
+        text="AMC/Warranty Expiring Soon"
+      />
+    );
+  }
+};
+
 export default AssetsList;