| 1 | import { format, formatDistanceToNow, isPast } from 'date-fns' |
| 2 | import { AlertTriangleIcon, CalendarIcon |
| 3 | import Link from 'next/link |
| 4 | |
| 5 | import { |
| 6 | formatCurrency, |
| 7 | sumByCurrency, |
| 8 | } from '@/components/dashboard/format-currency' |
| 9 | import { Badge } |
| 10 | import { cn } |
| 11 | import type { RouteImpl |
| 12 | |
| 13 | interface Invoice { |
| 14 | currency: string |
| 15 | dueDate: Date |
| 16 | status: string |
| 17 | totalAmount: string |
| 18 | } |
| 19 | |
| 20 | interface Milestone { |
| 21 | status: string |
| 22 | } |
| 23 | |
| 24 | interface Props { |
| 25 | invoices: Invoice |
| 26 | milestones: Milestone |
| 27 | orgSlug: string |
| 28 | project: { |
| 29 | id: string |
| 30 | name: string |
| 31 | slug: string |
| 32 | dueDate: string |
| 33 | } |
| 34 | } |
| 35 | |
| 36 | export function ProjectSummaryCard({ |
| 37 | orgSlug, |
| 38 | project, |
| 39 | invoices, |
| 40 | milestones, |
| 41 | }: Props) |
| 42 | const paid = |
| 43 | const overdue = |
| 44 | (i) => |
| 45 | ) |
| 46 | const completed = |
| 47 | const progress = |
| 48 | ? Math.round(( |
| 49 | : null |
| 50 | |
| 51 | const paidTotals = |
| 52 | const primaryPaid = |
| 53 | |
| 54 | const due = |
| 55 | |
| 56 | return ( |
| 57 | <Link |
| 58 | className='flex flex-col gap-2 rounded-lg border border-border p-4 transition-colors hover:bg-muted/50' |
| 59 | href={`/${orgSlug |
| 60 | > |
| 61 | <div className='flex items-start justify-between gap-2 |
| 62 | <span className='truncate font-medium text-sm |
| 63 | {overdue.length > |
| 64 | <Badge className=' |
| 65 | {overdue.length} overdue |
| 66 | </Badge> |
| 67 | )} |
| 68 | </div> |
| 69 | {progress !== null |
| 70 | <div className='flex items-center gap-2 |
| 71 | <div className='h-1.5 flex-1 overflow-hidden rounded-full bg-secondary |
| 72 | <div |
| 73 | className={cn( |
| 74 | 'h-full rounded-full transition-all', |
| 75 | progress === 100 ? |
| 76 | )} |
| 77 | style={{ width: |
| 78 | /> |
| 79 | </div> |
| 80 | <span className='shrink-0 text-muted-foreground text-xs tabular-nums |
| 81 | {completed}/{milestones |
| 82 | </span> |
| 83 | </div> |
| 84 | )} |
| 85 | <div className='flex flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground text-xs |
| 86 | {primaryPaid && ( |
| 87 | <span className='inline-flex items-center gap-1 |
| 88 | <TrendingUp className=' |
| 89 | {formatCurrency(primaryPaid[1 |
| 90 | </span> |
| 91 | )} |
| 92 | {due && ( |
| 93 | <span |
| 94 | className={cn( |
| 95 | 'inline-flex items-center gap-1', |
| 96 | isPast(due) && |
| 97 | )} |
| 98 | > |
| 99 | {isPast(due) |
| 100 | <AlertTriangleIcon className=' |
| 101 | ) : ( |
| 102 | <CalendarIcon className=' |
| 103 | )} |
| 104 | {isPast(due) |
| 105 | ? `Overdue ${formatDistanceToNow( |
| 106 | : `Due ${format( |
| 107 | </span> |
| 108 | )} |
| 109 | </div> |
| 110 | </Link> |
| 111 | ) |
| 112 | } |