feat: bugfixes, spedup, bulk actions,

components/transactions/bulk-actions.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { bulkDeleteTransactionsAction } from "@/app/transactions/actions"
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { ChevronUp, Trash2 } from "lucide-react"
+import { useState } from "react"
+
+const bulkActions = [
+  {
+    id: "delete",
+    label: "Bulk Delete",
+    icon: Trash2,
+    variant: "destructive" as const,
+    action: bulkDeleteTransactionsAction,
+    confirmMessage:
+      "Are you sure you want to delete these transactions and all their files? This action cannot be undone.",
+  },
+]
+
+interface BulkActionsMenuProps {
+  selectedIds: string[]
+  onActionComplete?: () => void
+}
+
+export function BulkActionsMenu({ selectedIds, onActionComplete }: BulkActionsMenuProps) {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleAction = async (actionId: string) => {
+    const action = bulkActions.find((a) => a.id === actionId)
+    if (!action) return
+
+    if (action.confirmMessage) {
+      if (!confirm(action.confirmMessage)) return
+    }
+
+    try {
+      setIsLoading(true)
+      const result = await action.action(selectedIds)
+      if (!result.success) {
+        throw new Error(result.error)
+      }
+      onActionComplete?.()
+    } catch (error) {
+      console.error(`Failed to execute bulk action ${actionId}:`, error)
+      alert(`Failed to execute action: ${error}`)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button className="min-w-48" disabled={isLoading}>
+            {selectedIds.length} transactions
+            <ChevronUp className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {bulkActions.map((action) => (
+            <DropdownMenuItem
+              key={action.id}
+              onClick={() => handleAction(action.id)}
+              className="gap-2"
+              disabled={isLoading}
+            >
+              <action.icon className="h-4 w-4" />
+              {action.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}