Polish expenses dashboard

docker-compose.coolify-garage.yml

@@ -21,8 +21,8 @@ services:
   garage:
     image: dxflrs/garage:v2.3.0
     environment:
-      GARAGE_DEFAULT_ACCESS_KEY: ${S3_ACCESS_KEY:-GK3515373e4c851ebaad366558}
+      GARAGE_DEFAULT_ACCESS_KEY: ${S3_ACCESS_KEY}
-      GARAGE_DEFAULT_SECRET_KEY: ${S3_SECRET_KEY:-7d37d093435a41f2aab8f13c19ba067d9776c90215f56614adad6ece597dbb34}
+      GARAGE_DEFAULT_SECRET_KEY: ${S3_SECRET_KEY}
       GARAGE_DEFAULT_BUCKET: ${S3_BUCKET:-beenvoice-receipts}
       SERVICE_FQDN_GARAGE_3900:
     configs:
@@ -56,7 +56,7 @@ configs:
 
       rpc_bind_addr = "[::]:3901"
       rpc_public_addr = "garage:3901"
-      rpc_secret = "000102030405060708090a0b0c0d0e0f101112131415161718191a1b1c1d1e1f"
+      rpc_secret = "rpc_secret_change_me_in_production"
 
       [s3_api]
       s3_region = "garage"

docker-compose.coolify.yml

@@ -38,8 +38,8 @@ services:
       AUTHENTIK_ORIGIN: ${AUTHENTIK_ORIGIN:-}
       S3_ENDPOINT: http://garage:3900
       S3_BUCKET: ${S3_BUCKET:-beenvoice-receipts}
-      S3_ACCESS_KEY: ${S3_ACCESS_KEY:-GK3515373e4c851ebaad366558}
+      S3_ACCESS_KEY: ${S3_ACCESS_KEY}
-      S3_SECRET_KEY: ${S3_SECRET_KEY:-7d37d093435a41f2aab8f13c19ba067d9776c90215f56614adad6ece597dbb34}
+      S3_SECRET_KEY: ${S3_SECRET_KEY}
       S3_REGION: ${S3_REGION:-garage}
     expose:
       - "3000"
@@ -69,8 +69,8 @@ services:
   garage:
     image: dxflrs/garage:v2.3.0
     environment:
-      GARAGE_DEFAULT_ACCESS_KEY: ${S3_ACCESS_KEY:-GK3515373e4c851ebaad366558}
+      GARAGE_DEFAULT_ACCESS_KEY: ${S3_ACCESS_KEY}
-      GARAGE_DEFAULT_SECRET_KEY: ${S3_SECRET_KEY:-7d37d093435a41f2aab8f13c19ba067d9776c90215f56614adad6ece597dbb34}
+      GARAGE_DEFAULT_SECRET_KEY: ${S3_SECRET_KEY}
       GARAGE_DEFAULT_BUCKET: ${S3_BUCKET:-beenvoice-receipts}
       SERVICE_FQDN_GARAGE_3900:
     configs:
@@ -105,7 +105,7 @@ configs:
 
       rpc_bind_addr = "[::]:3901"
       rpc_public_addr = "garage:3901"
