Vijayakanth Manoharan
012385e9e1
- Add @custom-variant dark in globals.css for class-based dark mode - Add ThemeToggle component with localStorage persistence and system preference fallback - Inject blocking inline script in layout to prevent flash on load - Apply dark: variants across all components (layout, site-nav, home-dashboard, expense-workspace, paycheck-workspace, recurring-expense-manager) and page headers - Create openspec/changes/theming-dark-mode with proposal, design, and tasks artifacts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
26 lines
1.1 KiB
TypeScript
26 lines
1.1 KiB
TypeScript
import { ExpenseWorkspace } from "@/components/expense-workspace";
|
|
import { RecurringExpenseManager } from "@/components/recurring-expense-manager";
|
|
import { CATEGORY_OPTIONS } from "@/lib/categories";
|
|
|
|
export const metadata = {
|
|
title: "Add Expense | Monthy Tracker",
|
|
};
|
|
|
|
export default function AddExpensePage() {
|
|
return (
|
|
<div className="space-y-8">
|
|
<header className="max-w-2xl space-y-3">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-amber-700 dark:text-amber-500">Add Expense</p>
|
|
<h1 className="text-4xl font-semibold text-stone-950 dark:text-white">Capture spending while it still feels fresh.</h1>
|
|
<p className="text-lg leading-8 text-stone-600 dark:text-stone-400">
|
|
Enter the shop name and the app can auto-fill a category locally for known merchants, with offline AI help for unfamiliar ones.
|
|
</p>
|
|
</header>
|
|
|
|
<RecurringExpenseManager categoryOptions={CATEGORY_OPTIONS.map((option) => ({ ...option }))} />
|
|
|
|
<ExpenseWorkspace categoryOptions={CATEGORY_OPTIONS.map((option) => ({ ...option }))} />
|
|
</div>
|
|
);
|
|
}
|