Updated the buttons under dropdown and filters

src/pages/AssetDetail.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
 import { useAssetDetails, useAssetMutations } from '../hooks/useAsset';
 import { useDocTypeMeta } from '../hooks/useDocTypeMeta';
-import { FaArrowLeft, FaSave, FaEdit, FaQrcode, FaCheck, FaCalendarAlt, FaHistory, FaFileAlt, FaTrashAlt} from 'react-icons/fa';
+import { FaArrowLeft, FaSave, FaEdit, FaQrcode, FaCheck, FaCalendarAlt, FaHistory, FaFileAlt, FaTrashAlt, FaChevronDown} from 'react-icons/fa';
 import type { CreateAssetData,AssetFinanceBookRow } from '../services/assetService';
 
 import LinkField from '../components/LinkField';
@@ -33,6 +33,22 @@ const AssetDetail: React.FC = () => {
   const isCancelled = docstatus === 2;
   const isDraft = docstatus === 0;
 
+  // Add dropdown state
+  const [isActionDropdownOpen, setIsActionDropdownOpen] = useState(false);
+  const actionDropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (actionDropdownRef.current && !actionDropdownRef.current.contains(event.target as Node)) {
+        setIsActionDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
   // Debug logging (development only)
   useEffect(() => {
     if (import.meta.env.DEV && asset) {
@@ -2068,81 +2084,121 @@ const handlePPMPlan = async () => {
         </div>
         <div className="flex items-center gap-3">
           {!isNewAsset && !isEditing && !isCancelled && (
-            <>
+          <>
-              {/* Print QR Button - Only show if QR code exists */}
+            {/* Actions Dropdown */}
-              {qrCodeUrl && (
+            <div className="relative" ref={actionDropdownRef}>
-                
+              <button
-                <button
+                onClick={() => setIsActionDropdownOpen(!isActionDropdownOpen)}
-                  onClick={handlePrintQR}
+                className="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded-lg flex items-center gap-2"
-                  className="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
+              >
-                >
+                Actions
-                  <FaQrcode size={14} />
+                <FaChevronDown size={12} className={`transition-transform ${isActionDropdownOpen ? 'rotate-180' : ''}`} />
-                  Print QR
+              </button>
-                </button>
+
+              {/* Dropdown Menu */}
+              {isActionDropdownOpen && (
+                <div className="absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 border border-gray-200 dark:border-gray-700">
+                  <div className="py-1">
+                    {/* Print QR - Only show if QR code exists */}
+                    {qrCodeUrl && (
+                      <button
+                        onClick={() => {
+                          handlePrintQR();
+                          setIsActionDropdownOpen(false);
+                        }}
+                        className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                      >
+                        <FaQrcode size={14} />
+                        Print QR
+                      </button>
+                    )}
+
+                    {/* Stay Plugged */}
+                    <button
+                      onClick={() => {
+                        handlePrintStayPlugged();
+                        setIsActionDropdownOpen(false);
+                      }}
+                      className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    >
+                      <FaQrcode size={14} />
+                      Stay Plugged
+                    </button>
+
+                    {/* PPM Plan */}
+                    <button
+                      onClick={() => {
+                        handlePPMPlan();
+                        setIsActionDropdownOpen(false);
+                      }}
+                      className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    >
+                      <FaCalendarAlt size={14} />
+                      PPM Plan
+                    </button>
+
+                    {/* Asset History */}
+                    <button
+                      onClick={() => {
+                        handleAssetHistory();
+                        setIsActionDropdownOpen(false);
+                      }}
+                      className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    >
+                      <FaHistory size={14} />
+                      Asset History
+                    </button>
+
+                    {/* Installation Report */}
+                    <button
+                      onClick={() => {
+                        handleInstallationReport();
+                        setIsActionDropdownOpen(false);
+                      }}
+                      className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    >
+                      <FaFileAlt size={14} />
+                      Installation Report
+                    </button>
+
+                    {/* Dismantling Report - Only show when status is Scrapped */}
+                    {asset?.status === 'Scrapped' && (
+                      <button
+                        onClick={() => {
+                          handleDismantlingReport();
+                          setIsActionDropdownOpen(false);
+                        }}
+                        className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-2 text-red-600 dark:text-red-400 border-t border-gray-200 dark:border-gray-700"
+                      >
+                        <FaTrashAlt size={14} />
+                        Dismantling Report
+                      </button>
+                    )}
+                  </div>
+                </div>
               )}
-              {/* Stay Plugged Button */}
+            </div>
+
+            <button
+              onClick={() => setIsEditing(true)}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded-lg flex items-center gap-2"
+            >
+              <FaEdit />
+              Edit
+            </button>
+            {/* Submit button - only show for Draft documents */}
+            {isDraft && (
               <button
-                onClick={handlePrintStayPlugged}
+                onClick={handleSubmitDocument}
-                className="bg-purple-500 hover:bg-purple-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
+                disabled={saving}
+                className="bg-purple-600 hover:bg-purple-700 text-white px-2 py-1 rounded-lg flex items-center gap-2 disabled:opacity-50"
               >
-                {/* <FaQrcode /> */}
+                <FaCheck />
-                Stay Plugged
+                {saving ? 'Submitting...' : 'Submit'}
               </button>
-              {/* PPM Plan Button */}
+            )}
-              <button
+          </>
-                onClick={handlePPMPlan}
+        )}
-                // className="bg-teal-600 hover:bg-teal-700 text-white px-6 py-2 rounded-lg flex items-center gap-2"
-                className="bg-teal-600 hover:bg-teal-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
-              >
-                <FaCalendarAlt size={14}/>
-                PPM Plan
-              </button>
-              {/* Asset History Button */}
-              <button
-                onClick={handleAssetHistory}
-                className="bg-purple-500 hover:bg-purple-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
-              >
-                <FaHistory size={14}/>
-                Asset History
-              </button>
-              {/* Installation Report Button */}
-              <button
-                onClick={handleInstallationReport}
-                className="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
-              >
-                <FaFileAlt size={14}/>
-                Installation Report
-              </button>
-              {/* Dismantling Report Button - Only show when status is Scrapped */}
-              {asset?.status === 'Scrapped' && (
-                <button
-                  onClick={handleDismantlingReport}
-                  className="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
-                >
-                  <FaTrashAlt size={14} />
-                  Dismantling Report
-                </button>
-              )}
-              <button
-                onClick={() => setIsEditing(true)}
-                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg flex items-center gap-2"
-              >
-                <FaEdit />
-                Edit
-              </button>
-              {/* Submit button - only show for Draft documents */}
-              {isDraft && (
-                <button
-                  onClick={handleSubmitDocument}
-                  disabled={saving}
-                  className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 disabled:opacity-50"
-                >
-                  <FaCheck />
-                  {saving ? 'Submitting...' : 'Submit'}
-                </button>
-              )}
-            </>
-          )}
           {isCancelled && (
             <span className="text-sm text-gray-500 dark:text-gray-400 italic">
               Cancelled documents cannot be edited
@@ -2158,7 +2214,7 @@ const handlePPMPlan = async () => {
                     setIsEditing(false);
                   }
                 }}
-                className="bg-gray-300 hover:bg-gray-400 text-gray-700 dark:text-gray-800 px-6 py-2 rounded-lg"
+                className="bg-gray-300 hover:bg-gray-400 text-gray-700 dark:text-gray-800 px-2 py-1 rounded-lg"
                 disabled={saving}
               >
                 Cancel
@@ -2166,7 +2222,7 @@ const handlePPMPlan = async () => {
               <button
                 onClick={handleSubmit}
                 disabled={saving}
-                className="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 disabled:opacity-50"
+                className="bg-green-600 hover:bg-green-700 text-white px-2 py-1 rounded-lg flex items-center gap-2 disabled:opacity-50"
               >
                 <FaSave />
                 {saving ? 'Saving...' : 'Save Changes'}