diff --git a/frontend/src/components/InlineEditCell.tsx b/frontend/src/components/InlineEditCell.tsx new file mode 100644 index 0000000..fbbdc93 --- /dev/null +++ b/frontend/src/components/InlineEditCell.tsx @@ -0,0 +1,60 @@ +import { useState } from 'react' +import { TableCell } from '@/components/ui/table' +import { Input } from '@/components/ui/input' +import { formatCurrency } from '@/lib/format' +import { cn } from '@/lib/utils' + +interface InlineEditCellProps { + value: number + currency: string + onSave: (value: number) => Promise + className?: string +} + +export function InlineEditCell({ value, currency, onSave, className }: InlineEditCellProps) { + const [editing, setEditing] = useState(false) + const [inputValue, setInputValue] = useState(String(value)) + + const handleClick = () => { + setInputValue(String(value)) + setEditing(true) + } + + const handleBlur = async () => { + const num = parseFloat(inputValue) + if (!isNaN(num) && num !== value) { + await onSave(num) + } + setEditing(false) + } + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + handleBlur() + } + } + + return ( + + {editing ? ( + setInputValue(e.target.value)} + onBlur={handleBlur} + onKeyDown={handleKeyDown} + className="ml-auto w-28 text-right" + autoFocus + /> + ) : ( + + {formatCurrency(value, currency)} + + )} + + ) +}