✨ [feat][frontend] LinkedTransactionsField component

Author: tomy0000000

frontend/package.json

@@ -48,6 +48,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^1.16.0",
+    "motion": "^12.42.0",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "^19.2.6",

frontend/pnpm-lock.yaml

@@ -0,0 +1,194 @@
+import { GripVertical, Link2, X } from 'lucide-react'
+import { Reorder, useDragControls } from 'motion/react'
+import { useState } from 'react'
+
+import { Amount } from '@/components/amount'
+import {
+  LinkTransactionsTable,
+  type SelectedTransaction
+} from '@/components/link-transactions-table'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle
+} from '@/components/ui/empty'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle
+} from '@/components/ui/item'
+import type { Client } from '@/lib/client/client'
+import { formatDateTime } from '@/lib/utils'
+
+interface LinkedTransactionsFieldProps {
+  client: Client
+  value: SelectedTransaction[]
+  onChange: (value: SelectedTransaction[]) => void
+}
+
+interface LinkedTransactionItemProps {
+  item: SelectedTransaction
+  onUnlink: (id: number) => void
+}
+
+export function LinkedTransactionsField({
+  client,
+  value,
+  onChange
+}: LinkedTransactionsFieldProps) {
+  const [selection, setSelection] = useState<SelectedTransaction[]>([])
+
+  const handleLink = () => {
+    if (selection.length === 0) return
+    const existing = new Set(value.map((item) => item.transaction.id))
+    const additions = selection.filter(
+      (item) => !existing.has(item.transaction.id)
+    )
+    if (additions.length > 0) onChange([...value, ...additions])
+  }
+
+  const unlinkTransaction = (id: number) =>
+    onChange(value.filter((item) => item.transaction.id !== id))
+
+  return (
+    <Dialog
+      onOpenChange={(dialogOpen) => {
+        if (!dialogOpen) setSelection([])
+      }}
+    >
+      {value.length === 0 ? (
+        <Empty className="border border-dashed py-8">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <Link2 />
+            </EmptyMedia>
+            <EmptyTitle>No transactions linked</EmptyTitle>
+            <EmptyDescription>
+              Link one or more transactions to this event.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <DialogTrigger asChild>
+              <Button type="button" variant="outline" size="sm">
+                Link transactions
+              </Button>
+            </DialogTrigger>
+          </EmptyContent>
+        </Empty>
+      ) : (
+        <div className="space-y-3">
+          <Reorder.Group
+            axis="y"
+            values={value}
+            onReorder={onChange}
+            className="flex w-full flex-col gap-2.5"
+          >
+            {value.map((item) => (
+              <LinkedTransactionItem
+                key={item.transaction.id}
+                item={item}
+                onUnlink={unlinkTransaction}
+              />
+            ))}
+          </Reorder.Group>
+          <DialogTrigger asChild>
+            <Button type="button" variant="outline" size="sm">
+              Link more transactions
+            </Button>
+          </DialogTrigger>
+        </div>
+      )}
+
+      <DialogContent className="min-w-sm sm:min-w-sm sm:max-w-[min(calc(100%-2rem),48rem)]">
+        <DialogHeader>
+          <DialogTitle>Link transactions</DialogTitle>
+          <DialogDescription>
+            Select transactions to link to this event.
+          </DialogDescription>
+        </DialogHeader>
+        <LinkTransactionsTable
+          client={client}
+          selection={selection}
+          onSelectionChange={setSelection}
+        />
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">
+              Cancel
+            </Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button
+              type="button"
+              disabled={selection.length === 0}
+              onClick={handleLink}
+            >
+              Link
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function LinkedTransactionItem({ item, onUnlink }: LinkedTransactionItemProps) {
+  const { transaction, account } = item
+  const dragControls = useDragControls()
+
+  return (
+    <Reorder.Item
+      value={item}
+      dragListener={false}
+      dragControls={dragControls}
+      className="list-none"
+    >
+      <Item variant="outline" size="sm" className="bg-background">
+        <span
+          aria-label="Drag to reorder"
+          className="flex cursor-grab touch-none items-center text-muted-foreground active:cursor-grabbing"
+          onPointerDown={(e) => dragControls.start(e)}
+        >
+          <GripVertical className="size-4" />
+        </span>
+        <ItemContent>
+          <ItemTitle>{account.name}</ItemTitle>
+          <ItemDescription>
+            {formatDateTime(transaction.created_at)}
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Amount
+            amount={parseFloat(transaction.amount)}
+            currencyCode={account.currency_code}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Unlink transaction"
+            onClick={() => onUnlink(transaction.id)}
+          >
+            <X />
+          </Button>
+        </ItemActions>
+      </Item>
+    </Reorder.Item>
+  )
+}