Updated the buttons under dropdown and filters
This commit is contained in:
Duradundi Hadimani
parent
276abc37a4
commit
39e49543e3
@ -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 */}
|
||||
{qrCodeUrl && (
|
||||
<>
|
||||
{/* Actions Dropdown */}
|
||||
<div className="relative" ref={actionDropdownRef}>
|
||||
<button
|
||||
onClick={() => setIsActionDropdownOpen(!isActionDropdownOpen)}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded-lg flex items-center gap-2"
|
||||
>
|
||||
Actions
|
||||
<FaChevronDown size={12} className={`transition-transform ${isActionDropdownOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handlePrintQR}
|
||||
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"
|
||||
>
|
||||
<FaQrcode size={14} />
|
||||
Print QR
|
||||
</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}
|
||||
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"
|
||||
onClick={handleSubmitDocument}
|
||||
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 /> */}
|
||||
Stay Plugged
|
||||
<FaCheck />
|
||||
{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'}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user