-      rpc_secret = "000102030405060708090a0b0c0d0e0f101112131415161718191a1b1c1d1e1f"
+      rpc_secret = "rpc_secret_change_me_in_production"
 
       [s3_api]
       s3_region = "garage"

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">
-          <CardTitle className="flex items-center gap-2">
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-            <Receipt className="h-5 w-5" /> All Expenses
+            <div>
-          </CardTitle>
+              <CardTitle className="flex items-center gap-2">
+                <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">
-                      <p className="font-semibold sm:text-right">
+                      {formatCurrency(expense.amount, expense.currency)}
-                        {formatCurrency(expense.amount, expense.currency)}
+                    </p>
-                      </p>
+
-                      <div
+                    <div
-                        className="flex flex-shrink-0 items-center gap-1 sm:gap-2"
+                      className="flex justify-end"
-                        onClick={(e) => e.stopPropagation()}
+                      onClick={(e) => e.stopPropagation()}
-                      >
+                    >
-                        <Button
+                      <DropdownMenu>
-                          variant="ghost"
+                        <DropdownMenuTrigger asChild>
-                          size="sm"
+                          <Button
-                          className="h-8 w-8 p-0"
+                            variant="ghost"
-                          onClick={() => handleView(expense)}
+                            size="sm"
-                          title="View expense"
+                            className="h-9 w-9 p-0"
-                        >
+                            aria-label={`Actions for ${expense.description}`}
-                          <Eye className="h-3.5 w-3.5" />
+                          >
-                        </Button>
+                            <MoreHorizontal className="h-4 w-4" />
-                        <Button
+                          </Button>
-                          variant="ghost"
+                        </DropdownMenuTrigger>
-                          size="sm"
+                        <DropdownMenuContent align="end">
-                          className="h-8 w-8 p-0"
+                          <DropdownMenuItem onClick={() => handleView(expense)}>
-                          onClick={() => handleEdit(expense)}
+                            <Receipt className="mr-2 h-4 w-4" />
-                          title="Edit expense"
+                            View details
-                        >
+                          </DropdownMenuItem>
-                          <Pencil className="h-3.5 w-3.5" />
+                          <DropdownMenuItem onClick={() => handleEdit(expense)}>
-                        </Button>
+                            <Pencil className="mr-2 h-4 w-4" />
-                        <Button
+                            Edit
-                          variant="ghost"
+                          </DropdownMenuItem>
-                          size="sm"
+                          <DropdownMenuItem
-                          className="text-destructive h-8 w-8 p-0"
+                            variant="destructive"
-                          onClick={() => setDeleteId(expense.id)}
+                            onClick={() => setDeleteId(expense.id)}
-                          title="Delete expense"
+                          >
-                        >
+                            <Trash2 className="mr-2 h-4 w-4" />
-                          <Trash2 className="h-3.5 w-3.5" />
+                            Delete
-                        </Button>
+                          </DropdownMenuItem>
-                      </div>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
                     </div>
                   </div>
                 ))}
