407 lines
17 KiB
TypeScript
407 lines
17 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
|
|
import { usePPMDetails, usePPMMutations } from '../hooks/usePPM';
|
|
import { FaArrowLeft, FaSave, FaEdit, FaTools } from 'react-icons/fa';
|
|
import type { CreatePPMData } from '../services/ppmService';
|
|
|
|
const PPMDetail: React.FC = () => {
|
|
const { ppmName } = useParams<{ ppmName: string }>();
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const duplicateFromPPM = searchParams.get('duplicate');
|
|
|
|
const isNewPPM = ppmName === 'new';
|
|
const isDuplicating = isNewPPM && !!duplicateFromPPM;
|
|
|
|
const { ppm, loading, error, refetch } = usePPMDetails(
|
|
isDuplicating ? duplicateFromPPM : (isNewPPM ? null : ppmName || null)
|
|
);
|
|
const { createPPM, updatePPM, loading: saving } = usePPMMutations();
|
|
|
|
const [isEditing, setIsEditing] = useState(isNewPPM);
|
|
const [formData, setFormData] = useState<CreatePPMData>({
|
|
company: '',
|
|
asset_name: '',
|
|
custom_asset_type: '',
|
|
maintenance_team: '',
|
|
custom_frequency: '',
|
|
custom_total_amount: 0,
|
|
custom_no_of_pms: 0,
|
|
custom_price_per_pm: 0,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (ppm) {
|
|
setFormData({
|
|
company: ppm.company || '',
|
|
asset_name: ppm.asset_name || '',
|
|
custom_asset_type: ppm.custom_asset_type || '',
|
|
maintenance_team: ppm.maintenance_team || '',
|
|
custom_frequency: ppm.custom_frequency || '',
|
|
custom_total_amount: ppm.custom_total_amount || 0,
|
|
custom_no_of_pms: ppm.custom_no_of_pms || 0,
|
|
custom_price_per_pm: ppm.custom_price_per_pm || 0,
|
|
});
|
|
}
|
|
}, [ppm, isDuplicating]);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: name.includes('amount') || name.includes('pms') || name.includes('price')
|
|
? parseFloat(value) || 0
|
|
: value
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!formData.asset_name) {
|
|
alert('Please enter Asset Name');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (isNewPPM || isDuplicating) {
|
|
const result = await createPPM(formData);
|
|
const successMessage = isDuplicating
|
|
? 'PPM schedule duplicated successfully!'
|
|
: 'PPM schedule created successfully!';
|
|
alert(successMessage);
|
|
if (result.asset_maintenance?.name) {
|
|
navigate(`/ppm/${result.asset_maintenance.name}`);
|
|
} else {
|
|
refetch();
|
|
navigate('/ppm');
|
|
}
|
|
} else if (ppmName) {
|
|
await updatePPM(ppmName, formData);
|
|
alert('PPM schedule updated successfully!');
|
|
setIsEditing(false);
|
|
refetch();
|
|
}
|
|
} catch (err) {
|
|
console.error('PPM save error:', err);
|
|
alert('Failed to save: ' + (err instanceof Error ? err.message : 'Unknown error'));
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen bg-gray-50 dark:bg-gray-900">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
|
|
<p className="mt-4 text-gray-600 dark:text-gray-400">Loading PPM schedule...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error && !isNewPPM && !isDuplicating) {
|
|
return (
|
|
<div className="p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
|
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
|
<p className="text-red-600 dark:text-red-400">Error: {error}</p>
|
|
<button
|
|
onClick={() => navigate('/ppm')}
|
|
className="mt-2 text-red-700 dark:text-red-400 underline hover:text-red-800 dark:hover:text-red-300"
|
|
>
|
|
Back to PPM schedules
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
|
{/* Header */}
|
|
<div className="mb-6 flex justify-between items-center">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => navigate('/ppm')}
|
|
className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-2"
|
|
>
|
|
<FaArrowLeft />
|
|
<span className="text-gray-900 dark:text-white">
|
|
{isDuplicating ? 'Duplicate PPM Schedule' : (isNewPPM ? 'New PPM Schedule' : 'PPM Schedule Details')}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{!isNewPPM && !isEditing && (
|
|
<button
|
|
onClick={() => setIsEditing(true)}
|
|
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
|
|
>
|
|
<FaEdit />
|
|
Edit
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Main Form */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Basic Information */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Basic Information</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Company *
|
|
</label>
|
|
{isEditing ? (
|
|
<input
|
|
type="text"
|
|
name="company"
|
|
value={formData.company}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
required
|
|
/>
|
|
) : (
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-gray-900 dark:text-white">{ppm?.company || '-'}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Asset Name *
|
|
</label>
|
|
{isEditing ? (
|
|
<input
|
|
type="text"
|
|
name="asset_name"
|
|
value={formData.asset_name}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
required
|
|
/>
|
|
) : (
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-gray-900 dark:text-white">{ppm?.asset_name || '-'}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Asset Type
|
|
</label>
|
|
{isEditing ? (
|
|
<input
|
|
type="text"
|
|
name="custom_asset_type"
|
|
value={formData.custom_asset_type}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
) : (
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-gray-900 dark:text-white">{ppm?.custom_asset_type || '-'}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Maintenance Team
|
|
</label>
|
|
{isEditing ? (
|
|
<input
|
|
type="text"
|
|
name="maintenance_team"
|
|
value={formData.maintenance_team}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
) : (
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-gray-900 dark:text-white">{ppm?.maintenance_team || '-'}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Frequency
|
|
</label>
|
|
{isEditing ? (
|
|
<input
|
|
type="text"
|
|
name="custom_frequency"
|
|
value={formData.custom_frequency}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="e.g., Monthly, Quarterly, Yearly"
|
|
/>
|
|
) : (
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-gray-900 dark:text-white">{ppm?.custom_frequency || '-'}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Financial Information */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Financial Information</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Number of PMs
|
|
</label>
|
|
{isEditing ? (
|
|
<input
|
|
type="number"
|
|
name="custom_no_of_pms"
|
|
value={formData.custom_no_of_pms}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
min="0"
|
|
/>
|
|
) : (
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-gray-900 dark:text-white">{ppm?.custom_no_of_pms || '-'}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Price per PM
|
|
</label>
|
|
{isEditing ? (
|
|
<input
|
|
type="number"
|
|
name="custom_price_per_pm"
|
|
value={formData.custom_price_per_pm}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
min="0"
|
|
step="0.01"
|
|
/>
|
|
) : (
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-gray-900 dark:text-white">
|
|
{ppm?.custom_price_per_pm ? `$${ppm.custom_price_per_pm.toLocaleString()}` : '-'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Total Amount
|
|
</label>
|
|
{isEditing ? (
|
|
<input
|
|
type="number"
|
|
name="custom_total_amount"
|
|
value={formData.custom_total_amount}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
min="0"
|
|
step="0.01"
|
|
/>
|
|
) : (
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-gray-900 dark:text-white font-semibold">
|
|
{ppm?.custom_total_amount ? `$${ppm.custom_total_amount.toLocaleString()}` : '-'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar Info */}
|
|
<div className="lg:col-span-1">
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-4">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Schedule Information</h3>
|
|
|
|
{!isNewPPM && ppm && (
|
|
<>
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">PPM ID</p>
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">{ppm.name}</p>
|
|
</div>
|
|
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Created</p>
|
|
<p className="text-xs text-gray-900 dark:text-white">
|
|
{ppm.creation ? new Date(ppm.creation).toLocaleString() : '-'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{isNewPPM && (
|
|
<div className="text-center py-8">
|
|
<FaTools className="text-4xl text-gray-400 dark:text-gray-500 mx-auto mb-2" />
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
Schedule information will appear after creation
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
{isEditing && (
|
|
<div className="mt-6 flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (isNewPPM) {
|
|
navigate('/ppm');
|
|
} else {
|
|
setIsEditing(false);
|
|
if (ppm) {
|
|
setFormData({
|
|
company: ppm.company || '',
|
|
asset_name: ppm.asset_name || '',
|
|
custom_asset_type: ppm.custom_asset_type || '',
|
|
maintenance_team: ppm.maintenance_team || '',
|
|
custom_frequency: ppm.custom_frequency || '',
|
|
custom_total_amount: ppm.custom_total_amount || 0,
|
|
custom_no_of_pms: ppm.custom_no_of_pms || 0,
|
|
custom_price_per_pm: ppm.custom_price_per_pm || 0,
|
|
});
|
|
}
|
|
}
|
|
}}
|
|
className="px-6 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center gap-2 disabled:opacity-50"
|
|
>
|
|
<FaSave />
|
|
{saving ? 'Saving...' : (isNewPPM ? 'Create' : 'Save Changes')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PPMDetail;
|
|
|