112 lines
4.1 KiB
React
112 lines
4.1 KiB
React
// frontend/src/pages/settings/automations/AutomationsPage.jsx
|
|
//
|
|
// Automations — background task runner for scheduled CRM/system jobs.
|
|
// Each automation has: a name, description, toggle (enabled/disabled),
|
|
// configurable interval, last-run timestamp, last-run result, and a
|
|
// "Run now" manual trigger.
|
|
//
|
|
// This page is a PLACEHOLDER. The full system will be built in a later pass.
|
|
|
|
import PageHeader from '@/components/ui/PageHeader'
|
|
import Card from '@/components/ui/Card'
|
|
import Icon from '@/components/ui/Icon'
|
|
|
|
export default function AutomationsPage() {
|
|
return (
|
|
<div className="page-wrapper">
|
|
<PageHeader
|
|
title="Automations"
|
|
subtitle="Scheduled background tasks that keep your data up to date"
|
|
/>
|
|
|
|
<Card>
|
|
<div style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 'var(--space-4)',
|
|
padding: 'var(--space-12) var(--space-6)',
|
|
textAlign: 'center',
|
|
}}>
|
|
<div style={{
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 'var(--radius-xl)',
|
|
backgroundColor: 'var(--color-bg-elevated)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
}}>
|
|
<Icon name="settings" size={24} color="var(--color-text-muted)" />
|
|
</div>
|
|
|
|
<div>
|
|
<p style={{
|
|
fontSize: 'var(--font-size-md)',
|
|
fontWeight: 'var(--font-weight-semibold)',
|
|
color: 'var(--color-text-primary)',
|
|
marginBottom: 'var(--space-2)',
|
|
}}>
|
|
Automations — Coming Soon
|
|
</p>
|
|
<p style={{
|
|
fontSize: 'var(--font-size-sm)',
|
|
color: 'var(--color-text-muted)',
|
|
maxWidth: 480,
|
|
lineHeight: 1.6,
|
|
}}>
|
|
This page will let you manage all background automations in one place —
|
|
with toggles, run intervals, manual triggers, and a log of each run.
|
|
</p>
|
|
</div>
|
|
|
|
<div style={{
|
|
marginTop: 'var(--space-4)',
|
|
padding: 'var(--space-4) var(--space-6)',
|
|
borderRadius: 'var(--radius-lg)',
|
|
backgroundColor: 'var(--color-bg-elevated)',
|
|
border: '1px solid var(--color-border)',
|
|
maxWidth: 520,
|
|
width: '100%',
|
|
}}>
|
|
<p style={{
|
|
fontSize: 'var(--font-size-xs)',
|
|
fontWeight: 'var(--font-weight-semibold)',
|
|
color: 'var(--color-text-muted)',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 'var(--tracking-wide)',
|
|
marginBottom: 'var(--space-3)',
|
|
}}>
|
|
Planned automations
|
|
</p>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
|
|
{[
|
|
'Auto-set customers to Archived when all orders are complete',
|
|
'Auto-set customers to Went Cold after X months of silence',
|
|
'Auto-flip Archived customers back to Active when a new order opens',
|
|
'Periodic CRM data integrity checks',
|
|
].map((item) => (
|
|
<div key={item} style={{ display: 'flex', alignItems: 'flex-start', gap: 'var(--space-2)' }}>
|
|
<span style={{
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: '50%',
|
|
backgroundColor: 'var(--color-text-muted)',
|
|
flexShrink: 0,
|
|
marginTop: 6,
|
|
}} />
|
|
<span style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-text-secondary)', textAlign: 'left' }}>
|
|
{item}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|