837 lines
34 KiB
TypeScript
837 lines
34 KiB
TypeScript
import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
|
|
import { useParams, useNavigate, useLocation, useSearchParams } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useIssueDetails, useIssueMutations } from '../hooks/useIssue';
|
|
import {
|
|
FaArrowLeft,
|
|
FaSave,
|
|
FaEdit,
|
|
FaTrash,
|
|
FaCheckCircle,
|
|
FaTimesCircle,
|
|
FaExclamationTriangle,
|
|
FaUser,
|
|
FaBuilding,
|
|
FaEnvelope,
|
|
FaCalendarAlt,
|
|
FaTag,
|
|
FaComment,
|
|
FaClipboardList
|
|
} from 'react-icons/fa';
|
|
import { toast, ToastContainer, Bounce } from 'react-toastify';
|
|
import 'react-toastify/dist/ReactToastify.css';
|
|
import LinkField from '../components/LinkField';
|
|
import type { CreateIssueData } from '../services/issueService';
|
|
import CommentSection from '../components/CommentSection';
|
|
import WorkflowActions from '../components/WorkflowActions';
|
|
import SupportPrecheckWizard from './SupportPrecheckWizard';
|
|
import type { NewIssuePrecheckLocationState } from './supportPrecheckContent';
|
|
import apiService from '../services/apiService';
|
|
|
|
const ROLES_CAN_CREATE_WO_FROM_ISSUE = ['Work Control', 'System Manager'];
|
|
const ISSUE_STATUSES_ALLOW_WO = ['Open', 'Replied', 'On Hold'];
|
|
|
|
// Helper to get today's date in YYYY-MM-DD format
|
|
const getTodayDate = (): string => {
|
|
return new Date().toISOString().split('T')[0];
|
|
};
|
|
|
|
// Helper to get current time in HH:MM:SS format
|
|
const getCurrentTime = (): string => {
|
|
return new Date().toTimeString().split(' ')[0];
|
|
};
|
|
|
|
// Status badge styles
|
|
const getStatusStyle = (status: string) => {
|
|
switch (status?.toLowerCase()) {
|
|
case 'open':
|
|
return { bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-800 dark:text-blue-300', border: 'border-blue-200 dark:border-blue-800' };
|
|
case 'replied':
|
|
return { bg: 'bg-purple-100 dark:bg-purple-900/30', text: 'text-purple-800 dark:text-purple-300', border: 'border-purple-200 dark:border-purple-800' };
|
|
case 'on hold':
|
|
return { bg: 'bg-yellow-100 dark:bg-yellow-900/30', text: 'text-yellow-800 dark:text-yellow-300', border: 'border-yellow-200 dark:border-yellow-800' };
|
|
case 'resolved':
|
|
return { bg: 'bg-green-100 dark:bg-green-900/30', text: 'text-green-800 dark:text-green-300', border: 'border-green-200 dark:border-green-800' };
|
|
case 'closed':
|
|
return { bg: 'bg-gray-100 dark:bg-gray-700', text: 'text-gray-800 dark:text-gray-300', border: 'border-gray-200 dark:border-gray-600' };
|
|
default:
|
|
return { bg: 'bg-gray-100 dark:bg-gray-700', text: 'text-gray-800 dark:text-gray-300', border: 'border-gray-200 dark:border-gray-600' };
|
|
}
|
|
};
|
|
|
|
const IssueDetail: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const { issueName } = useParams<{ issueName: string }>();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [searchParams] = useSearchParams();
|
|
|
|
const isNewIssue = issueName === 'new';
|
|
const newIssuePrecheckState = (location.state || undefined) as NewIssuePrecheckLocationState | undefined;
|
|
const skipNewIssuePrecheck =
|
|
newIssuePrecheckState?.newIssuePrecheckDone === true ||
|
|
searchParams.get('skip_precheck') === '1';
|
|
|
|
// Form data state
|
|
const [formData, setFormData] = useState<CreateIssueData & {
|
|
opening_date?: string;
|
|
opening_time?: string;
|
|
first_responded_on?: string;
|
|
sla_resolution_date?: string;
|
|
sla_resolution_by?: string;
|
|
}>({
|
|
subject: '',
|
|
raised_by: '',
|
|
status: 'Open',
|
|
priority: '',
|
|
issue_type: '',
|
|
description: '',
|
|
contact: '',
|
|
company: '',
|
|
customer: '',
|
|
project: '',
|
|
resolution_details: '',
|
|
opening_date: isNewIssue ? getTodayDate() : '',
|
|
opening_time: isNewIssue ? getCurrentTime() : '',
|
|
first_responded_on: '',
|
|
sla_resolution_date: '',
|
|
sla_resolution_by: '',
|
|
});
|
|
|
|
const { issue, loading, error, refetch } = useIssueDetails(isNewIssue ? null : issueName || null);
|
|
const { createIssue, updateIssue, deleteIssue, loading: saving } = useIssueMutations();
|
|
|
|
const [isEditing, setIsEditing] = useState(isNewIssue);
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
const appliedPrecheckReasonRef = useRef(false);
|
|
|
|
const [userRoles, setUserRoles] = useState<string[]>([]);
|
|
|
|
useEffect(() => {
|
|
const fetchRoles = async () => {
|
|
try {
|
|
const response = await apiService.apiCall<unknown>(
|
|
'/api/method/asset_lite.api.user_roles.get_user_roles'
|
|
);
|
|
if (Array.isArray(response)) {
|
|
setUserRoles(response as string[]);
|
|
} else if (response && typeof response === 'object' && 'message' in response) {
|
|
const msg = (response as { message?: string[] }).message;
|
|
if (Array.isArray(msg)) setUserRoles(msg);
|
|
}
|
|
} catch {
|
|
setUserRoles([]);
|
|
}
|
|
};
|
|
void fetchRoles();
|
|
}, []);
|
|
|
|
const canCreateWorkOrderFromIssue =
|
|
!isNewIssue &&
|
|
ISSUE_STATUSES_ALLOW_WO.includes((issue?.status || formData.status || '').trim()) &&
|
|
ROLES_CAN_CREATE_WO_FROM_ISSUE.some((r) => userRoles.includes(r));
|
|
|
|
useEffect(() => {
|
|
if (!isNewIssue || !skipNewIssuePrecheck) {
|
|
return;
|
|
}
|
|
const reason = newIssuePrecheckState?.precheckCantCompleteReason?.trim();
|
|
if (!reason || appliedPrecheckReasonRef.current) {
|
|
return;
|
|
}
|
|
appliedPrecheckReasonRef.current = true;
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
description: `${prev.description ? `${prev.description}\n\n` : ''}Could not complete self-service checks: ${reason}`,
|
|
}));
|
|
}, [isNewIssue, skipNewIssuePrecheck, newIssuePrecheckState?.precheckCantCompleteReason]);
|
|
|
|
/** Legacy Open issues: ensure workflow_state exists so Work Control sees actions */
|
|
useEffect(() => {
|
|
if (!issueName || isNewIssue || !issue) return;
|
|
if (issue.workflow_state || issue.status !== 'Open') return;
|
|
let cancelled = false;
|
|
void apiService
|
|
.apiCall('/api/method/asset_lite.api.issue_api.normalize_issue_workflow_state', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ issue_name: issueName }),
|
|
})
|
|
.then(() => {
|
|
if (!cancelled) void refetch();
|
|
})
|
|
.catch(() => {});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [issueName, isNewIssue, issue?.name, issue?.workflow_state, issue?.status, refetch]);
|
|
|
|
const issueWorkflowDocData = useMemo(() => {
|
|
if (!issue || isNewIssue) return undefined;
|
|
return {
|
|
status: formData.status || issue.status || '',
|
|
subject: formData.subject ?? issue.subject ?? '',
|
|
priority: formData.priority ?? issue.priority ?? '',
|
|
company: formData.company ?? issue.company ?? '',
|
|
};
|
|
}, [
|
|
issue,
|
|
isNewIssue,
|
|
formData.status,
|
|
formData.subject,
|
|
formData.priority,
|
|
formData.company,
|
|
]);
|
|
|
|
// Load issue data when fetched
|
|
useEffect(() => {
|
|
if (issue && !isNewIssue) {
|
|
setFormData({
|
|
subject: issue.subject || '',
|
|
raised_by: issue.raised_by || '',
|
|
status: issue.status || 'Open',
|
|
priority: issue.priority || '',
|
|
issue_type: issue.issue_type || '',
|
|
description: issue.description || '',
|
|
contact: issue.contact || '',
|
|
company: issue.company || '',
|
|
customer: issue.customer || '',
|
|
project: issue.project || '',
|
|
resolution_details: issue.resolution_details || '',
|
|
opening_date: issue.opening_date || '',
|
|
opening_time: issue.opening_time || '',
|
|
first_responded_on: issue.first_responded_on ? issue.first_responded_on.split(' ')[0] : '',
|
|
sla_resolution_date: issue.sla_resolution_date ? issue.sla_resolution_date.split(' ')[0] : '',
|
|
sla_resolution_by: issue.sla_resolution_by || '',
|
|
});
|
|
setIsEditing(false);
|
|
}
|
|
}, [issue, isNewIssue]);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!formData.subject) {
|
|
toast.error('Please enter a subject', {
|
|
position: "top-right",
|
|
autoClose: 4000,
|
|
icon: <FaTimesCircle />
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (isNewIssue) {
|
|
const newIssue = await createIssue(formData);
|
|
// Auto-assign the newly created Issue to Work Control for review
|
|
try {
|
|
await apiService.apiCall('/api/method/asset_lite.api.issue_api.assign_issue_to_work_control', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ issue_name: newIssue.name })
|
|
});
|
|
} catch (assignErr) {
|
|
// Non-blocking: ticket is created even if assignment fails
|
|
console.warn('Failed to auto-assign issue to Work Control:', assignErr);
|
|
}
|
|
toast.success('Issue created successfully!', {
|
|
position: "top-right",
|
|
autoClose: 3000,
|
|
icon: <FaCheckCircle />
|
|
});
|
|
navigate(`/support/${newIssue.name}`);
|
|
} else {
|
|
await updateIssue(issueName!, formData);
|
|
toast.success('Issue updated successfully!', {
|
|
position: "top-right",
|
|
autoClose: 3000,
|
|
icon: <FaCheckCircle />
|
|
});
|
|
setIsEditing(false);
|
|
refetch();
|
|
}
|
|
} catch (err) {
|
|
const errorMessage = err instanceof Error ? err.message : 'Unknown error';
|
|
toast.error(`Failed to save: ${errorMessage}`, {
|
|
position: "top-right",
|
|
autoClose: 6000,
|
|
icon: <FaTimesCircle />
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
try {
|
|
await deleteIssue(issueName!);
|
|
toast.success('Issue deleted successfully!', {
|
|
position: "top-right",
|
|
autoClose: 3000,
|
|
icon: <FaCheckCircle />
|
|
});
|
|
navigate(-1);
|
|
} catch (err) {
|
|
const errorMessage = err instanceof Error ? err.message : 'Unknown error';
|
|
toast.error(`Failed to delete: ${errorMessage}`, {
|
|
position: "top-right",
|
|
autoClose: 6000,
|
|
icon: <FaTimesCircle />
|
|
});
|
|
}
|
|
};
|
|
|
|
const isFieldDisabled = useCallback((fieldname: string): boolean => {
|
|
if (!isEditing) return true;
|
|
// Some fields are always read-only
|
|
if (['opening_date', 'opening_time'].includes(fieldname) && !isNewIssue) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}, [isEditing, isNewIssue]);
|
|
|
|
// Format datetime
|
|
const formatDateTime = (dateStr: string) => {
|
|
if (!dateStr) return '-';
|
|
return new Date(dateStr).toLocaleString();
|
|
};
|
|
|
|
if (isNewIssue && !skipNewIssuePrecheck) {
|
|
return <SupportPrecheckWizard variant="newIssue" />;
|
|
}
|
|
|
|
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 issue details...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error && !isNewIssue) {
|
|
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-6">
|
|
<h2 className="text-xl font-bold text-red-800 dark:text-red-300 mb-4">Error Loading Issue</h2>
|
|
<p className="text-red-700 dark:text-red-400 mb-4">{error}</p>
|
|
<button
|
|
onClick={() => navigate(-1)}
|
|
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"
|
|
>
|
|
Back to Issues
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const currentStatus = issue?.status || formData.status || 'Open';
|
|
const statusStyle = getStatusStyle(currentStatus);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
|
{/* Toast Container */}
|
|
<ToastContainer
|
|
position="top-right"
|
|
autoClose={4000}
|
|
hideProgressBar={false}
|
|
newestOnTop
|
|
closeOnClick
|
|
rtl={false}
|
|
pauseOnFocusLoss
|
|
draggable
|
|
pauseOnHover
|
|
theme="colored"
|
|
transition={Bounce}
|
|
/>
|
|
|
|
{/* Header */}
|
|
<div className="mb-6 flex justify-between items-center">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => navigate(-1)}
|
|
className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
|
|
>
|
|
<FaArrowLeft size={20} />
|
|
</button>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-800 dark:text-white flex items-center gap-3">
|
|
{isNewIssue ? t('issues.newIssue') : issue?.name || t('issues.issueDetails')}
|
|
{!isNewIssue && (
|
|
<span className={`px-3 py-1 rounded-full text-sm font-medium ${statusStyle.bg} ${statusStyle.text} ${statusStyle.border} border`}>
|
|
{currentStatus}
|
|
</span>
|
|
)}
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
|
{isNewIssue ? t('issues.createNewIssue') : formData.subject}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 flex-wrap">
|
|
{!isNewIssue && canCreateWorkOrderFromIssue && issueName && (
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
navigate(`/work-orders/new?from_issue=${encodeURIComponent(issueName)}`)
|
|
}
|
|
className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
|
|
>
|
|
<FaClipboardList />
|
|
{t('issues.createWorkOrderFromIssue')}
|
|
</button>
|
|
)}
|
|
{!isNewIssue && !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 />
|
|
{t('common.edit')}
|
|
</button>
|
|
<button
|
|
onClick={() => setShowDeleteConfirm(true)}
|
|
className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
|
|
>
|
|
<FaTrash />
|
|
{t('common.delete')}
|
|
</button>
|
|
</>
|
|
)}
|
|
{isEditing && (
|
|
<>
|
|
<button
|
|
onClick={() => {
|
|
if (isNewIssue) {
|
|
navigate(-1);
|
|
} else {
|
|
setIsEditing(false);
|
|
refetch();
|
|
}
|
|
}}
|
|
className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg"
|
|
>
|
|
{t('common.cancel')}
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 disabled:opacity-50"
|
|
>
|
|
<FaSave />
|
|
{saving ? t('common.saving') : t('common.save')}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Delete Confirmation Modal */}
|
|
{showDeleteConfirm && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 shadow-xl">
|
|
<div className="flex items-start gap-3 mb-4">
|
|
<FaExclamationTriangle className="text-red-500 text-xl mt-0.5" />
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">Delete Issue</h3>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
|
Are you sure you want to delete this issue? This action cannot be undone.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
onClick={() => setShowDeleteConfirm(false)}
|
|
className="px-4 py-2 bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-lg"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleDelete}
|
|
disabled={saving}
|
|
className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg disabled:opacity-50"
|
|
>
|
|
{saving ? 'Deleting...' : 'Delete'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Form */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Main Content - Left Column */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Issue Details */}
|
|
<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-lg font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700 flex items-center gap-2">
|
|
<FaComment className="text-blue-500" />
|
|
{t('issues.issueDetails')}
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
{t('issues.subject')} <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={handleChange}
|
|
disabled={isFieldDisabled('subject')}
|
|
placeholder={t('issues.enterSubject')}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<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-1">
|
|
{t('commonFields.status')}
|
|
</label>
|
|
<select
|
|
name="status"
|
|
value={formData.status}
|
|
onChange={handleChange}
|
|
disabled={isFieldDisabled('status')}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="Open">Open</option>
|
|
<option value="Replied">Replied</option>
|
|
<option value="On Hold">On Hold</option>
|
|
<option value="Resolved">Resolved</option>
|
|
<option value="Closed">Closed</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<LinkField
|
|
label={t('commonFields.priority')}
|
|
doctype="Issue Priority"
|
|
value={formData.priority || ''}
|
|
onChange={(val) => setFormData({ ...formData, priority: val })}
|
|
disabled={isFieldDisabled('priority')}
|
|
placeholder={t('issues.selectPriority')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<LinkField
|
|
label={t('issues.issueType')}
|
|
doctype="Issue Type"
|
|
value={formData.issue_type || ''}
|
|
onChange={(val) => setFormData({ ...formData, issue_type: val })}
|
|
disabled={isFieldDisabled('issue_type')}
|
|
placeholder={t('issues.selectIssueType')}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
{t('commonFields.description')}
|
|
</label>
|
|
<textarea
|
|
name="description"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
disabled={isFieldDisabled('description')}
|
|
placeholder={t('issues.describeIssue')}
|
|
rows={5}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact 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-lg font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700 flex items-center gap-2">
|
|
<FaUser className="text-green-500" />
|
|
{t('issues.contactInformation')}
|
|
</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-1">
|
|
{t('issues.raisedBy')}
|
|
</label>
|
|
<div className="relative">
|
|
<FaEnvelope className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
|
|
<input
|
|
type="email"
|
|
name="raised_by"
|
|
value={formData.raised_by}
|
|
onChange={handleChange}
|
|
disabled={isFieldDisabled('raised_by')}
|
|
placeholder={t('common.email')}
|
|
className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Contact Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="contact"
|
|
value={formData.contact}
|
|
onChange={handleChange}
|
|
disabled={isFieldDisabled('contact')}
|
|
placeholder="Contact person name"
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div> */}
|
|
|
|
<div>
|
|
<LinkField
|
|
label={t('commonFields.company')}
|
|
doctype="Company"
|
|
value={formData.company || ''}
|
|
onChange={(val) => setFormData({ ...formData, company: val })}
|
|
disabled={isFieldDisabled('company')}
|
|
placeholder={t('issues.selectCompany')}
|
|
/>
|
|
</div>
|
|
|
|
{/* <div>
|
|
<LinkField
|
|
label="Customer"
|
|
doctype="Customer"
|
|
value={formData.customer || ''}
|
|
onChange={(val) => setFormData({ ...formData, customer: val })}
|
|
disabled={isFieldDisabled('customer')}
|
|
placeholder="Select customer"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<LinkField
|
|
label="Project"
|
|
doctype="Project"
|
|
value={formData.project || ''}
|
|
onChange={(val) => setFormData({ ...formData, project: val })}
|
|
disabled={isFieldDisabled('project')}
|
|
placeholder="Select project"
|
|
/>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Resolution */}
|
|
{!isNewIssue && (
|
|
<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-lg font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700 flex items-center gap-2">
|
|
<FaCheckCircle className="text-purple-500" />
|
|
{t('issues.resolution')}
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
<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-1">
|
|
{t('issues.firstRespondedOn')}
|
|
</label>
|
|
<input
|
|
type="date"
|
|
name="first_responded_on"
|
|
value={formData.first_responded_on || ''}
|
|
onChange={handleChange}
|
|
disabled={isFieldDisabled('first_responded_on')}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
{t('issues.resolutionDate')}
|
|
</label>
|
|
<input
|
|
type="date"
|
|
name="sla_resolution_date"
|
|
value={formData.sla_resolution_date || ''}
|
|
onChange={handleChange}
|
|
disabled={isFieldDisabled('sla_resolution_date')}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<LinkField
|
|
label={t('issues.resolvedBy')}
|
|
doctype="User"
|
|
value={formData.sla_resolution_by || ''}
|
|
onChange={(val) => setFormData({ ...formData, sla_resolution_by: val })}
|
|
disabled={isFieldDisabled('sla_resolution_by')}
|
|
placeholder={t('maintenance.selectUser')}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
{t('issues.resolutionDetails')}
|
|
</label>
|
|
<textarea
|
|
name="resolution_details"
|
|
value={formData.resolution_details}
|
|
onChange={handleChange}
|
|
disabled={isFieldDisabled('resolution_details')}
|
|
placeholder={t('issues.describeResolution')}
|
|
rows={4}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ✅ ADD THIS — Comments Section */}
|
|
{!isNewIssue && (
|
|
<CommentSection
|
|
referenceDoctype="Issue"
|
|
referenceName={issueName || null}
|
|
title="Comments & Discussion" // optional, default shown
|
|
pollInterval={30000} // optional, auto-refresh every 30s (0 = off)
|
|
initialLimit={5} // optional, comments shown before "show more"
|
|
collapsible={true} // optional, allow collapse/expand
|
|
startCollapsed={false} // optional, start collapsed
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sidebar - Right Column */}
|
|
<div className="space-y-6">
|
|
{!isNewIssue && issueName && (
|
|
<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-lg font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
|
|
{t('issues.workflowActions')}
|
|
</h2>
|
|
<WorkflowActions
|
|
doctype="Issue"
|
|
docname={issueName}
|
|
workflowState={issue?.workflow_state || undefined}
|
|
docData={issueWorkflowDocData}
|
|
onStateChange={() => refetch()}
|
|
documentLabel={t('issues.issueSingular')}
|
|
stateHeading={t('workOrders.detail.currentState')}
|
|
showFullAccessNote
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Status Card */}
|
|
<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-lg font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700 flex items-center gap-2">
|
|
<FaTag className="text-orange-500" />
|
|
{t('issues.statusInformation')}
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
<div className={`p-4 rounded-lg border ${statusStyle.bg} ${statusStyle.border}`}>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">{t('issues.currentStatus')}</p>
|
|
<p className={`text-xl font-semibold ${statusStyle.text}`}>
|
|
{currentStatus}
|
|
</p>
|
|
</div>
|
|
|
|
{formData.priority && (
|
|
<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">{t('commonFields.priority')}</p>
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|
{formData.priority}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{formData.issue_type && (
|
|
<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">{t('issues.issueType')}</p>
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|
{formData.issue_type}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timeline Card */}
|
|
<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-lg font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700 flex items-center gap-2">
|
|
<FaCalendarAlt className="text-teal-500" />
|
|
{t('issues.timeline')}
|
|
</h2>
|
|
|
|
<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">{t('issues.openingDate')}</p>
|
|
<p className="text-sm text-gray-900 dark:text-white">
|
|
{formData.opening_date || '-'}
|
|
</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">Opening Time</p>
|
|
<p className="text-sm text-gray-900 dark:text-white">
|
|
{formData.opening_time || '-'}
|
|
</p>
|
|
</div>
|
|
|
|
{!isNewIssue && issue && (
|
|
<>
|
|
<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">
|
|
{formatDateTime(issue.creation)}
|
|
</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">
|
|
{formatDateTime(issue.modified)}
|
|
</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">Modified By</p>
|
|
<p className="text-sm text-gray-900 dark:text-white">
|
|
{issue.modified_by || '-'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Company Info Card */}
|
|
{formData.company && !isNewIssue && (
|
|
<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-lg font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700 flex items-center gap-2">
|
|
<FaBuilding className="text-indigo-500" />
|
|
Company
|
|
</h2>
|
|
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|
{formData.company}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default IssueDetail; |