New classification logic etc
This commit is contained in:
Jakob Wennberg
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user