New classification logic etc
This commit is contained in:
Jakob Wennberg
@@ -0,0 +1,175 @@
|
||||
'use client'
|
||||
|
||||
import { Deadline } from '@/types'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { cn } from '@/lib/utils'
|
||||
import {
|
||||
isDeadlineOverdue,
|
||||
DEADLINE_TYPE_LABELS,
|
||||
PRIORITY_LABELS,
|
||||
PRIORITY_COLORS,
|
||||
} from '@/lib/calendar/utils'
|
||||
import { CheckCircle, Circle, Clock, AlertTriangle, Trash2, Edit2 } from 'lucide-react'
|
||||
|
||||
interface DeadlineCardProps {
|
||||
deadline: Deadline
|
||||
onToggle: (deadline: Deadline) => void
|
||||
onEdit?: (deadline: Deadline) => void
|
||||
onDelete?: (deadline: Deadline) => void
|
||||
compact?: boolean
|
||||
}
|
||||
|
||||
export function DeadlineCard({
|
||||
deadline,
|
||||
onToggle,
|
||||
onEdit,
|
||||
onDelete,
|
||||
compact = false,
|
||||
}: DeadlineCardProps) {
|
||||
const overdue = isDeadlineOverdue(deadline)
|
||||
const completed = deadline.is_completed
|
||||
const priorityStyle = PRIORITY_COLORS[deadline.priority]
|
||||
|
||||
const formatDueDate = () => {
|
||||
const date = new Date(deadline.due_date)
|
||||
const formatted = date.toLocaleDateString('sv-SE', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
})
|
||||
if (deadline.due_time) {
|
||||
return `${formatted} kl. ${deadline.due_time.slice(0, 5)}`
|
||||
}
|
||||
return formatted
|
||||
}
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-2 p-2 rounded-lg border transition-colors',
|
||||
overdue && !completed
|
||||
? 'border-destructive/50 bg-destructive/5'
|
||||
: completed
|
||||
? 'border-success/50 bg-success/5'
|
||||
: `${priorityStyle.border} ${priorityStyle.bg}`
|
||||
)}
|
||||
>
|
||||
<button onClick={() => onToggle(deadline)} className="flex-shrink-0">
|
||||
{completed ? (
|
||||
<CheckCircle className="h-4 w-4 text-success" />
|
||||
) : (
|
||||
<Circle className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p
|
||||
className={cn(
|
||||
'text-sm font-medium truncate',
|
||||
completed && 'line-through text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{deadline.title}
|
||||
</p>
|
||||
</div>
|
||||
{deadline.priority !== 'normal' && !completed && (
|
||||
<div
|
||||
className={cn(
|
||||
'w-2 h-2 rounded-full flex-shrink-0',
|
||||
deadline.priority === 'critical' ? 'bg-destructive' : 'bg-warning'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'p-4 rounded-lg border transition-colors',
|
||||
overdue && !completed
|
||||
? 'border-destructive/50 bg-destructive/5'
|
||||
: completed
|
||||
? 'border-success/50 bg-success/5'
|
||||
: `${priorityStyle.border} ${priorityStyle.bg}`
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<button onClick={() => onToggle(deadline)} className="mt-0.5 flex-shrink-0">
|
||||
{completed ? (
|
||||
<CheckCircle className="h-5 w-5 text-success" />
|
||||
) : overdue ? (
|
||||
<AlertTriangle className="h-5 w-5 text-destructive" />
|
||||
) : (
|
||||
<Clock className="h-5 w-5 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<p
|
||||
className={cn(
|
||||
'font-medium',
|
||||
completed && 'line-through text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{deadline.title}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{formatDueDate()}</p>
|
||||
{deadline.customer && (
|
||||
<p className="text-sm text-muted-foreground">{deadline.customer.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{DEADLINE_TYPE_LABELS[deadline.deadline_type]}
|
||||
</Badge>
|
||||
{!completed && deadline.priority !== 'normal' && (
|
||||
<Badge
|
||||
variant={deadline.priority === 'critical' ? 'destructive' : 'warning'}
|
||||
className="text-xs"
|
||||
>
|
||||
{PRIORITY_LABELS[deadline.priority]}
|
||||
</Badge>
|
||||
)}
|
||||
{overdue && !completed && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
Förfallen
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{deadline.notes && (
|
||||
<p className="text-sm text-muted-foreground mt-2 line-clamp-2">
|
||||
{deadline.notes}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(onEdit || onDelete) && (
|
||||
<div className="flex justify-end gap-1 mt-2 pt-2 border-t">
|
||||
{onEdit && (
|
||||
<Button variant="ghost" size="sm" onClick={() => onEdit(deadline)}>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onDelete(deadline)}
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
'use client'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { DeadlineType } from '@/types'
|
||||
import { DEADLINE_TYPE_LABELS } from '@/lib/calendar/utils'
|
||||
import { X } from 'lucide-react'
|
||||
|
||||
interface DeadlineFiltersProps {
|
||||
status: 'all' | 'pending' | 'completed'
|
||||
type: DeadlineType | 'all'
|
||||
onStatusChange: (status: 'all' | 'pending' | 'completed') => void
|
||||
onTypeChange: (type: DeadlineType | 'all') => void
|
||||
onReset: () => void
|
||||
}
|
||||
|
||||
export function DeadlineFilters({
|
||||
status,
|
||||
type,
|
||||
onStatusChange,
|
||||
onTypeChange,
|
||||
onReset,
|
||||
}: DeadlineFiltersProps) {
|
||||
const hasFilters = status !== 'all' || type !== 'all'
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Select value={status} onValueChange={(v) => onStatusChange(v as typeof status)}>
|
||||
<SelectTrigger className="w-[140px]">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Alla</SelectItem>
|
||||
<SelectItem value="pending">Ej klara</SelectItem>
|
||||
<SelectItem value="completed">Klara</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={type} onValueChange={(v) => onTypeChange(v as typeof type)}>
|
||||
<SelectTrigger className="w-[140px]">
|
||||
<SelectValue placeholder="Typ" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Alla typer</SelectItem>
|
||||
{Object.entries(DEADLINE_TYPE_LABELS).map(([value, label]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{hasFilters && (
|
||||
<Button variant="ghost" size="sm" onClick={onReset}>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Rensa
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Deadline, DeadlineType, DeadlinePriority } from '@/types'
|
||||
import { formatDateISO, DEADLINE_TYPE_LABELS, PRIORITY_LABELS } from '@/lib/calendar/utils'
|
||||
|
||||
interface DeadlineFormProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSubmit: (data: Omit<Deadline, 'id' | 'user_id' | 'created_at' | 'updated_at'>) => Promise<void>
|
||||
initialData?: Partial<Deadline>
|
||||
initialDate?: Date | null
|
||||
customers: { id: string; name: string }[]
|
||||
}
|
||||
|
||||
export function DeadlineForm({
|
||||
open,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
initialData,
|
||||
initialDate,
|
||||
customers,
|
||||
}: DeadlineFormProps) {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
title: '',
|
||||
due_date: '',
|
||||
due_time: '',
|
||||
deadline_type: 'other' as DeadlineType,
|
||||
priority: 'normal' as DeadlinePriority,
|
||||
customer_id: '',
|
||||
notes: '',
|
||||
})
|
||||
|
||||
// Reset form when dialog opens with new data
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
if (initialData) {
|
||||
setFormData({
|
||||
title: initialData.title || '',
|
||||
due_date: initialData.due_date || formatDateISO(new Date()),
|
||||
due_time: initialData.due_time || '',
|
||||
deadline_type: initialData.deadline_type || 'other',
|
||||
priority: initialData.priority || 'normal',
|
||||
customer_id: initialData.customer_id || '',
|
||||
notes: initialData.notes || '',
|
||||
})
|
||||
} else if (initialDate) {
|
||||
setFormData({
|
||||
title: '',
|
||||
due_date: formatDateISO(initialDate),
|
||||
due_time: '',
|
||||
deadline_type: 'other',
|
||||
priority: 'normal',
|
||||
customer_id: '',
|
||||
notes: '',
|
||||
})
|
||||
} else {
|
||||
setFormData({
|
||||
title: '',
|
||||
due_date: formatDateISO(new Date()),
|
||||
due_time: '',
|
||||
deadline_type: 'other',
|
||||
priority: 'normal',
|
||||
customer_id: '',
|
||||
notes: '',
|
||||
})
|
||||
}
|
||||
}
|
||||
}, [open, initialData, initialDate])
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
await onSubmit({
|
||||
title: formData.title,
|
||||
due_date: formData.due_date,
|
||||
due_time: formData.due_time || null,
|
||||
deadline_type: formData.deadline_type,
|
||||
priority: formData.priority,
|
||||
customer_id: formData.customer_id || null,
|
||||
notes: formData.notes || null,
|
||||
is_completed: initialData?.is_completed || false,
|
||||
completed_at: initialData?.completed_at || null,
|
||||
is_auto_generated: false,
|
||||
// New tax deadline fields with defaults for user-created deadlines
|
||||
tax_deadline_type: null,
|
||||
tax_period: null,
|
||||
source: 'user',
|
||||
reminder_offsets: [14, 7, 1, 0],
|
||||
status: 'upcoming',
|
||||
status_changed_at: new Date().toISOString(),
|
||||
linked_report_type: null,
|
||||
linked_report_period: null,
|
||||
})
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const updateField = <K extends keyof typeof formData>(
|
||||
field: K,
|
||||
value: (typeof formData)[K]
|
||||
) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{initialData?.id ? 'Redigera deadline' : 'Ny deadline'}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Title */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Titel *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
placeholder="t.ex. Leverera video till Företag AB"
|
||||
value={formData.title}
|
||||
onChange={(e) => updateField('title', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Date and Time */}
|
||||
<div className="grid gap-4 grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="due_date">Datum *</Label>
|
||||
<Input
|
||||
id="due_date"
|
||||
type="date"
|
||||
value={formData.due_date}
|
||||
onChange={(e) => updateField('due_date', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="due_time">Tid (valfritt)</Label>
|
||||
<Input
|
||||
id="due_time"
|
||||
type="time"
|
||||
value={formData.due_time}
|
||||
onChange={(e) => updateField('due_time', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Type and Priority */}
|
||||
<div className="grid gap-4 grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>Typ *</Label>
|
||||
<Select
|
||||
value={formData.deadline_type}
|
||||
onValueChange={(v) => updateField('deadline_type', v as DeadlineType)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(DEADLINE_TYPE_LABELS).map(([value, label]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Prioritet</Label>
|
||||
<Select
|
||||
value={formData.priority}
|
||||
onValueChange={(v) => updateField('priority', v as DeadlinePriority)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(PRIORITY_LABELS).map(([value, label]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Customer */}
|
||||
{customers.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>Kund (valfritt)</Label>
|
||||
<Select
|
||||
value={formData.customer_id}
|
||||
onValueChange={(v) => updateField('customer_id', v)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Välj kund..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">Ingen kund</SelectItem>
|
||||
{customers.map((customer) => (
|
||||
<SelectItem key={customer.id} value={customer.id}>
|
||||
{customer.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notes */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="notes">Anteckningar (valfritt)</Label>
|
||||
<Textarea
|
||||
id="notes"
|
||||
placeholder="Lägg till anteckningar..."
|
||||
value={formData.notes}
|
||||
onChange={(e) => updateField('notes', e.target.value)}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
Avbryt
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading || !formData.title}>
|
||||
{isLoading ? 'Sparar...' : initialData?.id ? 'Spara' : 'Skapa'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import { Deadline, DeadlineType } from '@/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { DeadlineCard } from './DeadlineCard'
|
||||
import { DeadlineFilters } from './DeadlineFilters'
|
||||
import { DeadlineForm } from './DeadlineForm'
|
||||
import { isDeadlineOverdue } from '@/lib/calendar/utils'
|
||||
import { Plus, Calendar } from 'lucide-react'
|
||||
|
||||
interface DeadlineListProps {
|
||||
deadlines: Deadline[]
|
||||
customers: { id: string; name: string }[]
|
||||
onDeadlineCreate: (data: Omit<Deadline, 'id' | 'user_id' | 'created_at' | 'updated_at'>) => Promise<void>
|
||||
onDeadlineToggle: (deadline: Deadline) => Promise<void>
|
||||
onDeadlineEdit: (deadline: Deadline) => Promise<void>
|
||||
onDeadlineDelete: (deadline: Deadline) => Promise<void>
|
||||
}
|
||||
|
||||
export function DeadlineList({
|
||||
deadlines,
|
||||
customers,
|
||||
onDeadlineCreate,
|
||||
onDeadlineToggle,
|
||||
onDeadlineEdit,
|
||||
onDeadlineDelete,
|
||||
}: DeadlineListProps) {
|
||||
const [statusFilter, setStatusFilter] = useState<'all' | 'pending' | 'completed'>('pending')
|
||||
const [typeFilter, setTypeFilter] = useState<DeadlineType | 'all'>('all')
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [editingDeadline, setEditingDeadline] = useState<Deadline | null>(null)
|
||||
|
||||
const filteredDeadlines = useMemo(() => {
|
||||
return deadlines.filter((d) => {
|
||||
// Status filter
|
||||
if (statusFilter === 'pending' && d.is_completed) return false
|
||||
if (statusFilter === 'completed' && !d.is_completed) return false
|
||||
|
||||
// Type filter
|
||||
if (typeFilter !== 'all' && d.deadline_type !== typeFilter) return false
|
||||
|
||||
return true
|
||||
})
|
||||
}, [deadlines, statusFilter, typeFilter])
|
||||
|
||||
// Group by overdue, today, upcoming
|
||||
const groupedDeadlines = useMemo(() => {
|
||||
const today = new Date().toISOString().split('T')[0]
|
||||
const overdue: Deadline[] = []
|
||||
const todayDeadlines: Deadline[] = []
|
||||
const upcoming: Deadline[] = []
|
||||
const completed: Deadline[] = []
|
||||
|
||||
for (const d of filteredDeadlines) {
|
||||
if (d.is_completed) {
|
||||
completed.push(d)
|
||||
} else if (isDeadlineOverdue(d)) {
|
||||
overdue.push(d)
|
||||
} else if (d.due_date === today) {
|
||||
todayDeadlines.push(d)
|
||||
} else {
|
||||
upcoming.push(d)
|
||||
}
|
||||
}
|
||||
|
||||
return { overdue, today: todayDeadlines, upcoming, completed }
|
||||
}, [filteredDeadlines])
|
||||
|
||||
const handleResetFilters = () => {
|
||||
setStatusFilter('all')
|
||||
setTypeFilter('all')
|
||||
}
|
||||
|
||||
const handleFormSubmit = async (data: Omit<Deadline, 'id' | 'user_id' | 'created_at' | 'updated_at'>) => {
|
||||
if (editingDeadline) {
|
||||
await onDeadlineEdit({ ...editingDeadline, ...data })
|
||||
} else {
|
||||
await onDeadlineCreate(data)
|
||||
}
|
||||
setShowForm(false)
|
||||
setEditingDeadline(null)
|
||||
}
|
||||
|
||||
const handleEdit = (deadline: Deadline) => {
|
||||
setEditingDeadline(deadline)
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
const handleFormClose = () => {
|
||||
setShowForm(false)
|
||||
setEditingDeadline(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<DeadlineFilters
|
||||
status={statusFilter}
|
||||
type={typeFilter}
|
||||
onStatusChange={setStatusFilter}
|
||||
onTypeChange={setTypeFilter}
|
||||
onReset={handleResetFilters}
|
||||
/>
|
||||
<Button onClick={() => setShowForm(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Ny deadline
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Deadline groups */}
|
||||
{filteredDeadlines.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<Calendar className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium">Inga deadlines</h3>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
{statusFilter !== 'all' || typeFilter !== 'all'
|
||||
? 'Inga deadlines matchar dina filter'
|
||||
: 'Skapa din första deadline för att komma igång'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* Overdue */}
|
||||
{groupedDeadlines.overdue.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-destructive mb-2">
|
||||
Förfallna ({groupedDeadlines.overdue.length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{groupedDeadlines.overdue.map((deadline) => (
|
||||
<DeadlineCard
|
||||
key={deadline.id}
|
||||
deadline={deadline}
|
||||
onToggle={onDeadlineToggle}
|
||||
onEdit={handleEdit}
|
||||
onDelete={onDeadlineDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Today */}
|
||||
{groupedDeadlines.today.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-warning mb-2">
|
||||
Idag ({groupedDeadlines.today.length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{groupedDeadlines.today.map((deadline) => (
|
||||
<DeadlineCard
|
||||
key={deadline.id}
|
||||
deadline={deadline}
|
||||
onToggle={onDeadlineToggle}
|
||||
onEdit={handleEdit}
|
||||
onDelete={onDeadlineDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upcoming */}
|
||||
{groupedDeadlines.upcoming.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground mb-2">
|
||||
Kommande ({groupedDeadlines.upcoming.length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{groupedDeadlines.upcoming.map((deadline) => (
|
||||
<DeadlineCard
|
||||
key={deadline.id}
|
||||
deadline={deadline}
|
||||
onToggle={onDeadlineToggle}
|
||||
onEdit={handleEdit}
|
||||
onDelete={onDeadlineDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Completed */}
|
||||
{groupedDeadlines.completed.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-success mb-2">
|
||||
Klara ({groupedDeadlines.completed.length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{groupedDeadlines.completed.map((deadline) => (
|
||||
<DeadlineCard
|
||||
key={deadline.id}
|
||||
deadline={deadline}
|
||||
onToggle={onDeadlineToggle}
|
||||
onEdit={handleEdit}
|
||||
onDelete={onDeadlineDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Deadline form dialog */}
|
||||
<DeadlineForm
|
||||
open={showForm}
|
||||
onOpenChange={handleFormClose}
|
||||
onSubmit={handleFormSubmit}
|
||||
initialData={editingDeadline || undefined}
|
||||
customers={customers}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { Deadline, DeadlineStatus, TAX_DEADLINE_TYPE_LABELS, DEADLINE_STATUS_LABELS } from '@/types'
|
||||
import { getReportUrl } from '@/lib/tax/deadline-config'
|
||||
import { STATUS_COLORS } from '@/lib/calendar/utils'
|
||||
|
||||
// Use the labels from types
|
||||
const STATUS_LABELS = DEADLINE_STATUS_LABELS
|
||||
import {
|
||||
FileText,
|
||||
ChevronRight,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Send,
|
||||
Check,
|
||||
Loader2,
|
||||
ExternalLink,
|
||||
} from 'lucide-react'
|
||||
|
||||
interface TaxTodoWidgetProps {
|
||||
deadlines: Deadline[]
|
||||
onStatusChange?: (deadlineId: string, newStatus: DeadlineStatus) => void
|
||||
}
|
||||
|
||||
export function TaxTodoWidget({ deadlines, onStatusChange }: TaxTodoWidgetProps) {
|
||||
const { toast } = useToast()
|
||||
const [updatingId, setUpdatingId] = useState<string | null>(null)
|
||||
|
||||
// Filter to only tax deadlines needing attention
|
||||
const taxDeadlines = deadlines.filter(
|
||||
(d) =>
|
||||
d.deadline_type === 'tax' &&
|
||||
!d.is_completed &&
|
||||
['action_needed', 'overdue', 'in_progress'].includes(d.status)
|
||||
)
|
||||
|
||||
// Sort by urgency: overdue first, then by date
|
||||
const sortedDeadlines = taxDeadlines.sort((a, b) => {
|
||||
if (a.status === 'overdue' && b.status !== 'overdue') return -1
|
||||
if (b.status === 'overdue' && a.status !== 'overdue') return 1
|
||||
return a.due_date.localeCompare(b.due_date)
|
||||
})
|
||||
|
||||
const overdueCount = taxDeadlines.filter((d) => d.status === 'overdue').length
|
||||
const actionNeededCount = taxDeadlines.filter((d) => d.status === 'action_needed').length
|
||||
|
||||
if (sortedDeadlines.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr)
|
||||
const today = new Date()
|
||||
today.setHours(0, 0, 0, 0)
|
||||
|
||||
const diffDays = Math.ceil(
|
||||
(date.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)
|
||||
)
|
||||
|
||||
if (diffDays === 0) return 'Idag'
|
||||
if (diffDays === 1) return 'Imorgon'
|
||||
if (diffDays < 0) return `${Math.abs(diffDays)} dagar sedan`
|
||||
if (diffDays <= 7) return `Om ${diffDays} dagar`
|
||||
|
||||
return date.toLocaleDateString('sv-SE', { day: 'numeric', month: 'short' })
|
||||
}
|
||||
|
||||
const handleStatusChange = async (deadlineId: string, newStatus: DeadlineStatus) => {
|
||||
setUpdatingId(deadlineId)
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/deadlines/${deadlineId}/status`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json()
|
||||
throw new Error(data.error || 'Failed to update status')
|
||||
}
|
||||
|
||||
toast({
|
||||
title: 'Status uppdaterad',
|
||||
description: `Markerad som ${STATUS_LABELS[newStatus].toLowerCase()}`,
|
||||
})
|
||||
|
||||
onStatusChange?.(deadlineId, newStatus)
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: 'Fel',
|
||||
description: error instanceof Error ? error.message : 'Kunde inte uppdatera status',
|
||||
variant: 'destructive',
|
||||
})
|
||||
} finally {
|
||||
setUpdatingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const getReportLink = (deadline: Deadline): string | null => {
|
||||
if (!deadline.linked_report_type || !deadline.linked_report_period) {
|
||||
return null
|
||||
}
|
||||
|
||||
return getReportUrl(deadline.linked_report_type, deadline.linked_report_period)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border-warning/30 bg-warning/5">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<FileText className="h-5 w-5 text-warning-foreground" />
|
||||
Att göra - Skatt
|
||||
</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
{overdueCount > 0 && (
|
||||
<Badge variant="destructive">{overdueCount} försenad</Badge>
|
||||
)}
|
||||
{actionNeededCount > 0 && (
|
||||
<Badge variant="warning">{actionNeededCount} snart</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{sortedDeadlines.slice(0, 5).map((deadline) => {
|
||||
const isUpdating = updatingId === deadline.id
|
||||
const reportLink = getReportLink(deadline)
|
||||
const isOverdue = deadline.status === 'overdue'
|
||||
const isActionNeeded = deadline.status === 'action_needed'
|
||||
|
||||
return (
|
||||
<div
|
||||
key={deadline.id}
|
||||
className={`p-3 rounded-lg border ${
|
||||
isOverdue
|
||||
? 'border-destructive/50 bg-destructive/5'
|
||||
: isActionNeeded
|
||||
? 'border-warning/40 bg-warning/10'
|
||||
: 'border-border bg-background'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex items-start gap-2 min-w-0 flex-1">
|
||||
{isOverdue ? (
|
||||
<AlertTriangle className="h-4 w-4 text-destructive flex-shrink-0 mt-0.5" />
|
||||
) : (
|
||||
<Clock className="h-4 w-4 text-warning-foreground flex-shrink-0 mt-0.5" />
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium">{deadline.title}</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span
|
||||
className={`text-xs ${
|
||||
isOverdue ? 'text-destructive font-medium' : 'text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
{formatDate(deadline.due_date)}
|
||||
</span>
|
||||
{deadline.tax_deadline_type && (
|
||||
<Badge variant="outline" className="text-xs px-1.5 py-0 h-5">
|
||||
{TAX_DEADLINE_TYPE_LABELS[deadline.tax_deadline_type]}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{/* Link to report if available */}
|
||||
{reportLink && (
|
||||
<Link href={reportLink}>
|
||||
<Button variant="ghost" size="sm" className="h-7 px-2">
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Mark as in progress */}
|
||||
{['action_needed', 'overdue'].includes(deadline.status) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-xs"
|
||||
disabled={isUpdating}
|
||||
onClick={() => handleStatusChange(deadline.id, 'in_progress')}
|
||||
>
|
||||
{isUpdating ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
'Påbörja'
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Mark as submitted */}
|
||||
{deadline.status === 'in_progress' && (
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-xs gap-1"
|
||||
disabled={isUpdating}
|
||||
onClick={() => handleStatusChange(deadline.id, 'submitted')}
|
||||
>
|
||||
{isUpdating ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Send className="h-3 w-3" />
|
||||
Inskickad
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{sortedDeadlines.length > 5 && (
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
+{sortedDeadlines.length - 5} fler uppgifter
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Link href="/deadlines" className="block">
|
||||
<Button variant="ghost" className="w-full justify-between">
|
||||
Visa alla deadlines
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { Deadline, DeadlineStatus } from '@/types'
|
||||
import {
|
||||
getUpcomingDeadlines,
|
||||
PRIORITY_LABELS,
|
||||
STATUS_LABELS,
|
||||
STATUS_COLORS,
|
||||
} from '@/lib/calendar/utils'
|
||||
import { Calendar, ChevronRight, AlertTriangle, Clock, Check, Send, Loader2 } from 'lucide-react'
|
||||
|
||||
interface UpcomingDeadlinesWidgetProps {
|
||||
deadlines: Deadline[]
|
||||
maxItems?: number
|
||||
onStatusChange?: (deadlineId: string, newStatus: DeadlineStatus) => void
|
||||
}
|
||||
|
||||
export function UpcomingDeadlinesWidget({ deadlines, maxItems = 5, onStatusChange }: UpcomingDeadlinesWidgetProps) {
|
||||
const { toast } = useToast()
|
||||
const [updatingId, setUpdatingId] = useState<string | null>(null)
|
||||
|
||||
// Get upcoming deadlines (next 7 days) + any needing attention
|
||||
const upcomingDeadlines = getUpcomingDeadlines(deadlines, 7)
|
||||
const actionNeededDeadlines = deadlines.filter(
|
||||
(d) => !d.is_completed && d.status === 'action_needed'
|
||||
)
|
||||
const overdueDeadlines = deadlines.filter(
|
||||
(d) => !d.is_completed && d.status === 'overdue'
|
||||
)
|
||||
|
||||
// Combine and sort (overdue first, then action_needed, then upcoming)
|
||||
const displayDeadlines = [...overdueDeadlines, ...actionNeededDeadlines, ...upcomingDeadlines]
|
||||
.filter((d, i, arr) => arr.findIndex((x) => x.id === d.id) === i) // Remove duplicates
|
||||
.slice(0, maxItems)
|
||||
|
||||
const overdueCount = overdueDeadlines.length
|
||||
const actionNeededCount = actionNeededDeadlines.length
|
||||
|
||||
if (displayDeadlines.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr)
|
||||
const today = new Date()
|
||||
const tomorrow = new Date(today)
|
||||
tomorrow.setDate(tomorrow.getDate() + 1)
|
||||
|
||||
if (date.toDateString() === today.toDateString()) {
|
||||
return 'Idag'
|
||||
}
|
||||
if (date.toDateString() === tomorrow.toDateString()) {
|
||||
return 'Imorgon'
|
||||
}
|
||||
return date.toLocaleDateString('sv-SE', { day: 'numeric', month: 'short' })
|
||||
}
|
||||
|
||||
const handleStatusChange = async (deadlineId: string, newStatus: DeadlineStatus) => {
|
||||
setUpdatingId(deadlineId)
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/deadlines/${deadlineId}/status`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json()
|
||||
throw new Error(data.error || 'Failed to update status')
|
||||
}
|
||||
|
||||
toast({
|
||||
title: 'Status uppdaterad',
|
||||
description: `Deadline markerad som ${STATUS_LABELS[newStatus].toLowerCase()}`,
|
||||
})
|
||||
|
||||
// Notify parent component
|
||||
onStatusChange?.(deadlineId, newStatus)
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: 'Fel',
|
||||
description: error instanceof Error ? error.message : 'Kunde inte uppdatera status',
|
||||
variant: 'destructive',
|
||||
})
|
||||
} finally {
|
||||
setUpdatingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusBadgeVariant = (status: DeadlineStatus): 'default' | 'secondary' | 'destructive' | 'warning' => {
|
||||
switch (status) {
|
||||
case 'overdue': return 'destructive'
|
||||
case 'action_needed': return 'warning'
|
||||
case 'submitted':
|
||||
case 'confirmed': return 'default'
|
||||
default: return 'secondary'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Calendar className="h-5 w-5" />
|
||||
Kommande deadlines
|
||||
</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
{overdueCount > 0 && (
|
||||
<Badge variant="destructive">{overdueCount} försenad</Badge>
|
||||
)}
|
||||
{actionNeededCount > 0 && (
|
||||
<Badge variant="warning">{actionNeededCount} åtgärd</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{displayDeadlines.map((deadline) => {
|
||||
const isUpdating = updatingId === deadline.id
|
||||
const statusColors = STATUS_COLORS[deadline.status] || STATUS_COLORS.upcoming
|
||||
|
||||
return (
|
||||
<div
|
||||
key={deadline.id}
|
||||
className={`flex items-center justify-between p-2 rounded-lg border ${statusColors.border} ${statusColors.bg}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0 flex-1">
|
||||
{deadline.status === 'overdue' ? (
|
||||
<AlertTriangle className="h-4 w-4 text-destructive flex-shrink-0" />
|
||||
) : deadline.status === 'action_needed' ? (
|
||||
<Clock className="h-4 w-4 text-orange-600 flex-shrink-0" />
|
||||
) : (
|
||||
<Clock className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium truncate">{deadline.title}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatDate(deadline.due_date)}
|
||||
{deadline.due_time && ` kl. ${deadline.due_time.slice(0, 5)}`}
|
||||
</p>
|
||||
{deadline.tax_deadline_type && (
|
||||
<Badge variant="outline" className="text-xs px-1 py-0">
|
||||
Skatt
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{/* Status badge */}
|
||||
<Badge variant={getStatusBadgeVariant(deadline.status)} className="text-xs">
|
||||
{STATUS_LABELS[deadline.status]}
|
||||
</Badge>
|
||||
|
||||
{/* Quick action buttons for tax deadlines */}
|
||||
{deadline.tax_deadline_type && !['submitted', 'confirmed'].includes(deadline.status) && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2"
|
||||
disabled={isUpdating}
|
||||
onClick={() => handleStatusChange(deadline.id, 'submitted')}
|
||||
title="Markera som inskickad"
|
||||
>
|
||||
{isUpdating ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{deadline.status === 'submitted' && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2"
|
||||
disabled={isUpdating}
|
||||
onClick={() => handleStatusChange(deadline.id, 'confirmed')}
|
||||
title="Markera som bekräftad"
|
||||
>
|
||||
{isUpdating ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<Check className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<Link href="/deadlines" className="block">
|
||||
<Button variant="ghost" className="w-full justify-between mt-2">
|
||||
Visa alla deadlines
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export { DeadlineCard } from './DeadlineCard'
|
||||
export { DeadlineFilters } from './DeadlineFilters'
|
||||
export { DeadlineForm } from './DeadlineForm'
|
||||
export { DeadlineList } from './DeadlineList'
|
||||
export { UpcomingDeadlinesWidget } from './UpcomingDeadlinesWidget'
|
||||
export { TaxTodoWidget } from './TaxTodoWidget'
|
||||
Reference in New Issue
Block a user