147 lines
8.3 KiB
JavaScript
147 lines
8.3 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link, useForm } from '@inertiajs/react';
|
|
import EmployerLayout from '../../../Layouts/EmployerLayout';
|
|
import { useTranslation } from '../../../lib/LanguageContext';
|
|
import {
|
|
LifeBuoy,
|
|
ArrowLeft,
|
|
AlertTriangle,
|
|
CheckCircle
|
|
} from 'lucide-react';
|
|
|
|
export default function Create() {
|
|
const { t } = useTranslation();
|
|
|
|
const { data, setData, post, processing, errors } = useForm({
|
|
subject: '',
|
|
description: '',
|
|
priority: 'medium',
|
|
});
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
post('/employer/support/create');
|
|
};
|
|
|
|
return (
|
|
<EmployerLayout title={t('create_new_ticket', 'Create New Ticket')}>
|
|
<Head title={t('create_support_ticket_title', 'Create Support Ticket - Employer Portal')} />
|
|
|
|
<div className="max-w-2xl select-none w-full pb-16 space-y-6">
|
|
|
|
{/* Back button */}
|
|
<Link
|
|
href="/employer/support"
|
|
className="inline-flex items-center space-x-2 text-xs font-black text-slate-500 hover:text-slate-800 transition-colors"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span>{t('back_to_support', 'Back to Help & Support')}</span>
|
|
</Link>
|
|
|
|
{/* Form Card */}
|
|
<div className="bg-white p-6 md:p-8 rounded-3xl border border-slate-200 shadow-sm space-y-6">
|
|
<div className="flex items-center space-x-3.5 border-b border-slate-100 pb-4">
|
|
<div className="w-11 h-11 rounded-xl bg-blue-50 text-[#185FA5] flex items-center justify-center border border-blue-100 flex-shrink-0">
|
|
<LifeBuoy className="w-5 h-5 animate-spin-slow" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-extrabold text-sm text-slate-900">{t('open_support_case', 'Open a Support Case')}</h3>
|
|
<p className="text-[11px] text-slate-400 font-semibold">{t('open_support_case_desc', 'Please provide detailed info to help our engineering team solve it fast.')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-5 text-xs font-bold text-slate-700">
|
|
{/* Subject */}
|
|
<div className="space-y-1.5">
|
|
<label className="block text-slate-400 uppercase tracking-widest text-[9px]">{t('ticket_subject', 'Subject / Summary')}</label>
|
|
<input
|
|
type="text"
|
|
placeholder={t('ticket_subject_placeholder', 'e.g. Stripe checkout throws 500 error')}
|
|
value={data.subject}
|
|
onChange={e => setData('subject', e.target.value)}
|
|
className={`w-full p-3 border rounded-xl bg-slate-50/50 text-slate-800 outline-none focus:bg-white focus:border-[#185FA5] transition-all ${
|
|
errors.subject ? 'border-red-400 bg-red-50/20' : 'border-slate-200'
|
|
}`}
|
|
required
|
|
/>
|
|
{errors.subject && (
|
|
<p className="text-[10px] text-red-500 font-semibold mt-1">{errors.subject}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Priority */}
|
|
<div className="space-y-1.5">
|
|
<label className="block text-slate-400 uppercase tracking-widest text-[9px]">{t('ticket_priority', 'Severity / Priority')}</label>
|
|
<select
|
|
value={data.priority}
|
|
onChange={e => setData('priority', e.target.value)}
|
|
className="w-full p-3 border border-slate-200 rounded-xl bg-slate-50/50 text-slate-800 outline-none focus:bg-white focus:border-[#185FA5] transition-all"
|
|
>
|
|
<option value="low">{t('priority_low', 'Low (General queries, feedback)')}</option>
|
|
<option value="medium">{t('priority_medium', 'Medium (Functionality bugs, minor errors)')}</option>
|
|
<option value="high">{t('priority_high', 'High (Payment failures, account lockouts)')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="space-y-1.5">
|
|
<label className="block text-slate-400 uppercase tracking-widest text-[9px]">{t('ticket_description', 'Detailed Description')}</label>
|
|
<textarea
|
|
rows="6"
|
|
placeholder={t('ticket_description_placeholder', 'Detail the steps to reproduce the error or query. Paste exact log outputs if possible.')}
|
|
value={data.description}
|
|
onChange={e => setData('description', e.target.value)}
|
|
className={`w-full p-3 border rounded-xl bg-slate-50/50 text-slate-800 outline-none focus:bg-white focus:border-[#185FA5] transition-all leading-relaxed ${
|
|
errors.description ? 'border-red-400 bg-red-50/20' : 'border-slate-200'
|
|
}`}
|
|
required
|
|
/>
|
|
{errors.description && (
|
|
<p className="text-[10px] text-red-500 font-semibold mt-1">{errors.description}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Support notice */}
|
|
{data.priority === 'high' && (
|
|
<div className="bg-amber-50 border border-amber-200 rounded-2xl p-4 flex items-start space-x-3 text-amber-800 animate-pulse">
|
|
<AlertTriangle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
|
|
<div>
|
|
<h5 className="font-extrabold text-[11px]">{t('high_priority_alert', 'Priority High Selected')}</h5>
|
|
<p className="text-[10px] font-semibold text-amber-700 mt-0.5 leading-relaxed">
|
|
{t('high_priority_desc', 'Tickets marked high route directly to our standby on-call senior engineering queue. Response is initiated under 2 hours.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Buttons */}
|
|
<div className="flex items-center justify-end space-x-3 pt-4 border-t border-slate-100">
|
|
<Link
|
|
href="/employer/support"
|
|
className="px-5 py-3 rounded-xl border border-slate-200 hover:bg-slate-50 text-slate-600 transition-colors"
|
|
>
|
|
{t('cancel', 'Cancel')}
|
|
</Link>
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="px-6 py-3 rounded-xl bg-[#185FA5] hover:bg-[#144f8a] text-white transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
|
|
>
|
|
{processing ? (
|
|
<>
|
|
<span className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
|
<span>{t('submitting', 'Submitting...')}</span>
|
|
</>
|
|
) : (
|
|
<span>{t('submit_ticket', 'Submit Support Ticket')}</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|