572 lines
26 KiB
TypeScript
572 lines
26 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
|
|
import { useWorkOrderDetails, useWorkOrderMutations } from '../hooks/useWorkOrder';
|
|
import { FaArrowLeft, FaSave, FaEdit, FaCheckCircle, FaClock } from 'react-icons/fa';
|
|
import type { CreateWorkOrderData } from '../services/workOrderService';
|
|
|
|
const WorkOrderDetail: React.FC = () => {
|
|
const { workOrderName } = useParams<{ workOrderName: string }>();
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const duplicateFromWorkOrder = searchParams.get('duplicate');
|
|
|
|
const isNewWorkOrder = workOrderName === 'new';
|
|
const isDuplicating = isNewWorkOrder && !!duplicateFromWorkOrder;
|
|
|
|
const { workOrder, loading, error } = useWorkOrderDetails(
|
|
isDuplicating ? duplicateFromWorkOrder : (isNewWorkOrder ? null : workOrderName || null)
|
|
);
|
|
const { createWorkOrder, updateWorkOrder, updateStatus, loading: saving } = useWorkOrderMutations();
|
|
|
|
const [isEditing, setIsEditing] = useState(isNewWorkOrder);
|
|
const [formData, setFormData] = useState<CreateWorkOrderData>({
|
|
company: '',
|
|
work_order_type: '',
|
|
asset: '',
|
|
asset_name: '',
|
|
description: '',
|
|
repair_status: 'Open',
|
|
workflow_state: '',
|
|
department: '',
|
|
custom_priority_: 'Normal',
|
|
asset_type: '',
|
|
manufacturer: '',
|
|
serial_number: '',
|
|
model: '',
|
|
custom_site_contractor: '',
|
|
custom_subcontractor: '',
|
|
failure_date: '',
|
|
custom_deadline_date: '',
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (workOrder) {
|
|
setFormData({
|
|
company: workOrder.company || '',
|
|
work_order_type: workOrder.work_order_type || '',
|
|
asset: workOrder.asset || '',
|
|
asset_name: isDuplicating ? `${workOrder.asset_name} (Copy)` : (workOrder.asset_name || ''),
|
|
description: workOrder.description || '',
|
|
repair_status: isDuplicating ? 'Open' : (workOrder.repair_status || 'Open'),
|
|
workflow_state: workOrder.workflow_state || '',
|
|
department: workOrder.department || '',
|
|
custom_priority_: workOrder.custom_priority_ || 'Normal',
|
|
asset_type: workOrder.asset_type || '',
|
|
manufacturer: workOrder.manufacturer || '',
|
|
serial_number: workOrder.serial_number || '',
|
|
model: workOrder.model || '',
|
|
custom_site_contractor: workOrder.custom_site_contractor || '',
|
|
custom_subcontractor: workOrder.custom_subcontractor || '',
|
|
failure_date: workOrder.failure_date || '',
|
|
custom_deadline_date: workOrder.custom_deadline_date || '',
|
|
});
|
|
}
|
|
}, [workOrder, isDuplicating]);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!formData.work_order_type) {
|
|
alert('Please select a Work Order Type');
|
|
return;
|
|
}
|
|
|
|
console.log('Submitting work order data:', formData);
|
|
|
|
try {
|
|
if (isNewWorkOrder || isDuplicating) {
|
|
const newWorkOrder = await createWorkOrder(formData);
|
|
const successMessage = isDuplicating
|
|
? 'Work order duplicated successfully!'
|
|
: 'Work order created successfully!';
|
|
alert(successMessage);
|
|
navigate(`/work-orders/${newWorkOrder.name}`);
|
|
} else if (workOrderName) {
|
|
await updateWorkOrder(workOrderName, formData);
|
|
alert('Work order updated successfully!');
|
|
setIsEditing(false);
|
|
}
|
|
} catch (err) {
|
|
console.error('Work order save error:', err);
|
|
const errorMessage = err instanceof Error ? err.message : 'Unknown error';
|
|
|
|
if (errorMessage.includes('404') || errorMessage.includes('not found') ||
|
|
errorMessage.includes('has no attribute') || errorMessage.includes('417')) {
|
|
alert(
|
|
'⚠️ Work Order API Not Deployed\n\n' +
|
|
'The Work Order API endpoint is not deployed on your Frappe server yet.\n\n' +
|
|
'Deploy work_order_api.py to: frappe-bench/apps/asset_lite/asset_lite/api/\n\n' +
|
|
'Error: ' + errorMessage
|
|
);
|
|
} else {
|
|
alert('Failed to save work order:\n\n' + errorMessage);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleStatusUpdate = async (newStatus: string) => {
|
|
if (!workOrderName || isNewWorkOrder) return;
|
|
|
|
try {
|
|
await updateStatus(workOrderName, newStatus);
|
|
alert('Status updated successfully!');
|
|
window.location.reload();
|
|
} catch (err) {
|
|
alert('Failed to update status: ' + (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 work order details...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error && !isNewWorkOrder && !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('/work-orders')}
|
|
className="mt-2 text-red-700 dark:text-red-400 underline hover:text-red-800 dark:hover:text-red-300"
|
|
>
|
|
Back to work orders list
|
|
</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('/work-orders')}
|
|
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 Work Order' : (isNewWorkOrder ? 'New Work Order' : 'Work Order Details')}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{!isNewWorkOrder && !isEditing && (
|
|
<>
|
|
<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>
|
|
{/* Quick Status Update Buttons */}
|
|
{workOrder?.repair_status !== 'Completed' && (
|
|
<button
|
|
onClick={() => handleStatusUpdate('Completed')}
|
|
className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
|
|
disabled={saving}
|
|
>
|
|
<FaCheckCircle />
|
|
Mark Complete
|
|
</button>
|
|
)}
|
|
{workOrder?.repair_status !== 'In Progress' && workOrder?.repair_status !== 'Completed' && (
|
|
<button
|
|
onClick={() => handleStatusUpdate('In Progress')}
|
|
className="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
|
|
disabled={saving}
|
|
>
|
|
<FaClock />
|
|
Start Work
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
{isEditing && (
|
|
<>
|
|
<button
|
|
onClick={() => {
|
|
if (isNewWorkOrder) {
|
|
navigate('/work-orders');
|
|
} else {
|
|
setIsEditing(false);
|
|
}
|
|
}}
|
|
className="bg-gray-300 hover:bg-gray-400 text-gray-700 px-6 py-2 rounded-lg"
|
|
disabled={saving}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<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"
|
|
>
|
|
<FaSave />
|
|
{saving ? 'Saving...' : 'Save Changes'}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Left Column - Main Info */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Work Order Information */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-700">
|
|
<h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">Work Order Information</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Work Order ID
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={isNewWorkOrder || isDuplicating ? 'Auto-generated' : workOrder?.name}
|
|
disabled
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400"
|
|
/>
|
|
{isDuplicating && (
|
|
<p className="mt-1 text-xs text-blue-600 dark:text-blue-400">
|
|
💡 Duplicating from: {duplicateFromWorkOrder}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Work Order Type <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
name="work_order_type"
|
|
value={formData.work_order_type}
|
|
onChange={handleChange}
|
|
required
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
>
|
|
<option value="">Select type</option>
|
|
<option value="Preventive Maintenance">Preventive Maintenance</option>
|
|
<option value="Corrective Maintenance">Corrective Maintenance</option>
|
|
<option value="Breakdown Maintenance">Breakdown Maintenance</option>
|
|
<option value="Calibration">Calibration</option>
|
|
<option value="Inspection">Inspection</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Priority
|
|
</label>
|
|
<select
|
|
name="custom_priority_"
|
|
value={formData.custom_priority_}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
>
|
|
<option value="Low">Low</option>
|
|
<option value="Normal">Normal</option>
|
|
<option value="Medium">Medium</option>
|
|
<option value="High">High</option>
|
|
<option value="Urgent">Urgent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Status
|
|
</label>
|
|
<select
|
|
name="repair_status"
|
|
value={formData.repair_status}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
>
|
|
<option value="Open">Open</option>
|
|
<option value="In Progress">In Progress</option>
|
|
<option value="Pending">Pending</option>
|
|
<option value="Completed">Completed</option>
|
|
<option value="Cancelled">Cancelled</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Company
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="company"
|
|
value={formData.company}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
name="description"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
rows={3}
|
|
disabled={!isEditing}
|
|
placeholder="Describe the issue or maintenance task..."
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* COLUMN 2: Asset Information */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-700">
|
|
<h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
|
|
Asset Information
|
|
</h2>
|
|
<div className="space-y-4">
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Asset ID
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="asset"
|
|
value={formData.asset}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
placeholder="e.g. ACC-ASS-2025-00001"
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Asset Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="asset_name"
|
|
value={formData.asset_name}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
placeholder="Asset name"
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Asset Type
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="asset_type"
|
|
value={formData.asset_type}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Manufacturer
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="manufacturer"
|
|
value={formData.manufacturer}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Serial Number
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="serial_number"
|
|
value={formData.serial_number}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Model
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="model"
|
|
value={formData.model}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Location & Assignment */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-700">
|
|
<h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">Location & Assignment</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Department
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="department"
|
|
value={formData.department}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Site Contractor
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="custom_site_contractor"
|
|
value={formData.custom_site_contractor}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Subcontractor
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="custom_subcontractor"
|
|
value={formData.custom_subcontractor}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Failure Date
|
|
</label>
|
|
<input
|
|
type="date"
|
|
name="failure_date"
|
|
value={formData.failure_date}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Deadline Date
|
|
</label>
|
|
<input
|
|
type="date"
|
|
name="custom_deadline_date"
|
|
value={formData.custom_deadline_date}
|
|
onChange={handleChange}
|
|
disabled={!isEditing}
|
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column - Status & Summary */}
|
|
<div className="space-y-6">
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-700">
|
|
<h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">Status Summary</h2>
|
|
|
|
{!isNewWorkOrder && workOrder && (
|
|
<div className="space-y-4">
|
|
<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">Current Status</p>
|
|
<p className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{workOrder.repair_status || 'Open'}
|
|
</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">Priority</p>
|
|
<p className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{workOrder.custom_priority_ || 'Normal'}
|
|
</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-sm text-gray-900 dark:text-white">
|
|
{workOrder.creation ? new Date(workOrder.creation).toLocaleString() : '-'}
|
|
</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">Last Modified</p>
|
|
<p className="text-sm text-gray-900 dark:text-white">
|
|
{workOrder.modified ? new Date(workOrder.modified).toLocaleString() : '-'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isNewWorkOrder && (
|
|
<div className="text-center py-8">
|
|
<FaClock 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">
|
|
Status information will appear after creation
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WorkOrderDetail;
|
|
|