Rename plugins to automations and fix scheduler/payment bugs
Major changes: - Rename "plugins" to "automations" throughout codebase - Move automation system to dedicated app (scheduling/automations/) - Add new automation marketplace, creation, and management pages Bug fixes: - Fix payment endpoint 500 errors (use has_feature() instead of attribute) - Fix scheduler showing "0 AM" instead of "12 AM" - Fix scheduler business hours double-inversion display issue - Fix scheduler scroll-to-current-time when switching views - Fix week view centering on wrong day (use Sunday-based indexing) - Fix capacity widget overflow with many resources - Fix Recharts minWidth/minHeight console warnings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -12,7 +12,7 @@ import {
|
||||
} from '../constants/schedulePresets';
|
||||
import { ErrorMessage } from './ui';
|
||||
|
||||
interface PluginInstallation {
|
||||
interface AutomationInstallation {
|
||||
id: string;
|
||||
template: number;
|
||||
template_name: string;
|
||||
@@ -42,7 +42,7 @@ type TaskType = 'scheduled' | 'event';
|
||||
const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSuccess }) => {
|
||||
const queryClient = useQueryClient();
|
||||
const [step, setStep] = useState(1);
|
||||
const [selectedPlugin, setSelectedPlugin] = useState<PluginInstallation | null>(null);
|
||||
const [selectedAutomation, setSelectedAutomation] = useState<AutomationInstallation | null>(null);
|
||||
const [taskName, setTaskName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
|
||||
@@ -68,20 +68,20 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Fetch available plugins
|
||||
const { data: plugins = [], isLoading: pluginsLoading } = useQuery<PluginInstallation[]>({
|
||||
queryKey: ['plugin-installations'],
|
||||
// Fetch available automations
|
||||
const { data: automations = [], isLoading: automationsLoading } = useQuery<AutomationInstallation[]>({
|
||||
queryKey: ['automation-installations'],
|
||||
queryFn: async () => {
|
||||
const { data } = await axios.get('/plugin-installations/');
|
||||
// Filter out plugins that already have scheduled tasks
|
||||
return data.filter((p: PluginInstallation) => !p.scheduled_task);
|
||||
const { data } = await axios.get('/automation-installations/');
|
||||
// Filter out automations that already have scheduled tasks
|
||||
return data.filter((p: AutomationInstallation) => !p.scheduled_task);
|
||||
},
|
||||
enabled: isOpen,
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
setStep(1);
|
||||
setSelectedPlugin(null);
|
||||
setSelectedAutomation(null);
|
||||
setTaskName('');
|
||||
setDescription('');
|
||||
setError('');
|
||||
@@ -97,9 +97,9 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handlePluginSelect = (plugin: PluginInstallation) => {
|
||||
setSelectedPlugin(plugin);
|
||||
setTaskName(`${plugin.template_name} - Scheduled Task`);
|
||||
const handleAutomationSelect = (automation: AutomationInstallation) => {
|
||||
setSelectedAutomation(automation);
|
||||
setTaskName(`${automation.template_name} - Scheduled Task`);
|
||||
setStep(2);
|
||||
};
|
||||
|
||||
@@ -117,33 +117,33 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
const showOffset = !['on_complete', 'on_cancel'].includes(selectedTrigger);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!selectedPlugin) return;
|
||||
if (!selectedAutomation) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
if (taskType === 'event') {
|
||||
// Create global event plugin (applies to all events)
|
||||
// Create global event automation (applies to all events)
|
||||
const payload = {
|
||||
plugin_installation: selectedPlugin.id,
|
||||
automation_installation: selectedAutomation.id,
|
||||
trigger: selectedTrigger,
|
||||
offset_minutes: selectedOffset,
|
||||
is_active: true,
|
||||
apply_to_existing: applyToExisting,
|
||||
};
|
||||
|
||||
await axios.post('/global-event-plugins/', payload);
|
||||
queryClient.invalidateQueries({ queryKey: ['global-event-plugins'] });
|
||||
toast.success(applyToExisting ? 'Plugin attached to all events' : 'Plugin will apply to future events');
|
||||
await axios.post('/global-event-automations/', payload);
|
||||
queryClient.invalidateQueries({ queryKey: ['global-event-automations'] });
|
||||
toast.success(applyToExisting ? 'Automation attached to all events' : 'Automation will apply to future events');
|
||||
} else {
|
||||
// Create scheduled task
|
||||
let payload: any = {
|
||||
name: taskName,
|
||||
description,
|
||||
plugin_name: selectedPlugin.template_slug,
|
||||
automation_name: selectedAutomation.template_slug,
|
||||
status: 'ACTIVE',
|
||||
plugin_config: selectedPlugin.config_values || {},
|
||||
automation_config: selectedAutomation.config_values || {},
|
||||
};
|
||||
|
||||
if (scheduleMode === 'onetime') {
|
||||
@@ -202,7 +202,7 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 1 ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-500'}`}>
|
||||
1
|
||||
</div>
|
||||
<span className="font-medium">Select Plugin</span>
|
||||
<span className="font-medium">Select Automation</span>
|
||||
</div>
|
||||
<div className="w-16 h-0.5 bg-gray-200 dark:bg-gray-700" />
|
||||
<div className={`flex items-center gap-2 ${step >= 2 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'}`}>
|
||||
@@ -216,36 +216,36 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{/* Step 1: Select Plugin */}
|
||||
{/* Step 1: Select Automation */}
|
||||
{step === 1 && (
|
||||
<div>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Select a plugin to schedule for automatic execution.
|
||||
Select an automation to schedule for automatic execution.
|
||||
</p>
|
||||
|
||||
{pluginsLoading ? (
|
||||
{automationsLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
) : plugins.length === 0 ? (
|
||||
) : automations.length === 0 ? (
|
||||
<div className="text-center py-12 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
||||
<Zap className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-2">No available plugins</p>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-2">No available automations</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-500">
|
||||
Install plugins from the Marketplace first, or all your plugins are already scheduled.
|
||||
Install automations from the Marketplace first, or all your automations are already scheduled.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-3 max-h-96 overflow-y-auto">
|
||||
{plugins.map((plugin) => (
|
||||
{automations.map((automation) => (
|
||||
<button
|
||||
key={plugin.id}
|
||||
onClick={() => handlePluginSelect(plugin)}
|
||||
key={automation.id}
|
||||
onClick={() => handleAutomationSelect(automation)}
|
||||
className="text-left p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
{plugin.logo_url ? (
|
||||
<img src={plugin.logo_url} alt="" className="w-10 h-10 rounded" />
|
||||
{automation.logo_url ? (
|
||||
<img src={automation.logo_url} alt="" className="w-10 h-10 rounded" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
|
||||
<Zap className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
@@ -253,10 +253,10 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{plugin.template_name}
|
||||
{automation.template_name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
|
||||
{plugin.template_description}
|
||||
{automation.template_description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -268,18 +268,18 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
)}
|
||||
|
||||
{/* Step 2: Configure Schedule */}
|
||||
{step === 2 && selectedPlugin && (
|
||||
{step === 2 && selectedAutomation && (
|
||||
<div className="space-y-6">
|
||||
{/* Selected Plugin */}
|
||||
{/* Selected Automation */}
|
||||
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Zap className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
<div>
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200 font-medium">
|
||||
Selected Plugin
|
||||
Selected Automation
|
||||
</p>
|
||||
<p className="text-blue-900 dark:text-blue-100">
|
||||
{selectedPlugin.template_name}
|
||||
{selectedAutomation.template_name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -288,7 +288,7 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
{/* Task Type Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
How should this plugin run?
|
||||
How should this automation run?
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
@@ -519,7 +519,7 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
{/* Info about timing updates */}
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
If an event is rescheduled, the plugin timing will automatically update.
|
||||
If an event is rescheduled, the automation timing will automatically update.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -7,8 +7,8 @@ interface ScheduledTask {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
plugin_name: string;
|
||||
plugin_display_name: string;
|
||||
automation_name: string;
|
||||
automation_display_name: string;
|
||||
schedule_type: 'ONE_TIME' | 'INTERVAL' | 'CRON';
|
||||
cron_expression?: string;
|
||||
interval_minutes?: number;
|
||||
@@ -17,7 +17,7 @@ interface ScheduledTask {
|
||||
last_run_at?: string;
|
||||
status: 'ACTIVE' | 'PAUSED' | 'DISABLED';
|
||||
last_run_status?: string;
|
||||
plugin_config: Record<string, any>;
|
||||
automation_config: Record<string, any>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
@@ -198,16 +198,16 @@ const EditTaskModal: React.FC<EditTaskModalProps> = ({ task, isOpen, onClose, on
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Plugin Info (read-only) */}
|
||||
{/* Automation Info (read-only) */}
|
||||
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Zap className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
<div>
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200 font-medium">
|
||||
Plugin
|
||||
Automation
|
||||
</p>
|
||||
<p className="text-blue-900 dark:text-blue-100">
|
||||
{task.plugin_display_name}
|
||||
{task.automation_display_name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ import axios from '../api/client';
|
||||
import { Zap, Plus, Trash2, Clock, CheckCircle2, XCircle, ChevronDown, Power } from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
interface PluginInstallation {
|
||||
interface AutomationInstallation {
|
||||
id: string;
|
||||
template_name: string;
|
||||
template_description: string;
|
||||
@@ -12,14 +12,14 @@ interface PluginInstallation {
|
||||
logo_url?: string;
|
||||
}
|
||||
|
||||
interface EventPlugin {
|
||||
interface EventAutomation {
|
||||
id: string;
|
||||
event: number;
|
||||
plugin_installation: number;
|
||||
plugin_name: string;
|
||||
plugin_description: string;
|
||||
plugin_category: string;
|
||||
plugin_logo_url?: string;
|
||||
automation_installation: number;
|
||||
automation_name: string;
|
||||
automation_description: string;
|
||||
automation_category: string;
|
||||
automation_logo_url?: string;
|
||||
trigger: string;
|
||||
trigger_display: string;
|
||||
offset_minutes: number;
|
||||
@@ -64,41 +64,41 @@ const OFFSET_PRESETS: OffsetPreset[] = [
|
||||
const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact = false }) => {
|
||||
const queryClient = useQueryClient();
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [selectedPlugin, setSelectedPlugin] = useState<string>('');
|
||||
const [selectedAutomation, setSelectedAutomation] = useState<string>('');
|
||||
const [selectedTrigger, setSelectedTrigger] = useState<string>('at_start');
|
||||
const [selectedOffset, setSelectedOffset] = useState<number>(0);
|
||||
|
||||
// Fetch installed plugins
|
||||
const { data: plugins = [] } = useQuery<PluginInstallation[]>({
|
||||
queryKey: ['plugin-installations'],
|
||||
// Fetch installed automations
|
||||
const { data: automations = [] } = useQuery<AutomationInstallation[]>({
|
||||
queryKey: ['automation-installations'],
|
||||
queryFn: async () => {
|
||||
const { data } = await axios.get('/plugin-installations/');
|
||||
const { data } = await axios.get('/automation-installations/');
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch event plugins
|
||||
const { data: eventPlugins = [], isLoading } = useQuery<EventPlugin[]>({
|
||||
queryKey: ['event-plugins', eventId],
|
||||
// Fetch event automations
|
||||
const { data: eventAutomations = [], isLoading } = useQuery<EventAutomation[]>({
|
||||
queryKey: ['event-automations', eventId],
|
||||
queryFn: async () => {
|
||||
const { data } = await axios.get(`/event-plugins/?event_id=${eventId}`);
|
||||
const { data } = await axios.get(`/event-automations/?event_id=${eventId}`);
|
||||
return data;
|
||||
},
|
||||
enabled: !!eventId,
|
||||
});
|
||||
|
||||
// Add plugin mutation
|
||||
// Add automation mutation
|
||||
const addMutation = useMutation({
|
||||
mutationFn: async (data: { plugin_installation: string; trigger: string; offset_minutes: number }) => {
|
||||
return axios.post('/event-plugins/', {
|
||||
mutationFn: async (data: { automation_installation: string; trigger: string; offset_minutes: number }) => {
|
||||
return axios.post('/event-automations/', {
|
||||
event: eventId,
|
||||
...data,
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['event-plugins', eventId] });
|
||||
queryClient.invalidateQueries({ queryKey: ['event-automations', eventId] });
|
||||
setShowAddForm(false);
|
||||
setSelectedPlugin('');
|
||||
setSelectedAutomation('');
|
||||
setSelectedTrigger('at_start');
|
||||
setSelectedOffset(0);
|
||||
toast.success('Automation added');
|
||||
@@ -110,29 +110,29 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
|
||||
|
||||
// Toggle mutation
|
||||
const toggleMutation = useMutation({
|
||||
mutationFn: async (pluginId: string) => {
|
||||
return axios.post(`/event-plugins/${pluginId}/toggle/`);
|
||||
mutationFn: async (automationId: string) => {
|
||||
return axios.post(`/event-automations/${automationId}/toggle/`);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['event-plugins', eventId] });
|
||||
queryClient.invalidateQueries({ queryKey: ['event-automations', eventId] });
|
||||
},
|
||||
});
|
||||
|
||||
// Delete mutation
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async (pluginId: string) => {
|
||||
return axios.delete(`/event-plugins/${pluginId}/`);
|
||||
mutationFn: async (automationId: string) => {
|
||||
return axios.delete(`/event-automations/${automationId}/`);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['event-plugins', eventId] });
|
||||
queryClient.invalidateQueries({ queryKey: ['event-automations', eventId] });
|
||||
toast.success('Automation removed');
|
||||
},
|
||||
});
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!selectedPlugin) return;
|
||||
if (!selectedAutomation) return;
|
||||
addMutation.mutate({
|
||||
plugin_installation: selectedPlugin,
|
||||
automation_installation: selectedAutomation,
|
||||
trigger: selectedTrigger,
|
||||
offset_minutes: selectedOffset,
|
||||
});
|
||||
@@ -157,13 +157,13 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
Automations
|
||||
</span>
|
||||
{eventPlugins.length > 0 && (
|
||||
{eventAutomations.length > 0 && (
|
||||
<span className="px-1.5 py-0.5 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded">
|
||||
{eventPlugins.length}
|
||||
{eventAutomations.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{!showAddForm && plugins.length > 0 && (
|
||||
{!showAddForm && automations.length > 0 && (
|
||||
<button
|
||||
onClick={() => setShowAddForm(true)}
|
||||
className="flex items-center gap-1 px-2 py-1 text-xs text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded transition-colors"
|
||||
@@ -175,9 +175,9 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
|
||||
</div>
|
||||
|
||||
{/* Existing automations */}
|
||||
{eventPlugins.length > 0 && (
|
||||
{eventAutomations.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{eventPlugins.map((ep) => (
|
||||
{eventAutomations.map((ep) => (
|
||||
<div
|
||||
key={ep.id}
|
||||
className={`flex items-center justify-between p-2 rounded-lg border ${
|
||||
@@ -192,7 +192,7 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{ep.plugin_name}
|
||||
{ep.automation_name}
|
||||
</p>
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<Clock className="w-3 h-3" />
|
||||
@@ -229,20 +229,20 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
|
||||
{/* Add automation form */}
|
||||
{showAddForm && (
|
||||
<div className="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800 space-y-3">
|
||||
{/* Plugin selector */}
|
||||
{/* Automation selector */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Plugin
|
||||
Automation
|
||||
</label>
|
||||
<select
|
||||
value={selectedPlugin}
|
||||
onChange={(e) => setSelectedPlugin(e.target.value)}
|
||||
value={selectedAutomation}
|
||||
onChange={(e) => setSelectedAutomation(e.target.value)}
|
||||
className="w-full px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||
>
|
||||
<option value="">Select a plugin...</option>
|
||||
{plugins.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.template_name}
|
||||
<option value="">Select an automation...</option>
|
||||
{automations.map((a) => (
|
||||
<option key={a.id} value={a.id}>
|
||||
{a.template_name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
@@ -302,7 +302,7 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
|
||||
)}
|
||||
|
||||
{/* Preview */}
|
||||
{selectedPlugin && (
|
||||
{selectedAutomation && (
|
||||
<div className="text-xs text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-900/40 px-2 py-1.5 rounded">
|
||||
Will run: <strong>
|
||||
{selectedTrigger === 'on_complete' ? 'When completed' :
|
||||
@@ -328,7 +328,7 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={!selectedPlugin || addMutation.isPending}
|
||||
disabled={!selectedAutomation || addMutation.isPending}
|
||||
className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{addMutation.isPending ? 'Adding...' : 'Add Automation'}
|
||||
@@ -338,9 +338,9 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{eventPlugins.length === 0 && !showAddForm && (
|
||||
{eventAutomations.length === 0 && !showAddForm && (
|
||||
<div className="text-center py-3 text-gray-500 dark:text-gray-400">
|
||||
{plugins.length > 0 ? (
|
||||
{automations.length > 0 ? (
|
||||
<button
|
||||
onClick={() => setShowAddForm(true)}
|
||||
className="text-xs text-purple-600 dark:text-purple-400 hover:underline"
|
||||
@@ -349,7 +349,7 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
|
||||
</button>
|
||||
) : (
|
||||
<p className="text-xs">
|
||||
Install plugins from the Marketplace to use automations
|
||||
Install automations from the Marketplace to use them
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -27,10 +27,10 @@ const routeToHelpPath: Record<string, string> = {
|
||||
'/payments': '/help/payments',
|
||||
'/contracts': '/help/contracts',
|
||||
'/contracts/templates': '/help/contracts',
|
||||
'/plugins': '/help/plugins',
|
||||
'/plugins/marketplace': '/help/plugins',
|
||||
'/plugins/my-plugins': '/help/plugins',
|
||||
'/plugins/create': '/help/plugins/docs',
|
||||
'/automations': '/help/automations',
|
||||
'/automations/marketplace': '/help/automations',
|
||||
'/automations/my-automations': '/help/automations',
|
||||
'/automations/create': '/help/automations/docs',
|
||||
'/settings': '/help/settings/general',
|
||||
'/settings/general': '/help/settings/general',
|
||||
'/settings/resource-types': '/help/settings/resource-types',
|
||||
|
||||
@@ -130,7 +130,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
|
||||
icon={Clock}
|
||||
label={t('nav.tasks', 'Tasks')}
|
||||
isCollapsed={isCollapsed}
|
||||
locked={!canUse('plugins') || !canUse('tasks')}
|
||||
locked={!canUse('automations') || !canUse('tasks')}
|
||||
badgeElement={<UnfinishedBadge />}
|
||||
/>
|
||||
)}
|
||||
@@ -257,15 +257,15 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
|
||||
</SidebarSection>
|
||||
)}
|
||||
|
||||
{/* Extend Section - Plugins */}
|
||||
{/* Extend Section - Automations */}
|
||||
{canViewAdminPages && (
|
||||
<SidebarSection title={t('nav.sections.extend', 'Extend')} isCollapsed={isCollapsed}>
|
||||
<SidebarItem
|
||||
to="/dashboard/plugins/my-plugins"
|
||||
to="/dashboard/automations/my-automations"
|
||||
icon={Plug}
|
||||
label={t('nav.plugins', 'Plugins')}
|
||||
label={t('nav.automations', 'Automations')}
|
||||
isCollapsed={isCollapsed}
|
||||
locked={!canUse('plugins')}
|
||||
locked={!canUse('automations')}
|
||||
badgeElement={<UnfinishedBadge />}
|
||||
/>
|
||||
</SidebarSection>
|
||||
|
||||
@@ -108,7 +108,7 @@ const CapacityWidget: React.FC<CapacityWidgetProps> = ({
|
||||
<p className="text-sm">{t('dashboard.noResourcesConfigured')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 grid grid-cols-2 gap-2 auto-rows-min">
|
||||
<div className="flex-1 grid grid-cols-2 gap-2 auto-rows-min overflow-y-auto">
|
||||
{capacityData.resources.map((resource) => (
|
||||
<div
|
||||
key={resource.id}
|
||||
|
||||
@@ -59,7 +59,7 @@ const ChartWidget: React.FC<ChartWidgetProps> = ({
|
||||
</h3>
|
||||
|
||||
<div className="flex-1 min-h-0">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<ResponsiveContainer width="100%" height="100%" minWidth={100} minHeight={100}>
|
||||
{type === 'bar' ? (
|
||||
<BarChart data={data}>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#374151" strokeOpacity={0.2} />
|
||||
|
||||
@@ -58,7 +58,7 @@ const CustomerBreakdownWidget: React.FC<CustomerBreakdownWidgetProps> = ({
|
||||
<div className="flex-1 flex items-center gap-3 min-h-0">
|
||||
{/* Pie Chart */}
|
||||
<div className="w-20 h-20 flex-shrink-0">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<ResponsiveContainer width="100%" height="100%" minWidth={60} minHeight={60}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={breakdownData.chartData}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Mail, Calendar, Bell, ArrowRight, Zap, CheckCircle2, Code, LayoutGrid }
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import CodeBlock from './CodeBlock';
|
||||
|
||||
const PluginShowcase: React.FC = () => {
|
||||
const AutomationShowcase: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [viewMode, setViewMode] = useState<'marketplace' | 'code'>('marketplace');
|
||||
@@ -174,7 +174,7 @@ const PluginShowcase: React.FC = () => {
|
||||
// Code View
|
||||
<CodeBlock
|
||||
code={examples[activeTab].code}
|
||||
filename={`${examples[activeTab].id}_plugin.py`}
|
||||
filename={`${examples[activeTab].id}_automation.py`}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -194,4 +194,4 @@ const PluginShowcase: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default PluginShowcase;
|
||||
export default AutomationShowcase;
|
||||
Reference in New Issue
Block a user