91 lines
2.2 KiB
TypeScript
91 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useSortable } from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Building2, GripVertical, Pencil } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import Link from "next/link";
|
|
import type { Account } from "@/lib/types";
|
|
|
|
interface DraggableAccountItemProps {
|
|
account: Account;
|
|
onEditAccount: (account: Account) => void;
|
|
formatCurrency: (amount: number) => string;
|
|
}
|
|
|
|
export function DraggableAccountItem({
|
|
account,
|
|
onEditAccount,
|
|
formatCurrency,
|
|
}: DraggableAccountItemProps) {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({
|
|
id: `account-${account.id}`,
|
|
data: {
|
|
type: "account",
|
|
account,
|
|
},
|
|
});
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.5 : 1,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
className={cn(
|
|
"flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group ml-12",
|
|
isDragging && "bg-muted/80"
|
|
)}
|
|
>
|
|
<button
|
|
{...attributes}
|
|
{...listeners}
|
|
className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing"
|
|
>
|
|
<GripVertical className="w-4 h-4 text-muted-foreground" />
|
|
</button>
|
|
<Building2 className="w-4 h-4 text-muted-foreground" />
|
|
<Link
|
|
href={`/transactions?accountId=${account.id}`}
|
|
className="flex-1 text-sm hover:text-primary hover:underline truncate"
|
|
>
|
|
{account.name}
|
|
{account.accountNumber && (
|
|
<span className="text-muted-foreground">
|
|
{" "}({account.accountNumber})
|
|
</span>
|
|
)}
|
|
</Link>
|
|
<span
|
|
className={cn(
|
|
"text-sm tabular-nums",
|
|
account.balance >= 0 ? "text-emerald-600" : "text-red-600"
|
|
)}
|
|
>
|
|
{formatCurrency(account.balance)}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7 opacity-0 group-hover:opacity-100"
|
|
onClick={() => onEditAccount(account)}
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|