From 778f37954d9ff56d02115531cd5cc9ec43e84f75 Mon Sep 17 00:00:00 2001
From: manmeetnagii <manmeetnagiii@gmail.com>
Date: Tue, 17 Dec 2024 13:08:19 +0530
Subject: [PATCH 1/3] enhanced-asset-header

---
 src/components/Assets/AssetsList.tsx | 221 ++++++++++++++++-----------
 1 file changed, 129 insertions(+), 92 deletions(-)

diff --git a/src/components/Assets/AssetsList.tsx b/src/components/Assets/AssetsList.tsx
index c0e47610766..075a13ea26d 100644
--- a/src/components/Assets/AssetsList.tsx
+++ b/src/components/Assets/AssetsList.tsx
@@ -15,9 +15,9 @@ import ButtonV2 from "@/components/Common/ButtonV2";
 import ExportMenu from "@/components/Common/Export";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
+import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
 import FacilitiesSelectDialogue from "@/components/ExternalResult/FacilitiesSelectDialogue";
 import { FacilityModel } from "@/components/Facility/models";
-import SearchInput from "@/components/Form/SearchInput";
 
 import useFilters from "@/hooks/useFilters";
 import { useIsAuthorized } from "@/hooks/useIsAuthorized";
@@ -37,10 +37,11 @@ const AssetsList = () => {
     Pagination,
     FilterBadges,
     advancedFilter,
+    clearSearch,
     resultsPerPage,
   } = useFilters({
     limit: 18,
-    cacheBlacklist: ["search"],
+    cacheBlacklist: ["name", "serial_number", "qr_code_id"],
   });
   const [assets, setAssets] = useState([{} as AssetData]);
   const [isLoading, setIsLoading] = useState(false);
