feat: filters and UI improvements

components/transactions/edit.tsx

@@ -53,10 +53,12 @@ export default function TransactionEditForm({
   })
 
   const handleDelete = async () => {
-    startTransition(async () => {
-      await deleteAction(transaction.id)
-      router.back()
-    })
+    if (confirm("Are you sure? This will delete the transaction with all the files permanently")) {
+      startTransition(async () => {
+        await deleteAction(transaction.id)
+        router.back()
+      })
+    }
   }
 
   useEffect(() => {
@@ -146,9 +148,9 @@ export default function TransactionEditForm({
         />
       ))}
 
-      <div className="flex justify-end space-x-4 pt-6">
+      <div className="flex justify-between space-x-4 pt-6">
         <Button type="button" onClick={handleDelete} variant="destructive" disabled={isDeleting}>
-          {isDeleting ? "⏳ Deleting..." : "Delete Transaction"}
+          {isDeleting ? "⏳ Deleting..." : "Delete "}
         </Button>
 
         <Button type="submit" disabled={isSaving}>
@@ -158,7 +160,7 @@ export default function TransactionEditForm({
               Saving...
             </>
           ) : (
-            "Save"
+            "Save Transaction"
           )}
         </Button>
 

components/transactions/filters.tsx

@@ -1,11 +1,13 @@
 "use client"
 
 import { DateRangePicker } from "@/components/forms/date-range-picker"
+import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { TransactionFilters } from "@/data/transactions"
-import { useTransactionFilters } from "@/hooks/use-transaction-filters"
+import { isFiltered, useTransactionFilters } from "@/hooks/use-transaction-filters"
 import { Category, Project } from "@prisma/client"
+import { X } from "lucide-react"
 
 export function TransactionSearchAndFilters({ categories, projects }: { categories: Category[]; projects: Project[] }) {
   const [filters, setFilters] = useTransactionFilters()
@@ -79,6 +81,20 @@ export function TransactionSearchAndFilters({ categories, projects }: { categori
             handleFilterChange("dateTo", date ? date.to : undefined)
           }}
         />
+
+        {isFiltered(filters) && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => {
+              setFilters({})
+            }}
+            className="text-muted-foreground hover:text-foreground"
+            title="Clear all filters"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
       </div>
     </div>
   )