refactor: extract helpers from ReminderDetailDrawer + OfferCreationWizard

- ReminderDetailDrawer (340→257 lines): constants + SectionTitle/DateRow/ActivityEntry → reminderDetailHelpers.tsx
- OfferCreationWizard (350→276 lines): PDF step JSX → OfferWizardPdfStep.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-24 01:10:31 +02:00
parent ee71ecc881
commit a3fc213916
4 changed files with 206 additions and 175 deletions
+2 -85
View File
@@ -18,91 +18,8 @@ import { useReminder, useCompleteReminder, useDismissReminder, useSnoozeReminder
import { ReminderPriorityBadge } from './ReminderPriorityBadge'
import { ReminderTypeBadge } from './ReminderTypeBadge'
import { ReminderDaysIndicator } from './ReminderDaysIndicator'
import { ReminderStatus, ShadowMarketRisk } from '../../domain/reminder'
import type { ReminderActivity } from '../../domain/reminder'
const SHADOW_RISK_COLOR: Record<string, string> = {
NONE: '#64748b',
LOW: '#16a34a',
MEDIUM: '#ca8a04',
HIGH: '#dc2626',
}
const SHADOW_RISK_LABEL: Record<string, string> = {
NONE: 'Kein Risiko',
LOW: 'Niedrig',
MEDIUM: 'Mittel',
HIGH: 'Hoch',
}
const STATUS_CHIP_COLOR: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
ACTIVE: 'info',
SNOOZED: 'warning',
COMPLETED: 'success',
DISMISSED: 'default',
}
const STATUS_LABEL: Record<string, string> = {
ACTIVE: 'Aktiv',
SNOOZED: 'Schlummernd',
COMPLETED: 'Erledigt',
DISMISSED: 'Verworfen',
}
const ACTION_LABEL: Record<string, string> = {
CREATED: 'Erstellt',
SNOOZED: 'Zurückgestellt',
COMPLETED: 'Erledigt',
DISMISSED: 'Verworfen',
NOTED: 'Notiz',
}
function SectionTitle({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
{icon}
<Typography variant="subtitle2" sx={{ fontWeight: 700, color: '#1e293b', fontSize: '0.8125rem' }}>
{children}
</Typography>
</Box>
)
}
function DateRow({ label, value }: { label: string; value?: string }) {
if (!value) return null
return (
<Box sx={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 1, alignItems: 'baseline' }}>
<Typography variant="caption" color="text.secondary">{label}</Typography>
<Typography variant="body2" sx={{ fontWeight: 500 }}>{new Date(value).toLocaleDateString('de-CH')}</Typography>
</Box>
)
}
function ActivityEntry({ entry }: { entry: ReminderActivity }) {
return (
<Box sx={{ display: 'flex', gap: 1.5 }}>
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
<Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: '#94a3b8', mt: '4px' }} />
<Box sx={{ width: 1, flex: 1, bgcolor: '#e2e8f0', mt: 0.5 }} />
</Box>
<Box sx={{ pb: 1.5, minWidth: 0 }}>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'baseline', flexWrap: 'wrap' }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#1e293b' }}>
{ACTION_LABEL[entry.action]}
</Typography>
<Typography variant="caption" color="text.secondary">
{entry.by} · {new Date(entry.at).toLocaleDateString('de-CH')}
</Typography>
</Box>
{entry.note && (
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25 }}>
{entry.note}
</Typography>
)}
</Box>
</Box>
)
}
import { ReminderStatus } from '../../domain/reminder'
import { SHADOW_RISK_COLOR, SHADOW_RISK_LABEL, STATUS_CHIP_COLOR, STATUS_LABEL, ACTION_LABEL, SectionTitle, DateRow, ActivityEntry } from './reminderDetailHelpers'
export function ReminderDetailDrawer() {
const { selectedId, drawerOpen, setDrawerOpen, setSelectedId } = useReminderStore()