@@ -56,6 +57,9 @@ const AssetsList = () => {
   const params = {
     limit: resultsPerPage,
     page: qParams.page,
+    name: qParams.name || "",
+    serial_number: qParams.serial_number || "",
+    qr_code_id: qParams.qr_code_id || "",
     offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
     search_text: qParams.search || "",
     facility: qParams.facility || "",
@@ -311,103 +315,42 @@ const AssetsList = () => {
     );
   }
 
+  const searchOptions = [
+    {
+      key: "name",
+      label: "Name",
+      type: "text" as const,
+      placeholder: "Search by Name",
+      value: qParams.name || "",
+      shortcutKey: "n",
+    },
+    {
+      key: "serial_number",
+      label: "Serial No.",
+      type: "text" as const,
+      placeholder: "Search by Serial No.",
+      value: qParams.serial_number || "",
+      shortcutKey: "u",
+    },
+    {
+      key: "asset_qr_id",
+      label: "QR Code ID",
+      type: "text" as const,
+      placeholder: "Search by QR Code ID",
+      value: qParams.qr_code_id || "",
+      shortcutKey: "p",
+    },
+  ];
+
   return (
     <Page
       title="Assets"
       breadcrumbs={false}
       hideBack
       options={
-        <>
-          {authorizedForImportExport && (
-            <div className="tooltip" data-testid="import-asset-button">
-              <ExportMenu
-                label={importAssetModalOpen ? "Importing..." : "Import/Export"}
-                exportItems={[
-                  {
-                    label: "Import Assets",
-                    options: {
-                      icon: (
-                        <CareIcon
-                          icon="l-import"
-                          className="import-assets-button"
-                        />
-                      ),
-                      onClick: () => setImportAssetModalOpen(true),
-                    },
-                  },
-                  {
-                    label: "Export Assets (JSON)",
-                    action: async () => {
-                      const { data } = await request(routes.listAssets, {
-                        query: { ...qParams, json: true, limit: totalCount },
-                      });
-                      return data ?? null;
-                    },
-                    type: "json",
-                    filePrefix: `assets_${facility?.name ?? "all"}`,
-                    options: {
-                      icon: <CareIcon icon="l-export" />,
-                      disabled: totalCount === 0 || !authorizedForImportExport,
-                      id: "export-json-option",
-                    },
-                  },
-                  {
-                    label: "Export Assets (CSV)",
-                    action: async () => {
-                      const { data } = await request(routes.listAssets, {
-                        query: { ...qParams, csv: true, limit: totalCount },
-                      });
-                      return data ?? null;
-                    },
-                    type: "csv",
-                    filePrefix: `assets_${facility?.name ?? "all"}`,
-                    options: {
-                      icon: <CareIcon icon="l-export" />,
-                      disabled: totalCount === 0 || !authorizedForImportExport,
-                      id: "export-csv-option",
-                    },
-                  },
-                ]}
-              />
-            </div>
-          )}
-        </>
-      }
-    >
-      <div className="mt-5 gap-3 space-y-2 lg:flex">
-        <CountBlock
-          text="Total Assets"
-          count={totalCount}
-          loading={loading}
-          icon="d-folder"
-          className="flex-1"
-        />
-        <div className="flex-1">
-          <SearchInput
-            id="asset-search"
-            name="search"
-            value={qParams.search}
-            onChange={(e) => updateQuery({ [e.name]: e.value })}
-            placeholder="Search by name/serial no./QR code ID"
-          />
-        </div>
-        <div className="flex flex-col items-start justify-start gap-2 lg:ml-2">
-          <div className="flex w-full flex-col gap-2 md:flex-row lg:w-auto">
-            <div className="w-full">
-              <AdvancedFilterButton
-                onClick={() => advancedFilter.setShow(true)}
-              />
-            </div>
-            <ButtonV2
-              className="w-full py-[11px]"
-              onClick={() => setIsScannerActive(true)}
-            >
-              <CareIcon icon="l-search" className="mr-1 text-base" /> Scan Asset
-              QR
-            </ButtonV2>
-          </div>
+        <div className="flex w-full flex-col gap-2 items-center justify-between lg:flex-row">
           <div
-            className="flex w-full flex-col md:flex-row"
+            className="flex flex-col w-full lg:w-auto md:flex-row"
             data-testid="create-asset-buttom"
           >
             <ButtonV2
@@ -425,6 +368,100 @@ const AssetsList = () => {
               <span>{t("create_asset")}</span>
             </ButtonV2>
           </div>
+          <div className="flex flex-col lg:flex-row w-full lg:w-auto justify-between gap-2 lg:ml-2">
+            <div className="flex flex-col gap-2 md:flex-row lg:w-auto">
+              <ButtonV2
+                className="w-full py-[11px]"
+                onClick={() => setIsScannerActive(true)}
+              >
+                <CareIcon icon="l-search" className="mr-1 text-base" /> Scan
+                Asset QR
+              </ButtonV2>
+              <div>
+                <AdvancedFilterButton
+                  onClick={() => advancedFilter.setShow(true)}
+                />
+              </div>
+            </div>
+            {authorizedForImportExport && (
+              <div className="tooltip" data-testid="import-asset-button">
+                <ExportMenu
+                  label={
+                    importAssetModalOpen ? "Importing..." : "Import/Export"
+                  }
+                  exportItems={[
+                    {
+                      label: "Import Assets",
+                      options: {
+                        icon: (
+                          <CareIcon
+                            icon="l-import"
+                            className="import-assets-button"
+                          />
+                        ),
+                        onClick: () => setImportAssetModalOpen(true),
+                      },
+                    },
+                    {
+                      label: "Export Assets (JSON)",
+                      action: async () => {
+                        const { data } = await request(routes.listAssets, {
+                          query: { ...qParams, json: true, limit: totalCount },
+                        });
+                        return data ?? null;
+                      },
+                      type: "json",
+                      filePrefix: `assets_${facility?.name ?? "all"}`,
+                      options: {
+                        icon: <CareIcon icon="l-export" />,
+                        disabled:
+                          totalCount === 0 || !authorizedForImportExport,
+                        id: "export-json-option",
+                      },
+                    },
+                    {
+                      label: "Export Assets (CSV)",
+                      action: async () => {
+                        const { data } = await request(routes.listAssets, {
+                          query: { ...qParams, csv: true, limit: totalCount },
+                        });
+                        return data ?? null;
+                      },
+                      type: "csv",
+                      filePrefix: `assets_${facility?.name ?? "all"}`,
+                      options: {
+                        icon: <CareIcon icon="l-export" />,
+                        disabled:
+                          totalCount === 0 || !authorizedForImportExport,
+                        id: "export-csv-option",
+                      },
+                    },
+                  ]}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      }
+    >
+      <div className="mt-5 gap-8 items-center justify-between space-y-2 lg:flex">
+        <div className="mr-8">
+          <CountBlock
+            text="Total Assets"
+            count={totalCount}
+            loading={loading}
+            icon="d-folder"
+            className="flex-1"
+          />
+        </div>
+        <div className="w-full">
+          <SearchByMultipleFields
+            id="asset-search"
+            options={searchOptions}
+            onSearch={(key, value) => updateQuery({ search: value })}
+            clearSearch={clearSearch}
+            className="w-full"
+          />
         </div>
       </div>
       <AssetFilter {...advancedFilter} key={window.location.search} />

From f601b89d72f3136ee4f081d5e821a22b97f45e47 Mon Sep 17 00:00:00 2001
From: manmeetnagii <manmeetnagiii@gmail.com>
Date: Tue, 17 Dec 2024 15:11:31 +0530
Subject: [PATCH 2/3] enhanced-asset-header

---
 src/components/Assets/AssetsList.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Assets/AssetsList.tsx b/src/components/Assets/AssetsList.tsx
index 075a13ea26d..91a56c262cb 100644
--- a/src/components/Assets/AssetsList.tsx
+++ b/src/components/Assets/AssetsList.tsx
@@ -56,10 +56,10 @@ const AssetsList = () => {
   const [selectedFacility, setSelectedFacility] = useState<FacilityModel>();
   const params = {
     limit: resultsPerPage,
-    page: qParams.page,
-    name: qParams.name || "",
-    serial_number: qParams.serial_number || "",
-    qr_code_id: qParams.qr_code_id || "",
+    page: qParams.page || 1,
+    name: qParams.name || undefined,
+    serial_number: qParams.serial_number || undefined,
+    qr_code_id: qParams.qr_code_id || undefined,
     offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
     search_text: qParams.search || "",
     facility: qParams.facility || "",
@@ -478,6 +478,7 @@ const AssetsList = () => {
               ),
               badge("Name/Serial No./QR ID", "search"),
               value("Asset Class", "asset_class", asset_class ?? ""),
+              value("Name", "name", qParams.name ?? ""),
               value("Status", "status", status?.replace(/_/g, " ") ?? ""),
               value(
                 "Location",

From 6e5735773c80cbe478217e8df80c05322fabaac1 Mon Sep 17 00:00:00 2001
From: manmeetnagii <manmeetnagiii@gmail.com>
Date: Tue, 17 Dec 2024 15:40:47 +0530
Subject: [PATCH 3/3] migrates to shadcn button

---
 src/components/Assets/AssetsList.tsx | 111 ++++++++++++++-------------
 1 file changed, 59 insertions(+), 52 deletions(-)

diff --git a/src/components/Assets/AssetsList.tsx b/src/components/Assets/AssetsList.tsx
index 91a56c262cb..a9a069f8a85 100644
--- a/src/components/Assets/AssetsList.tsx
+++ b/src/components/Assets/AssetsList.tsx
@@ -8,10 +8,11 @@ import CountBlock from "@/CAREUI/display/Count";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import { AdvancedFilterButton } from "@/CAREUI/interactive/FiltersSlideover";
 
+import { Button } from "@/components/ui/button";
+
 import AssetFilter from "@/components/Assets/AssetFilter";
 import AssetImportModal from "@/components/Assets/AssetImportModal";
 import { AssetData, assetClassProps } from "@/components/Assets/AssetTypes";
-import ButtonV2 from "@/components/Common/ButtonV2";
 import ExportMenu from "@/components/Common/Export";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
@@ -19,6 +20,7 @@ import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
 import FacilitiesSelectDialogue from "@/components/ExternalResult/FacilitiesSelectDialogue";
 import { FacilityModel } from "@/components/Facility/models";
 
+import useAuthUser from "@/hooks/useAuthUser";
 import useFilters from "@/hooks/useFilters";
 import { useIsAuthorized } from "@/hooks/useIsAuthorized";
 
@@ -37,8 +39,8 @@ const AssetsList = () => {
     Pagination,
     FilterBadges,
     advancedFilter,
-    clearSearch,
     resultsPerPage,
+    clearSearch,
   } = useFilters({
     limit: 18,
     cacheBlacklist: ["name", "serial_number", "qr_code_id"],
@@ -56,10 +58,10 @@ const AssetsList = () => {
   const [selectedFacility, setSelectedFacility] = useState<FacilityModel>();
   const params = {
     limit: resultsPerPage,
-    page: qParams.page || 1,
-    name: qParams.name || undefined,
-    serial_number: qParams.serial_number || undefined,
-    qr_code_id: qParams.qr_code_id || undefined,
+    page: qParams.page,
+    name: qParams.name || "",
+    serial_number: qParams.serial_number || "",
+    qr_code_id: qParams.qr_code_id || "",
     offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
     search_text: qParams.search || "",
     facility: qParams.facility || "",
@@ -118,6 +120,9 @@ const AssetsList = () => {
     },
   );
 
+  const authUser = useAuthUser();
+  const isDisabled = !NonReadOnlyUsers(authUser.user_type);
+
   function isValidURL(url: string) {
     try {
       new URL(url);
@@ -346,16 +351,19 @@ const AssetsList = () => {
     <Page
       title="Assets"
       breadcrumbs={false}
+      className="px-4 md:px-6"
       hideBack
       options={
-        <div className="flex w-full flex-col gap-2 items-center justify-between lg:flex-row">
+        <div className="flex w-full flex-col items-center justify-between lg:flex-row">
           <div
-            className="flex flex-col w-full lg:w-auto md:flex-row"
+            className="mb-2 flex w-full flex-col items-center lg:mb-0 lg:w-fit lg:flex-row lg:gap-5"
             data-testid="create-asset-buttom"
           >
-            <ButtonV2
-              authorizeFor={NonReadOnlyUsers}
-              className="inline-flex w-full items-center justify-center"
+            <Button
+              disabled={isDisabled}
+              variant={"primary"}
+              size={"lg"}
+              className="gap-2 w-full lg:w-fit"
               onClick={() => {
                 if (qParams.facility) {
                   navigate(`/facility/${qParams.facility}/assets/new`);
@@ -366,25 +374,28 @@ const AssetsList = () => {
             >
               <CareIcon icon="l-plus-circle" className="text-lg" />
               <span>{t("create_asset")}</span>
-            </ButtonV2>
+            </Button>
           </div>
-          <div className="flex flex-col lg:flex-row w-full lg:w-auto justify-between gap-2 lg:ml-2">
-            <div className="flex flex-col gap-2 md:flex-row lg:w-auto">
-              <ButtonV2
-                className="w-full py-[11px]"
-                onClick={() => setIsScannerActive(true)}
-              >
-                <CareIcon icon="l-search" className="mr-1 text-base" /> Scan
-                Asset QR
-              </ButtonV2>
-              <div>
-                <AdvancedFilterButton
-                  onClick={() => advancedFilter.setShow(true)}
-                />
-              </div>
-            </div>
-            {authorizedForImportExport && (
-              <div className="tooltip" data-testid="import-asset-button">
+          <div className="flex w-full flex-col items-center justify-end gap-2 lg:ml-3 lg:w-fit lg:flex-row lg:gap-3">
+            <AdvancedFilterButton
+              onClick={() => advancedFilter.setShow(true)}
+            />
+
+            <Button
+              variant={"primary"}
+              size={"lg"}
+              className="gap-2 w-full"
+              onClick={() => setIsScannerActive(true)}
+            >
+              <CareIcon icon="l-search" className="mr-1 text-base" />
+              Scan Asset QR
+            </Button>
+
+            <div
+              className="tooltip w-full md:w-auto"
+              data-testid="import-asset-button"
+            >
+              {authorizedForImportExport && (
                 <ExportMenu
                   label={
                     importAssetModalOpen ? "Importing..." : "Import/Export"
@@ -396,7 +407,7 @@ const AssetsList = () => {
                         icon: (
                           <CareIcon
                             icon="l-import"
-                            className="import-assets-button"
+                            className="import-assets-button mr-5 w-full lg:w-fit"
                           />
                         ),
                         onClick: () => setImportAssetModalOpen(true),
@@ -438,31 +449,28 @@ const AssetsList = () => {
                     },
                   ]}
                 />
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
       }
     >
-      <div className="mt-5 gap-8 items-center justify-between space-y-2 lg:flex">
-        <div className="mr-8">
-          <CountBlock
-            text="Total Assets"
-            count={totalCount}
-            loading={loading}
-            icon="d-folder"
-            className="flex-1"
-          />
-        </div>
-        <div className="w-full">
-          <SearchByMultipleFields
-            id="asset-search"
-            options={searchOptions}
-            onSearch={(key, value) => updateQuery({ search: value })}
-            clearSearch={clearSearch}
-            className="w-full"
-          />
-        </div>
+      <div className="mt-4 gap-4 lg:gap-16 flex flex-col lg:flex-row lg:items-center">
+        <CountBlock
+          text="Total Assets"
+          count={totalCount}
+          loading={loading}
+          icon="d-folder"
+          className="flex-1"
+        />
+
+        <SearchByMultipleFields
+          id="asset-search"
+          options={searchOptions}
+          onSearch={(key, value) => updateQuery({ search: value })}
+          clearSearch={clearSearch}
+          className="w-full"
+        />
       </div>
       <AssetFilter {...advancedFilter} key={window.location.search} />
       {isLoading ? (
@@ -478,7 +486,6 @@ const AssetsList = () => {
               ),
               badge("Name/Serial No./QR ID", "search"),
               value("Asset Class", "asset_class", asset_class ?? ""),
-              value("Name", "name", qParams.name ?? ""),
               value("Status", "status", status?.replace(/_/g, " ") ?? ""),
               value(
                 "Location",