Akhib.Shaik/Seera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the buttons under dropdown and filters

Browse Source
This commit is contained in:
Duradundi Hadimani 2025-11-26 14:01:05 +05:30
parent 276abc37a4
commit 39e49543e3
2 changed files with 754 additions and 527 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/pages/AssetDetail.tsx
View File

@ -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 { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import { useAssetDetails, useAssetMutations } from '../hooks/useAsset'; import { useAssetDetails, useAssetMutations } from '../hooks/useAsset';
import { useDocTypeMeta } from '../hooks/useDocTypeMeta'; 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 type { CreateAssetData,AssetFinanceBookRow } from '../services/assetService';
import LinkField from '../components/LinkField'; import LinkField from '../components/LinkField';
@ -33,6 +33,22 @@ const AssetDetail: React.FC = () => {
const isCancelled = docstatus === 2; const isCancelled = docstatus === 2;
const isDraft = docstatus === 0; 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) // Debug logging (development only)
useEffect(() => { useEffect(() => {
if (import.meta.env.DEV && asset) { if (import.meta.env.DEV && asset) {
@ -2069,63 +2085,103 @@ const handlePPMPlan = async () => {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{!isNewAsset && !isEditing && !isCancelled && ( {!isNewAsset && !isEditing && !isCancelled && (
<> <>
{/* Print QR Button - Only show if QR code exists */} {/* Actions Dropdown */}
{qrCodeUrl && ( <div className="relative" ref={actionDropdownRef}>
<button <button
onClick={handlePrintQR} onClick={() => setIsActionDropdownOpen(!isActionDropdownOpen)}
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" 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>
{/* 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} /> <FaQrcode size={14} />
Print QR Print QR
</button> </button>
)} )}
{/* Stay Plugged Button */}
{/* Stay Plugged */}
<button <button
onClick={handlePrintStayPlugged} onClick={() => {
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" 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 /> */} <FaQrcode size={14} />
Stay Plugged Stay Plugged
</button> </button>
{/* PPM Plan Button */}
{/* PPM Plan */}
<button <button
onClick={handlePPMPlan} onClick={() => {
// className="bg-teal-600 hover:bg-teal-700 text-white px-6 py-2 rounded-lg flex items-center gap-2" handlePPMPlan();
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" 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}/> <FaCalendarAlt size={14} />
PPM Plan PPM Plan
</button> </button>
{/* Asset History Button */}
{/* Asset History */}
<button <button
onClick={handleAssetHistory} onClick={() => {
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" 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}/> <FaHistory size={14} />
Asset History Asset History
</button> </button>
{/* Installation Report Button */}
{/* Installation Report */}
<button <button
onClick={handleInstallationReport} onClick={() => {
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" 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}/> <FaFileAlt size={14} />
Installation Report Installation Report
</button> </button>
{/* Dismantling Report Button - Only show when status is Scrapped */}
{/* Dismantling Report - Only show when status is Scrapped */}
{asset?.status === 'Scrapped' && ( {asset?.status === 'Scrapped' && (
<button <button
onClick={handleDismantlingReport} onClick={() => {
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" 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} /> <FaTrashAlt size={14} />
Dismantling Report Dismantling Report
</button> </button>
)} )}
</div>
</div>
)}
</div>
<button <button
onClick={() => setIsEditing(true)} onClick={() => setIsEditing(true)}
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg flex items-center gap-2" className="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded-lg flex items-center gap-2"
> >
<FaEdit /> <FaEdit />
Edit Edit
@ -2135,7 +2191,7 @@ const handlePPMPlan = async () => {
<button <button
onClick={handleSubmitDocument} onClick={handleSubmitDocument}
disabled={saving} 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" className="bg-purple-600 hover:bg-purple-700 text-white px-2 py-1 rounded-lg flex items-center gap-2 disabled:opacity-50"
> >
<FaCheck /> <FaCheck />
{saving ? 'Submitting...' : 'Submit'} {saving ? 'Submitting...' : 'Submit'}
@ -2158,7 +2214,7 @@ const handlePPMPlan = async () => {
setIsEditing(false); 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} disabled={saving}
> >
Cancel Cancel
@ -2166,7 +2222,7 @@ const handlePPMPlan = async () => {
<button <button
onClick={handleSubmit} onClick={handleSubmit}
disabled={saving} 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 /> <FaSave />
{saving ? 'Saving...' : 'Save Changes'} {saving ? 'Saving...' : 'Save Changes'}

911
src/pages/AssetList.tsx
View File

File diff suppressed because it is too large Load Diff