Polish expenses dashboard
This commit is contained in:
+344
-233
@@ -3,7 +3,10 @@
|
|||||||
import { useMemo, useState } from "react";
|
import { useMemo, useState } from "react";
|
||||||
import { api } from "~/trpc/react";
|
import { api } from "~/trpc/react";
|
||||||
import { DashboardPageHeader } from "~/components/layout/page-header";
|
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 { EmptyState } from "~/components/layout/page-layout";
|
||||||
import { Button } from "~/components/ui/button";
|
import { Button } from "~/components/ui/button";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
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 { ExpenseReceiptsPanel } from "~/components/expenses/expense-receipts-panel";
|
||||||
import { ExpenseReceiptIndicator } from "~/components/expenses/expense-receipt-indicator";
|
import { ExpenseReceiptIndicator } from "~/components/expenses/expense-receipt-indicator";
|
||||||
import { toast } from "sonner";
|
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 { formatCurrency, SUPPORTED_CURRENCIES } from "~/lib/currency";
|
||||||
import { EXPENSE_CATEGORIES } from "~/lib/expense-categories";
|
import { EXPENSE_CATEGORIES } from "~/lib/expense-categories";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "~/components/ui/dropdown-menu";
|
||||||
|
|
||||||
interface ExpenseFormData {
|
interface ExpenseFormData {
|
||||||
date: Date;
|
date: Date;
|
||||||
@@ -64,6 +80,7 @@ const defaultForm: ExpenseFormData = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
type ExpenseDialogMode = "create" | "view" | "edit";
|
type ExpenseDialogMode = "create" | "view" | "edit";
|
||||||
|
type ExpenseFilter = "all" | "billable" | "deductible" | "receipts";
|
||||||
|
|
||||||
function expenseToForm(
|
function expenseToForm(
|
||||||
expense: {
|
expense: {
|
||||||
@@ -103,6 +120,8 @@ export default function ExpensesPage() {
|
|||||||
const [form, setForm] = useState<ExpenseFormData>(defaultForm);
|
const [form, setForm] = useState<ExpenseFormData>(defaultForm);
|
||||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||||
const [businessFilter, setBusinessFilter] = useState("all");
|
const [businessFilter, setBusinessFilter] = useState("all");
|
||||||
|
const [expenseFilter, setExpenseFilter] = useState<ExpenseFilter>("all");
|
||||||
|
const [search, setSearch] = useState("");
|
||||||
|
|
||||||
const utils = api.useUtils();
|
const utils = api.useUtils();
|
||||||
const { data: businesses = [] } = api.businesses.getAll.useQuery();
|
const { data: businesses = [] } = api.businesses.getAll.useQuery();
|
||||||
@@ -192,7 +211,29 @@ export default function ExpensesPage() {
|
|||||||
else create.mutate(payload);
|
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 totalExpenses = expenses.reduce((s, e) => s + e.amount, 0);
|
||||||
|
const visibleTotal = filteredExpenses.reduce((s, e) => s + e.amount, 0);
|
||||||
const billableTotal = expenses
|
const billableTotal = expenses
|
||||||
.filter((e) => e.billable)
|
.filter((e) => e.billable)
|
||||||
.reduce((s, e) => s + e.amount, 0);
|
.reduce((s, e) => s + e.amount, 0);
|
||||||
@@ -200,6 +241,10 @@ export default function ExpensesPage() {
|
|||||||
.filter((e) => e.taxDeductible)
|
.filter((e) => e.taxDeductible)
|
||||||
.reduce((s, e) => s + e.amount, 0);
|
.reduce((s, e) => s + e.amount, 0);
|
||||||
const withReceipts = expenses.filter((e) => e.receiptCount > 0).length;
|
const withReceipts = expenses.filter((e) => e.receiptCount > 0).length;
|
||||||
|
const hasActiveFilters =
|
||||||
|
search.trim().length > 0 ||
|
||||||
|
expenseFilter !== "all" ||
|
||||||
|
businessFilter !== "all";
|
||||||
|
|
||||||
const isViewMode = dialogMode === "view";
|
const isViewMode = dialogMode === "view";
|
||||||
const isEditMode = dialogMode === "edit";
|
const isEditMode = dialogMode === "edit";
|
||||||
@@ -239,23 +284,6 @@ export default function ExpensesPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
</DashboardPageHeader>
|
</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}>
|
<div className={dashboardStatGridClass}>
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="p-4">
|
<CardContent className="p-4">
|
||||||
@@ -298,10 +326,64 @@ export default function ExpensesPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Card>
|
<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>
|
</CardHeader>
|
||||||
<CardContent className="p-0">
|
<CardContent className="p-0">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
@@ -320,16 +402,36 @@ export default function ExpensesPage() {
|
|||||||
</Button>
|
</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>Expense</span>
|
||||||
<span className="text-center">Receipts</span>
|
<span className="text-center">Receipts</span>
|
||||||
<span className="text-right">Amount</span>
|
<span className="text-right">Amount</span>
|
||||||
<span className="w-[108px]" />
|
<span />
|
||||||
</div>
|
</div>
|
||||||
<div className="divide-y">
|
<div className="divide-y">
|
||||||
{expenses.map((expense) => (
|
{filteredExpenses.map((expense) => (
|
||||||
<div
|
<div
|
||||||
key={expense.id}
|
key={expense.id}
|
||||||
role="button"
|
role="button"
|
||||||
@@ -341,7 +443,7 @@ export default function ExpensesPage() {
|
|||||||
handleView(expense);
|
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="min-w-0 flex-1">
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
@@ -400,42 +502,43 @@ export default function ExpensesPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@@ -540,163 +643,171 @@ export default function ExpensesPage() {
|
|||||||
</div>
|
</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>
|
</DialogFooter>
|
||||||
|
|||||||
Reference in New Issue
Block a user