309 lines
14 KiB
TypeScript
309 lines
14 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { X, Plus, Trash2, GripVertical, Save } from 'lucide-react';
|
|
import { toast } from 'react-toastify';
|
|
import workflowService, { Workflow, WorkflowStep } from '../services/workflowService';
|
|
|
|
interface WorkflowBuilderProps {
|
|
workflow?: Workflow | null;
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
}
|
|
|
|
const WorkflowBuilder: React.FC<WorkflowBuilderProps> = ({ workflow, onClose, onSuccess }) => {
|
|
const [formData, setFormData] = useState({
|
|
name: workflow?.name || '',
|
|
description: workflow?.description || '',
|
|
workflow_type: workflow?.workflow_type || 'custom',
|
|
trigger: workflow?.trigger || 'manual',
|
|
sla_hours: workflow?.sla_hours?.toString() || '',
|
|
trigger_config: workflow?.trigger_config || {},
|
|
});
|
|
const [steps, setSteps] = useState<WorkflowStep[]>(workflow?.steps || []);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const addStep = () => {
|
|
setSteps([
|
|
...steps,
|
|
{
|
|
title: '',
|
|
description: '',
|
|
task_type: 'general',
|
|
priority: 'medium',
|
|
estimated_duration_minutes: 30,
|
|
},
|
|
]);
|
|
};
|
|
|
|
const updateStep = (index: number, field: keyof WorkflowStep, value: string | number) => {
|
|
const newSteps = [...steps];
|
|
newSteps[index] = { ...newSteps[index], [field]: value };
|
|
setSteps(newSteps);
|
|
};
|
|
|
|
const removeStep = (index: number) => {
|
|
setSteps(steps.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!formData.name.trim()) {
|
|
toast.error('Workflow name is required');
|
|
return;
|
|
}
|
|
|
|
if (steps.length === 0) {
|
|
toast.error('At least one step is required');
|
|
return;
|
|
}
|
|
|
|
if (steps.some(step => !step.title.trim())) {
|
|
toast.error('All steps must have a title');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
if (workflow) {
|
|
await workflowService.updateWorkflow(workflow.id, {
|
|
name: formData.name,
|
|
description: formData.description || undefined,
|
|
steps: steps,
|
|
trigger_config: formData.trigger_config,
|
|
sla_hours: formData.sla_hours ? parseInt(formData.sla_hours) : undefined,
|
|
});
|
|
toast.success('Workflow updated successfully');
|
|
} else {
|
|
await workflowService.createWorkflow({
|
|
name: formData.name,
|
|
description: formData.description || undefined,
|
|
workflow_type: formData.workflow_type as 'pre_arrival' | 'room_preparation' | 'maintenance' | 'guest_communication' | 'follow_up' | 'custom',
|
|
trigger: formData.trigger as 'manual' | 'scheduled' | 'check_in' | 'check_out' | 'booking_created' | 'booking_confirmed' | 'maintenance_request' | 'guest_message',
|
|
steps: steps,
|
|
trigger_config: formData.trigger_config,
|
|
sla_hours: formData.sla_hours ? parseInt(formData.sla_hours) : undefined,
|
|
});
|
|
toast.success('Workflow created successfully');
|
|
}
|
|
onSuccess();
|
|
} catch (error: unknown) {
|
|
toast.error(getUserFriendlyError(error) || 'Failed to save workflow');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
|
|
<div className="sticky top-0 bg-white border-b border-gray-200 p-6 flex items-center justify-between">
|
|
<h2 className="text-2xl font-bold text-gray-900">
|
|
{workflow ? 'Edit Workflow' : 'Create Workflow'}
|
|
</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
|
{/* Basic Information */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold text-gray-900">Basic Information</h3>
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-2">
|
|
Name <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
rows={3}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-2">Type</label>
|
|
<select
|
|
value={formData.workflow_type}
|
|
onChange={(e) => setFormData({ ...formData, workflow_type: e.target.value as 'pre_arrival' | 'room_preparation' | 'maintenance' | 'guest_communication' | 'follow_up' | 'custom' })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
disabled={!!workflow}
|
|
>
|
|
<option value="pre_arrival">Pre-Arrival</option>
|
|
<option value="room_preparation">Room Preparation</option>
|
|
<option value="maintenance">Maintenance</option>
|
|
<option value="guest_communication">Guest Communication</option>
|
|
<option value="follow_up">Follow-Up</option>
|
|
<option value="custom">Custom</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-2">Trigger</label>
|
|
<select
|
|
value={formData.trigger}
|
|
onChange={(e) => setFormData({ ...formData, trigger: e.target.value as 'booking_created' | 'booking_confirmed' | 'check_in' | 'check_out' | 'manual' | 'scheduled' })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
disabled={!!workflow}
|
|
>
|
|
<option value="booking_created">Booking Created</option>
|
|
<option value="booking_confirmed">Booking Confirmed</option>
|
|
<option value="check_in">Check In</option>
|
|
<option value="check_out">Check Out</option>
|
|
<option value="maintenance_request">Maintenance Request</option>
|
|
<option value="guest_message">Guest Message</option>
|
|
<option value="manual">Manual</option>
|
|
<option value="scheduled">Scheduled</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-2">SLA (hours)</label>
|
|
<input
|
|
type="number"
|
|
value={formData.sla_hours}
|
|
onChange={(e) => setFormData({ ...formData, sla_hours: e.target.value })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
placeholder="e.g., 24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Workflow Steps */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-gray-900">Workflow Steps</h3>
|
|
<button
|
|
type="button"
|
|
onClick={addStep}
|
|
className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Add Step
|
|
</button>
|
|
</div>
|
|
|
|
{steps.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-500">
|
|
No steps added. Click "Add Step" to create workflow steps.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{steps.map((step, index) => (
|
|
<div key={index} className="border border-gray-200 rounded-lg p-4 bg-gray-50">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<GripVertical className="w-5 h-5 text-gray-400" />
|
|
<span className="text-sm font-semibold text-gray-700">Step {index + 1}</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeStep(index)}
|
|
className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-700 mb-1">Title *</label>
|
|
<input
|
|
type="text"
|
|
value={step.title}
|
|
onChange={(e) => updateStep(index, 'title', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-700 mb-1">Task Type</label>
|
|
<select
|
|
value={step.task_type}
|
|
onChange={(e) => updateStep(index, 'task_type', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="general">General</option>
|
|
<option value="room_cleaning">Room Cleaning</option>
|
|
<option value="maintenance">Maintenance</option>
|
|
<option value="guest_communication">Guest Communication</option>
|
|
<option value="check_in">Check In</option>
|
|
<option value="check_out">Check Out</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-700 mb-1">Priority</label>
|
|
<select
|
|
value={step.priority}
|
|
onChange={(e) => updateStep(index, 'priority', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="low">Low</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-semibold text-gray-700 mb-1">Duration (minutes)</label>
|
|
<input
|
|
type="number"
|
|
value={step.estimated_duration_minutes || ''}
|
|
onChange={(e) => updateStep(index, 'estimated_duration_minutes', parseInt(e.target.value) || 0)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<label className="block text-xs font-semibold text-gray-700 mb-1">Description</label>
|
|
<textarea
|
|
value={step.description || ''}
|
|
onChange={(e) => updateStep(index, 'description', e.target.value)}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-200">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 flex items-center gap-2"
|
|
>
|
|
<Save className="w-4 h-4" />
|
|
{loading ? 'Saving...' : workflow ? 'Update Workflow' : 'Create Workflow'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WorkflowBuilder;
|
|
|