Polish expenses dashboard

src/app/dashboard/expenses/page.tsx

@@ -3,7 +3,10 @@
 import { useMemo, useState } from "react";
 import { api } from "~/trpc/react";
 import { DashboardPageHeader } from "~/components/layout/page-header";
-import { DashboardPage, dashboardStatGridClass } from "~/components/layout/dashboard-page";
+import {
+  DashboardPage,
+  dashboardStatGridClass,
+} from "~/components/layout/dashboard-page";
 import { EmptyState } from "~/components/layout/page-layout";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
@@ -31,9 +34,22 @@ import { NumberInput } from "~/components/ui/number-input";
 import { ExpenseReceiptsPanel } from "~/components/expenses/expense-receipts-panel";
 import { ExpenseReceiptIndicator } from "~/components/expenses/expense-receipt-indicator";
 import { toast } from "sonner";
-import { Plus, Pencil, Trash2, Receipt, Eye } from "lucide-react";
+import {
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Receipt,
+  Search,
+  Trash2,
+} from "lucide-react";
 import { formatCurrency, SUPPORTED_CURRENCIES } from "~/lib/currency";
 import { EXPENSE_CATEGORIES } from "~/lib/expense-categories";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
 
 interface ExpenseFormData {
   date: Date;
@@ -64,6 +80,7 @@ const defaultForm: ExpenseFormData = {
 };
 
 type ExpenseDialogMode = "create" | "view" | "edit";
+type ExpenseFilter = "all" | "billable" | "deductible" | "receipts";
 
 function expenseToForm(
   expense: {
@@ -103,6 +120,8 @@ export default function ExpensesPage() {
   const [form, setForm] = useState<ExpenseFormData>(defaultForm);
   const [deleteId, setDeleteId] = useState<string | null>(null);
   const [businessFilter, setBusinessFilter] = useState("all");
+  const [expenseFilter, setExpenseFilter] = useState<ExpenseFilter>("all");
+  const [search, setSearch] = useState("");
 
   const utils = api.useUtils();
   const { data: businesses = [] } = api.businesses.getAll.useQuery();
@@ -192,7 +211,29 @@ export default function ExpensesPage() {
     else create.mutate(payload);
   };
 
+  const filteredExpenses = useMemo(() => {
+    const needle = search.trim().toLowerCase();
+    return expenses.filter((expense) => {
+      if (expenseFilter === "billable" && !expense.billable) return false;
+      if (expenseFilter === "deductible" && !expense.taxDeductible)
+        return false;
+      if (expenseFilter === "receipts" && expense.receiptCount === 0)
+        return false;
+      if (!needle) return true;
+      return [
+        expense.description,
+        expense.category,
+        expense.notes,
+        expense.business?.name,
+        expense.client?.name,
+      ]
+        .filter(Boolean)
+        .some((value) => value?.toLowerCase().includes(needle));
+    });
+  }, [expenseFilter, expenses, search]);
+
   const totalExpenses = expenses.reduce((s, e) => s + e.amount, 0);
+  const visibleTotal = filteredExpenses.reduce((s, e) => s + e.amount, 0);
   const billableTotal = expenses
     .filter((e) => e.billable)
     .reduce((s, e) => s + e.amount, 0);
@@ -200,6 +241,10 @@ export default function ExpensesPage() {
     .filter((e) => e.taxDeductible)
     .reduce((s, e) => s + e.amount, 0);
   const withReceipts = expenses.filter((e) => e.receiptCount > 0).length;
+  const hasActiveFilters =
+    search.trim().length > 0 ||
+    expenseFilter !== "all" ||
+    businessFilter !== "all";
 
   const isViewMode = dialogMode === "view";
   const isEditMode = dialogMode === "edit";
@@ -239,23 +284,6 @@ export default function ExpensesPage() {
         </Button>
       </DashboardPageHeader>
 
-      <div className="mb-4 flex items-center gap-3">
-        <Label className="text-sm">Business</Label>
-        <Select value={businessFilter} onValueChange={setBusinessFilter}>
-          <SelectTrigger className="w-52">
-            <SelectValue placeholder="All businesses" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">All businesses</SelectItem>
-            {businesses.map((b) => (
-              <SelectItem key={b.id} value={b.id}>
-                {b.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
       <div className={dashboardStatGridClass}>
         <Card>
           <CardContent className="p-4">
@@ -298,10 +326,64 @@ export default function ExpensesPage() {
       </div>
 
       <Card>
-        <CardHeader>
+        <CardHeader className="gap-4">
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div>
               <CardTitle className="flex items-center gap-2">
-            <Receipt className="h-5 w-5" /> All Expenses
+                <Receipt className="h-5 w-5" /> Expenses
               </CardTitle>
+              <p className="text-muted-foreground mt-1 text-sm">
+                {filteredExpenses.length === expenses.length
+                  ? `${expenses.length} recorded`
+                  : `${filteredExpenses.length} of ${expenses.length} shown`}
+                {filteredExpenses.length !== expenses.length
+                  ? ` · ${formatCurrency(visibleTotal)} visible`
+                  : ""}
+              </p>
+            </div>
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+              <div className="relative sm:w-64">
+                <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+                <Input
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Search expenses"
+                  className="pl-9"
+                />
+              </div>
+              <Select value={businessFilter} onValueChange={setBusinessFilter}>
+                <SelectTrigger className="sm:w-52">
+                  <SelectValue placeholder="All businesses" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All businesses</SelectItem>
+                  {businesses.map((b) => (
+                    <SelectItem key={b.id} value={b.id}>
+                      {b.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {[
+              ["all", "All"] as const,
+              ["billable", "Billable"] as const,
+              ["deductible", "Deductible"] as const,
+              ["receipts", "With receipts"] as const,
+            ].map(([value, label]) => (
+              <Button
+                key={value}
+                type="button"
+                variant={expenseFilter === value ? "default" : "outline"}
+                size="sm"
+                onClick={() => setExpenseFilter(value)}
+              >
+                {label}
+              </Button>
+            ))}
+          </div>
         </CardHeader>
         <CardContent className="p-0">
           {isLoading ? (
@@ -320,16 +402,36 @@ export default function ExpensesPage() {
                 </Button>
               }
             />
+          ) : filteredExpenses.length === 0 ? (
+            <EmptyState
+              icon={<Search className="h-6 w-6" />}
+              title="No matching expenses"
+              description="Adjust the search or filters to bring expenses back into view."
+              action={
+                hasActiveFilters ? (
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setSearch("");
+                      setExpenseFilter("all");
+                      setBusinessFilter("all");
+                    }}
+                  >
+                    Clear filters
+                  </Button>
+                ) : undefined
+              }
+            />
           ) : (
             <>
-              <div className="text-muted-foreground hidden border-b px-4 py-2 text-xs font-medium tracking-wide uppercase sm:grid sm:grid-cols-[1fr_88px_96px_auto] sm:gap-3">
+              <div className="text-muted-foreground hidden border-b px-4 py-2 text-xs font-medium tracking-wide uppercase sm:grid sm:grid-cols-[minmax(0,1fr)_104px_116px_44px] sm:gap-3">
                 <span>Expense</span>
                 <span className="text-center">Receipts</span>
                 <span className="text-right">Amount</span>
-                <span className="w-[108px]" />
+                <span />
               </div>
               <div className="divide-y">
-                {expenses.map((expense) => (
+                {filteredExpenses.map((expense) => (
                   <div
                     key={expense.id}
                     role="button"
@@ -341,7 +443,7 @@ export default function ExpensesPage() {
                         handleView(expense);
                       }
                     }}
-                    className="hover:bg-muted/40 focus-visible:ring-ring flex cursor-pointer flex-col gap-3 p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none sm:grid sm:grid-cols-[1fr_88px_96px_auto] sm:items-start sm:gap-3"
+                    className="hover:bg-muted/40 focus-visible:ring-ring flex cursor-pointer flex-col gap-3 p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none sm:grid sm:grid-cols-[minmax(0,1fr)_104px_116px_44px] sm:items-center sm:gap-3"
                   >
                     <div className="min-w-0 flex-1">
                       <div className="flex flex-wrap items-center gap-2">
@@ -400,42 +502,43 @@ export default function ExpensesPage() {
                       />
                     </div>
 
-                    <div className="flex items-center justify-between sm:contents">
                     <p className="font-semibold sm:text-right">
                       {formatCurrency(expense.amount, expense.currency)}
                     </p>
+
                     <div
-                        className="flex flex-shrink-0 items-center gap-1 sm:gap-2"
+                      className="flex justify-end"
                       onClick={(e) => e.stopPropagation()}
                     >
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
                           <Button
                             variant="ghost"
                             size="sm"
-                          className="h-8 w-8 p-0"
+                            className="h-9 w-9 p-0"
-                          onClick={() => handleView(expense)}
+                            aria-label={`Actions for ${expense.description}`}
-                          title="View expense"
                           >
-                          <Eye className="h-3.5 w-3.5" />
+                            <MoreHorizontal className="h-4 w-4" />
                           </Button>
-                        <Button
+                        </DropdownMenuTrigger>
-                          variant="ghost"
+                        <DropdownMenuContent align="end">
-                          size="sm"
+                          <DropdownMenuItem onClick={() => handleView(expense)}>
-                          className="h-8 w-8 p-0"
+                            <Receipt className="mr-2 h-4 w-4" />
-                          onClick={() => handleEdit(expense)}
+                            View details
-                          title="Edit expense"
+                          </DropdownMenuItem>
-                        >
+                          <DropdownMenuItem onClick={() => handleEdit(expense)}>
-                          <Pencil className="h-3.5 w-3.5" />
+                            <Pencil className="mr-2 h-4 w-4" />
-                        </Button>
+                            Edit
-                        <Button
+                          </DropdownMenuItem>
-                          variant="ghost"
+                          <DropdownMenuItem
-                          size="sm"
+                            variant="destructive"
-                          className="text-destructive h-8 w-8 p-0"
                             onClick={() => setDeleteId(expense.id)}
-                          title="Delete expense"
                           >
-                          <Trash2 className="h-3.5 w-3.5" />
+                            <Trash2 className="mr-2 h-4 w-4" />
-                        </Button>
+                            Delete
-                      </div>
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
                     </div>
                   </div>
                 ))}
@@ -564,7 +667,9 @@ export default function ExpensesPage() {
                     <Label>Currency</Label>
                     <Select
                       value={form.currency}
-                  onValueChange={(v) => setForm((p) => ({ ...p, currency: v }))}
+                      onValueChange={(v) =>
+                        setForm((p) => ({ ...p, currency: v }))
+                      }
                     >
                       <SelectTrigger>
                         <SelectValue />
@@ -595,7 +700,10 @@ export default function ExpensesPage() {
                     <Select
                       value={form.category || "none"}
                       onValueChange={(v) =>
-                    setForm((p) => ({ ...p, category: v === "none" ? "" : v }))
+                        setForm((p) => ({
+                          ...p,
+                          category: v === "none" ? "" : v,
+                        }))
                       }
                     >
                       <SelectTrigger>
@@ -642,7 +750,10 @@ export default function ExpensesPage() {
                   <Select
                     value={form.clientId || "none"}
                     onValueChange={(v) =>
-                  setForm((p) => ({ ...p, clientId: v === "none" ? "" : v }))
+                      setForm((p) => ({
+                        ...p,
+                        clientId: v === "none" ? "" : v,
+                      }))
                     }
                   >
                     <SelectTrigger>