52 lines
1.9 KiB
React
52 lines
1.9 KiB
React
|
import { Clock, X, CheckCircle2, Loader2 } from 'lucide-react';
|
||
|
|
import { cn, fmt, fmtDate } from '@/lib/utils';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
|
||
|
|
export function AutopaySuggestionActions({ row, loading, onConfirm, onDismiss, compact = false }) {
|
||
|
|
const suggestion = row.autopay_suggestion;
|
||
|
|
if (!suggestion) return null;
|
||
|
|
|
||
|
|
const title = `${fmt(suggestion.amount)} due ${fmtDate(suggestion.paid_date)}`;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={cn(
|
||
|
|
'flex items-center gap-1.5',
|
||
|
|
compact ? 'w-full flex-wrap justify-end sm:w-auto' : 'justify-end',
|
||
|
|
)}>
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
'inline-flex min-w-0 items-center gap-1.5 rounded-md border border-sky-500/20 bg-sky-500/10',
|
||
|
|
'px-2 py-1 text-xs font-medium text-sky-600 dark:text-sky-300',
|
||
|
|
compact ? 'mr-auto' : 'max-w-32',
|
||
|
|
)}
|
||
|
|
title={`Autopay suggested: ${title}`}
|
||
|
|
>
|
||
|
|
<Clock className="h-3 w-3 shrink-0" />
|
||
|
|
<span className="truncate">{compact ? `Suggested ${fmt(suggestion.amount)}` : 'Suggested'}</span>
|
||
|
|
</span>
|
||
|
|
<Button
|
||
|
|
size="icon"
|
||
|
|
variant="ghost"
|
||
|
|
disabled={loading}
|
||
|
|
onClick={onDismiss}
|
||
|
|
className="h-8 w-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
||
|
|
title={`Dismiss suggested autopay payment for ${title}`}
|
||
|
|
aria-label={`Dismiss suggested autopay payment for ${row.name}`}
|
||
|
|
>
|
||
|
|
<X className="h-3.5 w-3.5" />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
size="icon"
|
||
|
|
variant="default"
|
||
|
|
disabled={loading}
|
||
|
|
onClick={onConfirm}
|
||
|
|
className="h-8 w-8"
|
||
|
|
title={`Confirm suggested autopay payment for ${title}`}
|
||
|
|
aria-label={`Confirm suggested autopay payment for ${row.name}`}
|
||
|
|
>
|
||
|
|
{loading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <CheckCircle2 className="h-3.5 w-3.5" />}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|