@@ -540,163 +643,171 @@ export default function ExpensesPage() {
               </div>
             ) : (
               <>
-            <div className="space-y-2">
+                <div className="space-y-2">
-              <Label>Description *</Label>
+                  <Label>Description *</Label>
-              <Input
+                  <Input
-                value={form.description}
+                    value={form.description}
-                onChange={(e) =>
+                    onChange={(e) =>
-                  setForm((p) => ({ ...p, description: e.target.value }))
+                      setForm((p) => ({ ...p, description: e.target.value }))
-                }
+                    }
-                placeholder="e.g. Laptop charger"
+                    placeholder="e.g. Laptop charger"
-              />
+                  />
-            </div>
+                </div>
-            <div className="grid grid-cols-2 gap-3">
+                <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-2">
+                  <div className="space-y-2">
-                <Label>Amount *</Label>
+                    <Label>Amount *</Label>
-                <NumberInput
+                    <NumberInput
-                  value={form.amount}
+                      value={form.amount}
-                  onChange={(v) => setForm((p) => ({ ...p, amount: v }))}
+                      onChange={(v) => setForm((p) => ({ ...p, amount: v }))}
-                  min={0}
+                      min={0}
-                  step={0.01}
+                      step={0.01}
-                />
+                    />
-              </div>
+                  </div>
-              <div className="space-y-2">
+                  <div className="space-y-2">
-                <Label>Currency</Label>
+                    <Label>Currency</Label>
-                <Select
+                    <Select
-                  value={form.currency}
+                      value={form.currency}
-                  onValueChange={(v) => setForm((p) => ({ ...p, currency: v }))}
+                      onValueChange={(v) =>
-                >
+                        setForm((p) => ({ ...p, currency: v }))
-                  <SelectTrigger>
+                      }
-                    <SelectValue />
+                    >
-                  </SelectTrigger>
+                      <SelectTrigger>
-                  <SelectContent>
+                        <SelectValue />
-                    {SUPPORTED_CURRENCIES.map((c) => (
+                      </SelectTrigger>
-                      <SelectItem key={c.code} value={c.code}>
+                      <SelectContent>
-                        {c.code}
+                        {SUPPORTED_CURRENCIES.map((c) => (
-                      </SelectItem>
+                          <SelectItem key={c.code} value={c.code}>
-                    ))}
+                            {c.code}
-                  </SelectContent>
+                          </SelectItem>
-                </Select>
+                        ))}
-              </div>
+                      </SelectContent>
-            </div>
+                    </Select>
-            <div className="grid grid-cols-2 gap-3">
+                  </div>
-              <div className="space-y-2">
+                </div>
-                <Label>Date</Label>
+                <div className="grid grid-cols-2 gap-3">
-                <DatePicker
+                  <div className="space-y-2">
-                  date={form.date}
+                    <Label>Date</Label>
-                  onDateChange={(d) =>
+                    <DatePicker
-                    setForm((p) => ({ ...p, date: d ?? new Date() }))
+                      date={form.date}
-                  }
+                      onDateChange={(d) =>
-                  className="w-full"
+                        setForm((p) => ({ ...p, date: d ?? new Date() }))
-                />
+                      }
-              </div>
+                      className="w-full"
-              <div className="space-y-2">
+                    />
-                <Label>Category</Label>
+                  </div>
-                <Select
+                  <div className="space-y-2">
-                  value={form.category || "none"}
+                    <Label>Category</Label>
-                  onValueChange={(v) =>
+                    <Select
-                    setForm((p) => ({ ...p, category: v === "none" ? "" : v }))
+                      value={form.category || "none"}
-                  }
+                      onValueChange={(v) =>
-                >
+                        setForm((p) => ({
-                  <SelectTrigger>
+                          ...p,
-                    <SelectValue placeholder="Select…" />
+                          category: v === "none" ? "" : v,
-                  </SelectTrigger>
+                        }))
-                  <SelectContent>
+                      }
-                    <SelectItem value="none">None</SelectItem>
+                    >
-                    {EXPENSE_CATEGORIES.map((c) => (
+                      <SelectTrigger>
-                      <SelectItem key={c} value={c}>
+                        <SelectValue placeholder="Select…" />
-                        {c}
+                      </SelectTrigger>
-                      </SelectItem>
+                      <SelectContent>
-                    ))}
+                        <SelectItem value="none">None</SelectItem>
-                  </SelectContent>
+                        {EXPENSE_CATEGORIES.map((c) => (
-                </Select>
+                          <SelectItem key={c} value={c}>
-              </div>
+                            {c}
-            </div>
+                          </SelectItem>
-            <div className="space-y-2">
+                        ))}
-              <Label>Business</Label>
+                      </SelectContent>
-              <Select
+                    </Select>
-                value={form.businessId || "none"}
+                  </div>
-                onValueChange={(v) =>
+                </div>
-                  setForm((p) => ({
+                <div className="space-y-2">
-                    ...p,
+                  <Label>Business</Label>
-                    businessId: v === "none" ? "" : v,
+                  <Select
-                  }))
+                    value={form.businessId || "none"}
-                }
+                    onValueChange={(v) =>
-              >
+                      setForm((p) => ({
-                <SelectTrigger>
+                        ...p,
-                  <SelectValue placeholder="Select business" />
+                        businessId: v === "none" ? "" : v,
-                </SelectTrigger>
+                      }))
-                <SelectContent>
+                    }
-                  <SelectItem value="none">Default business</SelectItem>
+                  >
-                  {businesses.map((b) => (
+                    <SelectTrigger>
-                    <SelectItem key={b.id} value={b.id}>
+                      <SelectValue placeholder="Select business" />
-                      {b.name}
+                    </SelectTrigger>
-                      {b.isDefault ? " (default)" : ""}
+                    <SelectContent>
-                    </SelectItem>
+                      <SelectItem value="none">Default business</SelectItem>
-                  ))}
+                      {businesses.map((b) => (
-                </SelectContent>
+                        <SelectItem key={b.id} value={b.id}>
-              </Select>
+                          {b.name}
-            </div>
+                          {b.isDefault ? " (default)" : ""}
-            <div className="space-y-2">
+                        </SelectItem>
-              <Label>Client (optional)</Label>
+                      ))}
-              <Select
+                    </SelectContent>
-                value={form.clientId || "none"}
+                  </Select>
-                onValueChange={(v) =>
+                </div>
-                  setForm((p) => ({ ...p, clientId: v === "none" ? "" : v }))
+                <div className="space-y-2">
-                }
+                  <Label>Client (optional)</Label>
-              >
+                  <Select
-                <SelectTrigger>
+                    value={form.clientId || "none"}
-                  <SelectValue placeholder="No client" />
+                    onValueChange={(v) =>
-                </SelectTrigger>
+                      setForm((p) => ({
-                <SelectContent>
+                        ...p,
-                  <SelectItem value="none">No client</SelectItem>
+                        clientId: v === "none" ? "" : v,
-                  {clients.map((c) => (
+                      }))
-                    <SelectItem key={c.id} value={c.id}>
+                    }
-                      {c.name}
+                  >
-                    </SelectItem>
+                    <SelectTrigger>
-                  ))}
+                      <SelectValue placeholder="No client" />
-                </SelectContent>
+                    </SelectTrigger>
-              </Select>
+                    <SelectContent>
-            </div>
+                      <SelectItem value="none">No client</SelectItem>
-            <div className="flex flex-wrap gap-6">
+                      {clients.map((c) => (
-              <label className="flex cursor-pointer items-center gap-2">
+                        <SelectItem key={c.id} value={c.id}>
-                <Checkbox
+                          {c.name}
-                  checked={form.billable}
+                        </SelectItem>
-                  onCheckedChange={(v) =>
+                      ))}
-                    setForm((p) => ({ ...p, billable: !!v }))
+                    </SelectContent>
-                  }
+                  </Select>
-                />
+                </div>
-                <span className="text-sm">Billable</span>
+                <div className="flex flex-wrap gap-6">
-              </label>
+                  <label className="flex cursor-pointer items-center gap-2">
-              <label className="flex cursor-pointer items-center gap-2">
+                    <Checkbox
-                <Checkbox
+                      checked={form.billable}
-                  checked={form.reimbursable}
+                      onCheckedChange={(v) =>
-                  onCheckedChange={(v) =>
+                        setForm((p) => ({ ...p, billable: !!v }))
-                    setForm((p) => ({ ...p, reimbursable: !!v }))
+                      }
-                  }
+                    />
-                />
+                    <span className="text-sm">Billable</span>
-                <span className="text-sm">Reimbursable</span>
+                  </label>
-              </label>
+                  <label className="flex cursor-pointer items-center gap-2">
-              <label className="flex cursor-pointer items-center gap-2">
+                    <Checkbox
-                <Checkbox
+                      checked={form.reimbursable}
-                  checked={form.taxDeductible}
+                      onCheckedChange={(v) =>
-                  onCheckedChange={(v) =>
+                        setForm((p) => ({ ...p, reimbursable: !!v }))
-                    setForm((p) => ({ ...p, taxDeductible: !!v }))
+                      }
-                  }
+                    />
-                />
+                    <span className="text-sm">Reimbursable</span>
-                <span className="text-sm">Tax Deductible</span>
+                  </label>
-              </label>
+                  <label className="flex cursor-pointer items-center gap-2">
-            </div>
+                    <Checkbox
-            <div className="space-y-2">
+                      checked={form.taxDeductible}
-              <Label>Notes (optional)</Label>
+                      onCheckedChange={(v) =>
-              <Input
+                        setForm((p) => ({ ...p, taxDeductible: !!v }))
-                value={form.notes}
+                      }
-                onChange={(e) =>
+                    />
-                  setForm((p) => ({ ...p, notes: e.target.value }))
+                    <span className="text-sm">Tax Deductible</span>
-                }
+                  </label>
-                placeholder="Additional details…"
+                </div>
-              />
+                <div className="space-y-2">
-            </div>
+                  <Label>Notes (optional)</Label>
+                  <Input
+                    value={form.notes}
+                    onChange={(e) =>
+                      setForm((p) => ({ ...p, notes: e.target.value }))
+                    }
+                    placeholder="Additional details…"
+                  />
+                </div>
               </>
             )}
 
@@ -715,19 +826,19 @@ export default function ExpensesPage() {
               </>
             ) : (
               <>
-            <Button variant="outline" onClick={closeDialog}>
+                <Button variant="outline" onClick={closeDialog}>
-              Cancel
+                  Cancel
-            </Button>
+                </Button>
-            <Button
+                <Button
-              onClick={handleSubmit}
+                  onClick={handleSubmit}
-              disabled={create.isPending || update.isPending}
+                  disabled={create.isPending || update.isPending}
-            >
+                >
-              {create.isPending || update.isPending
+                  {create.isPending || update.isPending
-                ? "Saving…"
+                    ? "Saving…"
-                : isEditMode
+                    : isEditMode
-                  ? "Update"
+                      ? "Update"
-                  : "Save & add receipts"}
+                      : "Save & add receipts"}
-            </Button>
+                </Button>
               </>
             )}
           </DialogFooter>