Polish expenses dashboard

Remove default access and secret keys for S3 in Docker Compose files for security enhancement
2026-06-29 01:30:20 -04:00 · 2026-06-29 01:15:05 -04:00
3 changed files with 352 additions and 241 deletions
@@ -21,8 +21,8 @@ services:
  garage:
    image: dxflrs/garage:v2.3.0
    environment:
-      GARAGE_DEFAULT_ACCESS_KEY: ${S3_ACCESS_KEY:-GK3515373e4c851ebaad366558}
-      GARAGE_DEFAULT_SECRET_KEY: ${S3_SECRET_KEY:-7d37d093435a41f2aab8f13c19ba067d9776c90215f56614adad6ece597dbb34}
+      GARAGE_DEFAULT_ACCESS_KEY: ${S3_ACCESS_KEY}
+      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"
@@ -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_SECRET_KEY: ${S3_SECRET_KEY:-7d37d093435a41f2aab8f13c19ba067d9776c90215f56614adad6ece597dbb34}
+      S3_ACCESS_KEY: ${S3_ACCESS_KEY}
+      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_SECRET_KEY: ${S3_SECRET_KEY:-7d37d093435a41f2aab8f13c19ba067d9776c90215f56614adad6ece597dbb34}
+      GARAGE_DEFAULT_ACCESS_KEY: ${S3_ACCESS_KEY}
+      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"
@@ -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"
-                          onClick={() => handleView(expense)}
-                          title="View expense"
+                            className="h-9 w-9 p-0"
+                            aria-label={`Actions for ${expense.description}`}
                          >
-                          <Eye className="h-3.5 w-3.5" />
+                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-8 w-8 p-0"
-                          onClick={() => handleEdit(expense)}
-                          title="Edit expense"
-                        >
-                          <Pencil className="h-3.5 w-3.5" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="text-destructive h-8 w-8 p-0"
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem onClick={() => handleView(expense)}>
+                            <Receipt className="mr-2 h-4 w-4" />
+                            View details
+                          </DropdownMenuItem>
+                          <DropdownMenuItem onClick={() => handleEdit(expense)}>
+                            <Pencil className="mr-2 h-4 w-4" />
+                            Edit
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            variant="destructive"
                            onClick={() => setDeleteId(expense.id)}
-                          title="Delete expense"
                          >
-                          <Trash2 className="h-3.5 w-3.5" />
-                        </Button>
-                      </div>
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            Delete
+                          </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>
Author	SHA1	Message	Date
soconnor	d0c916d659	Polish expenses dashboard	2026-06-29 01:30:20 -04:00
soconnor	a66d05f24f	Remove default access and secret keys for S3 in Docker Compose files for security enhancement	2026-06-29 01:15:05 -04:00