Fix: Layout update of Asset Page

cypress/pageobject/Asset/AssetCreation.ts

@@ -2,8 +2,7 @@
 
 export class AssetPage {
   createAsset() {
-    cy.get("button").should("contain", "Create Asset");
-    cy.get("[data-testid=create-asset-buttom] button").click();
+    cy.get("#create-asset-button").click();
   }
 
   selectFacility(facilityName: string) {

src/CAREUI/interactive/FiltersSlideover.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import SlideOver from "@/CAREUI/interactive/SlideOver";
 
+import { Button } from "@/components/ui/button";
+
 import ButtonV2 from "@/components/Common/ButtonV2";
 
 import useFilters from "@/hooks/useFilters";
@@ -58,15 +60,14 @@ export default function FiltersSlideover({
 export const AdvancedFilterButton = ({ onClick }: { onClick: () => void }) => {
   const { t } = useTranslation();
   return (
-    <ButtonV2
-      ghost
-      border
-      className="w-full bg-white md:w-auto"
+    <Button
+      variant="outline_primary"
+      className="w-full md:w-auto"
       onClick={onClick}
       id="advanced-filter"
     >
       <CareIcon icon="l-filter" />
-      <span className="py-0.5">{t("advanced_filters")}</span>
-    </ButtonV2>
+      <span className="py-0.5 ml-2">{t("filters")}</span>
+    </Button>
   );
 };

src/components/Assets/AssetsList.tsx

@@ -8,16 +8,17 @@ 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";
+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";
@@ -38,6 +39,7 @@ const AssetsList = () => {
     FilterBadges,
     advancedFilter,
     resultsPerPage,
+    clearSearch,
   } = useFilters({
     limit: 18,
     cacheBlacklist: ["search"],
@@ -317,9 +319,54 @@ const AssetsList = () => {
       breadcrumbs={false}
       hideBack
       options={
-        <>
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="mb-2 flex w-full flex-col items-center gap-3 lg:mb-0 lg:w-fit lg:flex-row">
+            <div className="w-full lg:w-fit">
+              <Button
+                variant="primary"
+                size="default"
+                className="w-full p-[10px] md:w-auto"
+                onClick={() => setIsScannerActive(true)}
+              >
+                <CareIcon icon="l-search" className="text-base mr-2" />
+                Scan Asset QR
+              </Button>
+            </div>
+
+            <div className="w-full lg:w-fit">
+              <Button
+                variant="primary"
+                size="default"
+                id="create-asset-button"
+                disabled={!NonReadOnlyUsers}
+                className="w-full p-[10px] md:w-auto"
+                onClick={() => {
+                  if (qParams.facility) {
+                    navigate(`/facility/${qParams.facility}/assets/new`);
+                  } else {
+                    setShowFacilityDialog(true);
+                  }
+                }}
+              >
+                <CareIcon icon="l-plus-circle" className="text-lg mr-2" />
+                <span>{t("create_asset")}</span>
+              </Button>
+            </div>
+          </div>
+
+          {/* Advanced Filter Button */}
+          <div className="w-full md:w-auto">
+            <AdvancedFilterButton
+              onClick={() => advancedFilter.setShow(true)}
+            />
+          </div>
+
+          {/* Import/Export Menu */}
           {authorizedForImportExport && (
-            <div className="tooltip" data-testid="import-asset-button">
+            <div
+              className="tooltip w-full md:w-auto"
+              data-testid="import-asset-button"
+            >
               <ExportMenu
                 label={importAssetModalOpen ? "Importing..." : "Import/Export"}
                 exportItems={[
@@ -371,62 +418,35 @@ const AssetsList = () => {
               />
             </div>
           )}
-        </>
+        </div>
       }
     >
-      <div className="mt-5 gap-3 space-y-2 lg:flex">
+      <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"
+          className=""
+        />
+        <SearchByMultipleFields
+          id="asset-search"
+          options={[
+            {
+              key: "Name/ Serial no./ QR code ID",
+              label: "name/serial no./QR code ID",
+              type: "text" as const,
+              placeholder: "Search by Name / Serial no. / QR code ID",
+              value: qParams.search || "",
+              shortcutKey: "n",
+            },
+          ]}
+          className="w-full"
+          onSearch={(key, value) => updateQuery({ search: value })}
+          clearSearch={clearSearch}
         />
-        <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 md:flex-row"
-            data-testid="create-asset-buttom"
-          >
-            <ButtonV2
-              authorizeFor={NonReadOnlyUsers}
-              className="inline-flex w-full items-center justify-center"
-              onClick={() => {
-                if (qParams.facility) {
-                  navigate(`/facility/${qParams.facility}/assets/new`);
-                } else {
-                  setShowFacilityDialog(true);
-                }
-              }}
-            >
-              <CareIcon icon="l-plus-circle" className="text-lg" />
-              <span>{t("create_asset")}</span>
-            </ButtonV2>
-          </div>
-        </div>
       </div>
+
       <AssetFilter {...advancedFilter} key={window.location.search} />
       {isLoading ? (
         <Loading />

src/components/Common/Export.tsx

@@ -1,5 +1,7 @@
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Button } from "@/components/ui/button";
+
 import ButtonV2 from "@/components/Common/ButtonV2";
 import DropdownMenu, {
   DropdownItem,
@@ -49,8 +51,9 @@ export const ExportMenu = ({
     const item = exportItems[0];
 
     return (
-      <ButtonV2
+      <Button
         disabled={isExporting || disabled}
+        size="default"
         onClick={() => {
           let action = item.action;
           if (item.route) {
@@ -63,13 +66,12 @@ export const ExportMenu = ({
             exportFile(action, item.filePrefix, item.type, item.parse);
           }
         }}
-        border
-        ghost
+        variant="outline_primary"
         className="py-2.5"
       >
         <CareIcon icon="l-export" />
         {isExporting ? "Exporting..." : label}
-      </ButtonV2>
+      </Button>
     );
   }
 
@@ -79,7 +81,7 @@ export const ExportMenu = ({
         disabled={isExporting || disabled}
         title={isExporting ? "Exporting..." : label}
         icon={<CareIcon icon="l-export" />}
-        className="tooltip border-primary-500 bg-white text-primary-500 hover:bg-primary-100 enabled:border"
+        className="border border-primary-700 text-primary-700 bg-white shadow-sm hover:bg-primary-700 hover:text-white h-9 px-4 py-2dark:border-primary-700 dark:bg-primary-700 dark:text-white"
       >
         {exportItems.map((item) => (
           <DropdownItem
@@ -130,7 +132,7 @@ export const ExportButton = ({
             exportFile(action, props.filenamePrefix, type, parse);
           }
         }}
-        className="tooltip mx-2 p-4 text-lg text-secondary-800 disabled:bg-transparent disabled:text-secondary-500"
+        className="tooltip mx-2 p-4 text-lg text-secondary-800  bg-red disabled:bg-transparent disabled:text-secondary-500"
         variant="secondary"
         ghost
         circle