Automation Part 1
This commit is contained in:
IGNY8 VPS (Salman)
237
frontend/src/components/Automation/ConfigModal.tsx
Normal file
237
frontend/src/components/Automation/ConfigModal.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
/**
|
||||
* Config Modal Component
|
||||
* Modal for configuring automation settings
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { AutomationConfig } from '../../services/automationService';
|
||||
|
||||
interface ConfigModalProps {
|
||||
config: AutomationConfig;
|
||||
onSave: (config: Partial<AutomationConfig>) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) => {
|
||||
const [formData, setFormData] = useState<Partial<AutomationConfig>>({
|
||||
is_enabled: config.is_enabled,
|
||||
frequency: config.frequency,
|
||||
scheduled_time: config.scheduled_time,
|
||||
stage_1_batch_size: config.stage_1_batch_size,
|
||||
stage_2_batch_size: config.stage_2_batch_size,
|
||||
stage_3_batch_size: config.stage_3_batch_size,
|
||||
stage_4_batch_size: config.stage_4_batch_size,
|
||||
stage_5_batch_size: config.stage_5_batch_size,
|
||||
stage_6_batch_size: config.stage_6_batch_size,
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSave(formData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-screen overflow-y-auto">
|
||||
<h2 className="text-2xl font-bold mb-4">Automation Configuration</h2>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
{/* Enable/Disable */}
|
||||
<div className="mb-4">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.is_enabled || false}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, is_enabled: e.target.checked })
|
||||
}
|
||||
className="mr-2"
|
||||
/>
|
||||
<span className="font-semibold">Enable Automation</span>
|
||||
</label>
|
||||
<p className="text-sm text-gray-600 ml-6">
|
||||
When enabled, automation will run on the configured schedule
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Frequency */}
|
||||
<div className="mb-4">
|
||||
<label className="block font-semibold mb-1">Frequency</label>
|
||||
<select
|
||||
value={formData.frequency || 'daily'}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
frequency: e.target.value as 'daily' | 'weekly' | 'monthly',
|
||||
})
|
||||
}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly (Mondays)</option>
|
||||
<option value="monthly">Monthly (1st of month)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Scheduled Time */}
|
||||
<div className="mb-4">
|
||||
<label className="block font-semibold mb-1">Scheduled Time</label>
|
||||
<input
|
||||
type="time"
|
||||
value={formData.scheduled_time || '02:00'}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, scheduled_time: e.target.value })
|
||||
}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Time of day to run automation (24-hour format)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Batch Sizes */}
|
||||
<div className="mb-4">
|
||||
<h3 className="font-semibold mb-2">Batch Sizes</h3>
|
||||
<p className="text-sm text-gray-600 mb-3">
|
||||
Configure how many items to process in each stage
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 1: Keywords → Clusters
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_1_batch_size || 20}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_1_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={100}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 2: Clusters → Ideas
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_2_batch_size || 1}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_2_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={10}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 3: Ideas → Tasks
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_3_batch_size || 20}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_3_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={100}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 4: Tasks → Content
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_4_batch_size || 1}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_4_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={10}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 5: Content → Image Prompts
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_5_batch_size || 1}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_5_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={10}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">
|
||||
Stage 6: Image Prompts → Images
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stage_6_batch_size || 1}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
stage_6_batch_size: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
min={1}
|
||||
max={10}
|
||||
className="border rounded px-3 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex justify-end gap-2 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
Save Configuration
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfigModal;
|
||||
Reference in New Issue
Block a user