johannes.gasser/property-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Reminder Manager UX — timeline-first grouped layout

Browse Source 
Replace 3-row filter panel with a grouped feed (Überfällig / Diese Woche /
Dieser Monat / Später). KPI cards are now clickable shortcuts that filter to
their time horizon or type (Pre-Market). Filter bar condenses to one row:
search + type dropdown + archive toggle. Rows get a left priority-color
border (red/orange/yellow). Default status filter is ACTIVE+SNOOZED.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-24 22:42:37 +02:00
parent a9e038a64f
commit d804d1c923
6 changed files with 263 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/supply/ReminderFeed.tsx
+109 -28
View File
@@ -1,5 +1,5 @@
import { useMemo, useCallback } from 'react'
import { Box, Typography } from '@mui/material'
import { Box, Chip, Typography } from '@mui/material'
import { useReminders } from '../../hooks/useReminders'
import { useShallow } from 'zustand/react/shallow'
import { useReminderStore } from '../../stores/reminderStore'
@@ -8,24 +8,47 @@ import { ReminderCard } from './ReminderCard'
import { ReminderSkeleton } from './ReminderSkeleton'
import { ReminderEmptyState } from './ReminderEmptyState'
import type { Reminder } from '../../domain/reminder'
import { ReminderStatus } from '../../domain/reminder'
import type { FilterHorizon } from '../../stores/reminderStore'
const LIST_HEADER_COLS = '100px 130px 1fr 140px 90px 100px 90px'
const MOCK_TODAY = new Date('2026-05-20')
function getHorizon(dueDate: string): FilterHorizon {
const days = Math.ceil((new Date(dueDate).getTime() - MOCK_TODAY.getTime()) / (1000 * 60 * 60 * 24))
if (days <= 0) return 'OVERDUE'
if (days <= 7) return 'THIS_WEEK'
if (days <= 30) return 'THIS_MONTH'
return 'LATER'
}
const HORIZON_CONFIG: { key: FilterHorizon; label: string; color: string; bg: string; border: string }[] = [
{ key: 'OVERDUE', label: 'Überfällig', color: '#dc2626', bg: '#fef2f2', border: '#fecaca' },
{ key: 'THIS_WEEK', label: 'Diese Woche', color: '#ea580c', bg: '#fff7ed', border: '#fed7aa' },
{ key: 'THIS_MONTH', label: 'Dieser Monat', color: '#0369a1', bg: '#f0f9ff', border: '#bae6fd' },
{ key: 'LATER', label: 'Später', color: '#64748b', bg: '#f8fafc', border: '#e2e8f0' },
]
const LIST_COLS = '100px 130px 1fr 140px 90px 100px 90px'
function applyFilters(
reminders: Reminder[],
filterType: string,
filterStatus: string,
filterPriority: string,
filterHorizon: string,
searchQuery: string,
): Reminder[] {
return reminders.filter(r => {
if (filterStatus === 'ACTIVE') {
if (r.status !== ReminderStatus.ACTIVE && r.status !== ReminderStatus.SNOOZED) return false
} else if (filterStatus !== 'ALL') {
if (r.status !== filterStatus) return false
}
if (filterType !== 'ALL' && r.type !== filterType) return false
if (filterStatus !== 'ALL' && r.status !== filterStatus) return false
if (filterPriority !== 'ALL' && r.priority !== filterPriority) return false
if (filterHorizon !== 'ALL' && getHorizon(r.dueDate) !== filterHorizon) return false
if (searchQuery) {
const q = searchQuery.toLowerCase()
const haystack = `${r.propertyTitle} ${r.propertyCity} ${r.tenantName}`.toLowerCase()
if (!haystack.includes(q)) return false
const hay = `${r.propertyTitle} ${r.propertyCity} ${r.tenantName}`.toLowerCase()
if (!hay.includes(q)) return false
}
return true
})
@@ -34,38 +57,60 @@ function applyFilters(
export function ReminderFeed() {
const { data, isLoading } = useReminders()
const {
filterType, filterStatus, filterPriority, searchQuery, viewMode,
setFilterType, setFilterStatus, setFilterPriority, setSearchQuery,
filterType, filterStatus, filterHorizon, searchQuery, viewMode,
setFilterType, setFilterStatus, setFilterHorizon, setSearchQuery,
} = useReminderStore(useShallow(s => ({
filterType: s.filterType, filterStatus: s.filterStatus,
filterPriority: s.filterPriority, searchQuery: s.searchQuery,
filterHorizon: s.filterHorizon, searchQuery: s.searchQuery,
viewMode: s.viewMode, setFilterType: s.setFilterType,
setFilterStatus: s.setFilterStatus, setFilterPriority: s.setFilterPriority,
setFilterStatus: s.setFilterStatus, setFilterHorizon: s.setFilterHorizon,
setSearchQuery: s.setSearchQuery,
})))
const reminders = data ?? []
const filtered = useMemo(
() => applyFilters(reminders, filterType, filterStatus, filterPriority, searchQuery),
[reminders, filterType, filterStatus, filterPriority, searchQuery],
() => applyFilters(reminders, filterType, filterStatus, filterHorizon, searchQuery),
[reminders, filterType, filterStatus, filterHorizon, searchQuery],
)
const grouped = useMemo(() => {
const map: Record<string, Reminder[]> = {
OVERDUE: [], THIS_WEEK: [], THIS_MONTH: [], LATER: [],
}
filtered.forEach(r => map[getHorizon(r.dueDate)].push(r))
return map
}, [filtered])
const resetFilters = useCallback(() => {
setFilterType('ALL')
setFilterStatus('ALL')
setFilterPriority('ALL')
setFilterStatus('ACTIVE')
setFilterHorizon('ALL')
setSearchQuery('')
}, [setFilterType, setFilterStatus, setFilterPriority, setSearchQuery])
}, [setFilterType, setFilterStatus, setFilterHorizon, setSearchQuery])
if (isLoading) return <ReminderSkeleton />
if (filtered.length === 0) {
return <ReminderEmptyState onReset={resetFilters} />
}
if (filtered.length === 0) return <ReminderEmptyState onReset={resetFilters} />
if (viewMode === 'card') {
return (
<Box className="flex flex-col gap-4">
{HORIZON_CONFIG.map(({ key, label, color, bg, border }) => {
const group = grouped[key]
if (!group || group.length === 0) return null
return (
<Box key={key}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5, px: 0.5 }}>
<Box sx={{ width: 3, height: 16, borderRadius: 1, bgcolor: color, flexShrink: 0 }} />
<Typography variant="body2" sx={{ fontWeight: 700, color, fontSize: '0.8125rem' }}>
{label}
</Typography>
<Chip
label={group.length}
size="small"
sx={{ height: 18, fontSize: '0.65rem', bgcolor: color, color: 'white', ml: 0.25 }}
/>
</Box>
<Box
sx={{
display: 'grid',
@@ -73,20 +118,22 @@ export function ReminderFeed() {
gap: 2,
}}
>
{filtered.map(r => (
<ReminderCard key={r.id} reminder={r} />
))}
{group.map(r => <ReminderCard key={r.id} reminder={r} />)}
</Box>
</Box>
)
})}
</Box>
)
}
return (
<Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1, overflow: 'hidden' }}>
<Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1.5, overflow: 'hidden' }}>
{/* Table header */}
<Box
sx={{
display: 'grid',
gridTemplateColumns: LIST_HEADER_COLS,
gridTemplateColumns: LIST_COLS,
gap: 1,
px: 2,
py: 1,
@@ -101,9 +148,43 @@ export function ReminderFeed() {
))}
</Box>
{filtered.map(r => (
<ReminderListRow key={r.id} reminder={r} />
))}
{/* Grouped rows */}
{HORIZON_CONFIG.map(({ key, label, color, bg, border }) => {
const group = grouped[key]
if (!group || group.length === 0) return null
return (
<Box key={key}>
{/* Section divider */}
<Box
sx={{
px: 2,
py: 0.625,
bgcolor: bg,
borderTop: `1px solid ${border}`,
borderBottom: `1px solid ${border}`,
display: 'flex',
alignItems: 'center',
gap: 1,
}}
>
<Typography
variant="caption"
sx={{ fontWeight: 700, color, textTransform: 'uppercase', letterSpacing: 0.6, fontSize: '0.65rem' }}
>
{label}
</Typography>
<Chip
label={group.length}
size="small"
sx={{ height: 16, fontSize: '0.6rem', bgcolor: color, color: 'white', px: 0 }}
/>
</Box>
{/* Rows */}
{group.map(r => <ReminderListRow key={r.id} reminder={r} />)}
</Box>
)
})}
</Box>
)
}
src/components/supply/ReminderFilterBar.tsx
+43 -81
View File
@@ -1,9 +1,9 @@
import { Box, ToggleButtonGroup, ToggleButton, TextField, InputAdornment, Typography } from '@mui/material'
import { Box, ToggleButtonGroup, ToggleButton, TextField, InputAdornment, Typography, Select, MenuItem, FormControl, FormControlLabel, Switch } from '@mui/material'
import { Search } from 'lucide-react'
import { useShallow } from 'zustand/react/shallow'
import { useReminderStore } from '../../stores/reminderStore'
import { ReminderType, ReminderStatus, ReminderPriority } from '../../domain/reminder'
import type { ReminderType as ReminderTypeType, ReminderStatus as ReminderStatusType, ReminderPriority as ReminderPriorityType } from '../../domain/reminder'
import { ReminderType } from '../../domain/reminder'
import type { ReminderType as ReminderTypeType } from '../../domain/reminder'
const TYPE_LABELS: Record<ReminderTypeType, string> = {
LEASE_EXPIRY: 'Mietablauf',
@@ -16,38 +16,23 @@ const TYPE_LABELS: Record<ReminderTypeType, string> = {
CUSTOM: 'Individuell',
}
const STATUS_LABELS: Record<ReminderStatusType, string> = {
ACTIVE: 'Aktiv',
SNOOZED: 'Schlummern',
COMPLETED: 'Erledigt',
DISMISSED: 'Verworfen',
}
const PRIORITY_LABELS: Record<ReminderPriorityType, string> = {
URGENT: 'Dringend',
HIGH: 'Hoch',
MEDIUM: 'Mittel',
LOW: 'Niedrig',
}
export function ReminderFilterBar() {
const {
filterType, setFilterType,
filterStatus, setFilterStatus,
filterPriority, setFilterPriority,
searchQuery, setSearchQuery,
viewMode, setViewMode,
} = useReminderStore(useShallow(s => ({
filterType: s.filterType, setFilterType: s.setFilterType,
filterStatus: s.filterStatus, setFilterStatus: s.setFilterStatus,
filterPriority: s.filterPriority, setFilterPriority: s.setFilterPriority,
searchQuery: s.searchQuery, setSearchQuery: s.setSearchQuery,
viewMode: s.viewMode, setViewMode: s.setViewMode,
})))
const showArchive = filterStatus === 'ALL'
return (
<Box className="flex flex-col gap-3">
<Box className="flex items-center gap-3 flex-wrap">
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
{/* Search */}
<TextField
size="small"
@@ -63,7 +48,43 @@ export function ReminderFilterBar() {
),
},
}}
sx={{ width: 220, '& .MuiInputBase-root': { fontSize: '0.8125rem' } }}
sx={{ width: 200, '& .MuiInputBase-root': { fontSize: '0.8125rem' } }}
/>
{/* Type selector */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap' }}>Typ:</Typography>
<FormControl size="small">
<Select
value={filterType}
onChange={e => setFilterType(e.target.value as ReminderTypeType | 'ALL')}
sx={{ fontSize: '0.8125rem', minWidth: 150 }}
>
<MenuItem value="ALL" sx={{ fontSize: '0.8125rem' }}>Alle Typen</MenuItem>
{Object.values(ReminderType).map(t => (
<MenuItem key={t} value={t} sx={{ fontSize: '0.8125rem' }}>
{TYPE_LABELS[t]}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
{/* Archive toggle */}
<FormControlLabel
control={
<Switch
size="small"
checked={showArchive}
onChange={e => setFilterStatus(e.target.checked ? 'ALL' : 'ACTIVE')}
/>
}
label={
<Typography variant="caption" color="text.secondary">
Abgeschlossene anzeigen
</Typography>
}
sx={{ m: 0 }}
/>
{/* View mode */}
@@ -80,64 +101,5 @@ export function ReminderFilterBar() {
</ToggleButtonGroup>
</Box>
</Box>
<Box className="flex flex-wrap gap-3">
{/* Type filter */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
<Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>Typ:</Typography>
<ToggleButtonGroup
value={filterType}
exclusive
onChange={(_, v) => v && setFilterType(v)}
size="small"
>
<ToggleButton value="ALL" sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>Alle</ToggleButton>
{Object.values(ReminderType).map(t => (
<ToggleButton key={t} value={t} sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>
{TYPE_LABELS[t]}
</ToggleButton>
))}
</ToggleButtonGroup>
</Box>
</Box>
<Box className="flex flex-wrap gap-3">
{/* Status filter */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>Status:</Typography>
<ToggleButtonGroup
value={filterStatus}
exclusive
onChange={(_, v) => v && setFilterStatus(v)}
size="small"
>
<ToggleButton value="ALL" sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>Alle</ToggleButton>
{Object.values(ReminderStatus).map(s => (
<ToggleButton key={s} value={s} sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>
{STATUS_LABELS[s]}
</ToggleButton>
))}
</ToggleButtonGroup>
</Box>
{/* Priority filter */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>Priorität:</Typography>
<ToggleButtonGroup
value={filterPriority}
exclusive
onChange={(_, v) => v && setFilterPriority(v)}
size="small"
>
<ToggleButton value="ALL" sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>Alle</ToggleButton>
{Object.values(ReminderPriority).map(p => (
<ToggleButton key={p} value={p} sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>
{PRIORITY_LABELS[p]}
</ToggleButton>
))}
</ToggleButtonGroup>
</Box>
</Box>
</Box>
)
}
src/components/supply/ReminderKpiBar.tsx
+60 -22
View File
@@ -1,32 +1,46 @@
import { Box, Paper, Typography, Skeleton } from '@mui/material'
import { AlertTriangle, Calendar, CalendarDays, Eye } from 'lucide-react'
import { Box, Typography, Skeleton } from '@mui/material'
import { AlertOctagon, Calendar, CalendarDays, Eye } from 'lucide-react'
import { useShallow } from 'zustand/react/shallow'
import { useReminderInsights } from '../../hooks/useReminders'
import { useReminderStore } from '../../stores/reminderStore'
import type { FilterHorizon } from '../../stores/reminderStore'
import { ReminderType } from '../../domain/reminder'
interface KpiItemProps {
interface KpiCardProps {
icon: React.ReactNode
label: string
value: number | string
color: string
active: boolean
onClick: () => void
}
function KpiItem({ icon, label, value, color }: KpiItemProps) {
function KpiCard({ icon, label, value, color, active, onClick }: KpiCardProps) {
return (
<Paper
variant="outlined"
<Box
onClick={onClick}
sx={{
flex: 1,
p: 1.5,
display: 'flex',
alignItems: 'center',
gap: 1.5,
borderColor: '#e2e8f0',
border: active ? `2px solid ${color}` : '1px solid #e2e8f0',
borderRadius: 1.5,
bgcolor: active ? `${color}10` : 'white',
cursor: 'pointer',
transition: 'all 0.15s',
minWidth: 0,
'&:hover': {
bgcolor: `${color}0d`,
borderColor: color,
},
}}
>
<Box
sx={{
width: 36,
height: 36,
width: 34,
height: 34,
borderRadius: 1,
bgcolor: `${color}18`,
display: 'flex',
@@ -41,16 +55,32 @@ function KpiItem({ icon, label, value, color }: KpiItemProps) {
<Typography variant="h6" sx={{ fontWeight: 700, color, lineHeight: 1.2, fontSize: '1.25rem' }}>
{value}
</Typography>
<Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap' }}>
<Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap', fontSize: '0.7rem' }}>
{label}
</Typography>
</Box>
</Paper>
</Box>
)
}
export function ReminderKpiBar() {
const { data, isLoading } = useReminderInsights()
const { filterHorizon, setFilterHorizon, filterType, setFilterType } = useReminderStore(
useShallow(s => ({
filterHorizon: s.filterHorizon,
setFilterHorizon: s.setFilterHorizon,
filterType: s.filterType,
setFilterType: s.setFilterType,
}))
)
function toggleHorizon(h: FilterHorizon) {
setFilterHorizon(filterHorizon === h ? 'ALL' : h)
}
function togglePreMarket() {
setFilterType(filterType === ReminderType.SCHATTENMARKT_RELEASE ? 'ALL' : ReminderType.SCHATTENMARKT_RELEASE)
}
if (isLoading) {
return (
@@ -62,33 +92,41 @@ export function ReminderKpiBar() {
)
}
const insights = data ?? { urgentCount: 0, dueThisWeek: 0, dueThisMonth: 0, schattenmarktReadyCount: 0 }
const ins = data ?? { overdueCount: 0, dueThisWeek: 0, dueThisMonth: 0, schattenmarktReadyCount: 0 }
return (
<Box className="flex gap-3">
<KpiItem
icon={<AlertTriangle size={18} color="#dc2626" />}
label="Dringend"
value={insights.urgentCount}
<KpiCard
icon={<AlertOctagon size={18} color="#dc2626" />}
label="Überfällig"
value={ins.overdueCount}
color="#dc2626"
active={filterHorizon === 'OVERDUE'}
onClick={() => toggleHorizon('OVERDUE')}
/>
<KpiItem
<KpiCard
icon={<Calendar size={18} color="#ea580c" />}
label="Diese Woche"
value={insights.dueThisWeek}
value={ins.dueThisWeek}
color="#ea580c"
active={filterHorizon === 'THIS_WEEK'}
onClick={() => toggleHorizon('THIS_WEEK')}
/>
<KpiItem
<KpiCard
icon={<CalendarDays size={18} color="#0369a1" />}
label="Dieser Monat"
value={insights.dueThisMonth}
value={ins.dueThisMonth}
color="#0369a1"
active={filterHorizon === 'THIS_MONTH'}
onClick={() => toggleHorizon('THIS_MONTH')}
/>
<KpiItem
<KpiCard
icon={<Eye size={18} color="#be185d" />}
label="Pre-Market Risiko"
value={insights.schattenmarktReadyCount}
value={ins.schattenmarktReadyCount}
color="#be185d"
active={filterType === ReminderType.SCHATTENMARKT_RELEASE}
onClick={togglePreMarket}
/>
</Box>
)
src/components/supply/ReminderListRow.tsx
+13 -2
View File
@@ -7,7 +7,14 @@ import { ReminderTypeBadge } from './ReminderTypeBadge'
import { ReminderDaysIndicator } from './ReminderDaysIndicator'
import { useCompleteReminder, useDismissReminder, useSnoozeReminder } from '../../hooks/useReminders'
import { useReminderStore } from '../../stores/reminderStore'
import { ReminderStatus } from '../../domain/reminder'
import { ReminderStatus, ReminderPriority } from '../../domain/reminder'
const PRIORITY_BORDER: Record<string, string> = {
[ReminderPriority.URGENT]: '#dc2626',
[ReminderPriority.HIGH]: '#ea580c',
[ReminderPriority.MEDIUM]: '#ca8a04',
[ReminderPriority.LOW]: 'transparent',
}
const STATUS_CHIP_COLOR: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
ACTIVE: 'info',
@@ -56,6 +63,8 @@ export const ReminderListRow = memo(function ReminderListRow({ reminder }: Props
snooze.mutate({ id: reminder.id, until: '2026-05-27' })
}
const borderColor = PRIORITY_BORDER[reminder.priority] ?? 'transparent'
return (
<Box
onClick={handleRowClick}
@@ -64,9 +73,11 @@ export const ReminderListRow = memo(function ReminderListRow({ reminder }: Props
gridTemplateColumns: '100px 130px 1fr 140px 90px 100px 90px',
alignItems: 'center',
gap: 1,
px: 2,
pl: 1.5,
pr: 2,
py: 1.25,
borderBottom: '1px solid #f1f5f9',
borderLeft: `3px solid ${borderColor}`,
bgcolor: 'white',
cursor: 'pointer',
'&:hover': { bgcolor: '#f8fafc' },
src/services/reminderService.ts
+3
View File
@@ -48,6 +48,8 @@ export const reminderService = {
(r.shadowMarketRisk === ShadowMarketRisk.HIGH),
).length
const overdueCount = active.filter(r => daysDiff(r.dueDate) <= 0).length
const activeDays = active
.filter(r => daysDiff(r.dueDate) > 0)
.map(r => daysDiff(r.dueDate))
@@ -60,6 +62,7 @@ export const reminderService = {
dueThisWeek,
dueThisMonth,
schattenmarktReadyCount,
overdueCount,
avgDaysToAction,
}
},
src/stores/reminderStore.ts
+9 -3
View File
@@ -1,6 +1,8 @@
import { create } from 'zustand'
import type { ReminderType, ReminderStatus, ReminderPriority } from '../domain/reminder'
export type FilterHorizon = 'ALL' | 'OVERDUE' | 'THIS_WEEK' | 'THIS_MONTH' | 'LATER'
interface ReminderStore {
selectedId: string | null
setSelectedId: (id: string | null) => void
@@ -8,10 +10,12 @@ interface ReminderStore {
setDrawerOpen: (open: boolean) => void
filterType: ReminderType | 'ALL'
setFilterType: (t: ReminderType | 'ALL') => void
filterStatus: ReminderStatus | 'ALL'
setFilterStatus: (s: ReminderStatus | 'ALL') => void
filterStatus: ReminderStatus | 'ALL' | 'ACTIVE'
setFilterStatus: (s: ReminderStatus | 'ALL' | 'ACTIVE') => void
filterPriority: ReminderPriority | 'ALL'
setFilterPriority: (p: ReminderPriority | 'ALL') => void
filterHorizon: FilterHorizon
setFilterHorizon: (h: FilterHorizon) => void
searchQuery: string
setSearchQuery: (q: string) => void
viewMode: 'list' | 'card'
@@ -25,10 +29,12 @@ export const useReminderStore = create<ReminderStore>((set) => ({
setDrawerOpen: (open) => set({ drawerOpen: open }),
filterType: 'ALL',
setFilterType: (t) => set({ filterType: t }),
filterStatus: 'ALL',
filterStatus: 'ACTIVE',
setFilterStatus: (s) => set({ filterStatus: s }),
filterPriority: 'ALL',
setFilterPriority: (p) => set({ filterPriority: p }),
filterHorizon: 'ALL',
setFilterHorizon: (h) => set({ filterHorizon: h }),
searchQuery: '',
setSearchQuery: (q) => set({ searchQuery: q }),
viewMode: 'list',