Implement expense tracking foundation for v1

src/app/add-expense/page.tsx

@@ -0,0 +1,22 @@
+import { ExpenseWorkspace } from "@/components/expense-workspace";
+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">Add Expense</p>
+        <h1 className="text-4xl font-semibold text-stone-950">Capture spending while it still feels fresh.</h1>
+        <p className="text-lg leading-8 text-stone-600">
+          This first slice focuses on fast local entry. Each saved expense appears immediately in your running history.
+        </p>
+      </header>
+
+      <ExpenseWorkspace categoryOptions={CATEGORY_OPTIONS.map((option) => ({ ...option }))} />
+    </div>
+  );
+}

src/app/expenses/[id]/route.ts

@@ -0,0 +1,26 @@
+import { Prisma } from "@prisma/client";
+import { NextResponse } from "next/server";
+
+import { removeExpense } from "@/lib/expenses";
+
+type RouteContext = {
+  params: Promise<{ id: string }>;
+};
+
+export async function DELETE(_: Request, context: RouteContext) {
+  const { id } = await context.params;
+
+  try {
+    await removeExpense(id);
+    return new NextResponse(null, { status: 204 });
+  } catch (error) {
+    if (
+      error instanceof Prisma.PrismaClientKnownRequestError &&
+      error.code === "P2025"
+    ) {
+      return NextResponse.json({ error: "Expense not found." }, { status: 404 });
+    }
+
+    throw error;
+  }
+}

src/app/expenses/route.ts

@@ -0,0 +1,30 @@
+import { NextResponse } from "next/server";
+
+import { createExpense, listExpenses } from "@/lib/expenses";
+import { expenseInputSchema } from "@/lib/validation";
+
+export async function GET() {
+  const expenses = await listExpenses();
+  return NextResponse.json({ expenses });
+}
+
+export async function POST(request: Request) {
+  const payload = await request.json();
+  const parsed = expenseInputSchema.safeParse(payload);
+
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: parsed.error.issues[0]?.message ?? "Invalid expense payload." },
+      { status: 400 },
+    );
+  }
+
+  const expense = await createExpense({
+    title: parsed.data.title,
+    amountCents: parsed.data.amount,
+    date: parsed.data.date,
+    category: parsed.data.category,
+  });
+
+  return NextResponse.json({ expense }, { status: 201 });
+}

src/app/globals.css

@@ -0,0 +1,41 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: #fbfaf7;
+  --color-foreground: #1c1917;
+  --font-sans: var(--font-body);
+  --font-heading: var(--font-heading);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-body), sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--font-heading), serif;
+}
+
+a,
+button,
+input,
+select {
+  transition-duration: 180ms;
+}

src/app/income/page.tsx

@@ -0,0 +1,15 @@
+export const metadata = {
+  title: "Income & Paychecks | Monthy Tracker",
+};
+
+export default function IncomePage() {
+  return (
+    <div className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-[0_24px_60px_rgba(120,90,50,0.08)]">
+      <p className="text-sm font-semibold uppercase tracking-[0.28em] text-stone-500">Coming next</p>
+      <h1 className="mt-3 text-4xl font-semibold text-stone-950">Paycheck tracking lands in the next implementation slice.</h1>
+      <p className="mt-4 max-w-2xl text-lg leading-8 text-stone-600">
+        The data model is already prepared for paychecks. This view will add create, list, and delete flows after expense tracking is validated.
+      </p>
+    </div>
+  );
+}

src/app/layout.tsx

@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+import { Fraunces, Manrope } from "next/font/google";
+
+import { SiteNav } from "@/components/site-nav";
+
+import "./globals.css";
+
+const headingFont = Fraunces({
+  variable: "--font-heading",
+  subsets: ["latin"],
+});
+
+const bodyFont = Manrope({
+  variable: "--font-body",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Monthy Tracker",
+  description: "Local-first monthly expense tracking with AI insights.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${headingFont.variable} ${bodyFont.variable} h-full antialiased`}
+    >
+      <body className="min-h-full bg-[linear-gradient(180deg,#f8f3ea_0%,#f5efe4_28%,#fbfaf7_100%)] text-stone-950">
+        <div className="mx-auto flex min-h-full w-full max-w-7xl flex-col px-4 py-6 sm:px-6 lg:px-8">
+          <header className="mb-10 flex flex-col gap-4 rounded-[2rem] border border-white/70 bg-white/80 px-6 py-5 shadow-[0_20px_50px_rgba(120,90,50,0.08)] backdrop-blur sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.28em] text-amber-700">Monthy Tracker</p>
+              <p className="mt-2 text-lg text-stone-600">Track the month as it unfolds, not after it slips away.</p>
+            </div>
+            <SiteNav />
+          </header>
+          <main className="flex-1 pb-10">{children}</main>
+        </div>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,94 @@
+import Link from "next/link";
+import { unstable_noStore as noStore } from "next/cache";
+
+import { getCategoryLabel } from "@/lib/categories";
+import { getMonthLabel } from "@/lib/date";
+import { getExpenseDashboardPreview } from "@/lib/expenses";
+import { formatCurrencyFromCents } from "@/lib/money";
+
+export const dynamic = "force-dynamic";
+
+export default async function Home() {
+  noStore();
+  const preview = await getExpenseDashboardPreview();
+
+  return (
+    <div className="space-y-10">
+      <section className="grid gap-6 rounded-[2rem] border border-stone-200 bg-[radial-gradient(circle_at_top_left,_rgba(251,191,36,0.26),_transparent_32%),linear-gradient(135deg,#fffaf2,#f3efe7)] p-8 shadow-[0_28px_70px_rgba(120,90,50,0.10)] lg:grid-cols-[1.2fr_0.8fr]">
+        <div className="space-y-5">
+          <p className="text-sm font-semibold uppercase tracking-[0.28em] text-amber-700">Monthly Expense Tracker</p>
+          <h1 className="max-w-3xl text-5xl font-semibold leading-tight text-stone-950">
+            A calm local-first home for everyday spending.
+          </h1>
+          <p className="max-w-2xl text-lg leading-8 text-stone-600">
+            The dashboard is starting with the expense-tracking slice first: fast entry, visible history, and a live pulse on the current month.
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <Link
+              href="/add-expense"
+              className="rounded-full bg-stone-950 px-5 py-3 text-sm font-semibold text-white transition hover:bg-stone-800"
+            >
+              Add an expense
+            </Link>
+            <Link
+              href="/income"
+              className="rounded-full border border-stone-300 bg-white px-5 py-3 text-sm font-semibold text-stone-800 transition hover:border-stone-900"
+            >
+              View paycheck plan
+            </Link>
+          </div>
+        </div>
+
+        <div className="rounded-[1.75rem] border border-white/80 bg-white/90 p-6">
+          <p className="text-sm font-semibold uppercase tracking-[0.24em] text-stone-500">This month</p>
+          <h2 className="mt-2 text-3xl font-semibold text-stone-950">{getMonthLabel(preview.month)}</h2>
+          <div className="mt-6 grid gap-4 sm:grid-cols-2">
+            <article className="rounded-3xl bg-stone-950 px-4 py-5 text-white">
+              <p className="text-xs uppercase tracking-[0.2em] text-stone-300">Total spent</p>
+              <p className="mt-3 text-3xl font-semibold">{formatCurrencyFromCents(preview.totalSpentCents)}</p>
+            </article>
+            <article className="rounded-3xl bg-amber-50 px-4 py-5 text-stone-950">
+              <p className="text-xs uppercase tracking-[0.2em] text-amber-700">Entries logged</p>
+              <p className="mt-3 text-3xl font-semibold">{preview.expenseCount}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-[0_24px_60px_rgba(120,90,50,0.08)]">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <p className="text-sm font-semibold uppercase tracking-[0.24em] text-stone-500">Recent expense pulse</p>
+            <h2 className="mt-2 text-3xl font-semibold text-stone-950">Latest entries</h2>
+          </div>
+          <Link href="/add-expense" className="text-sm font-semibold text-amber-800 transition hover:text-stone-950">
+            Manage expenses
+          </Link>
+        </div>
+
+        <div className="mt-6 grid gap-3">
+          {preview.recentExpenses.length === 0 ? (
+            <div className="rounded-3xl border border-dashed border-stone-300 px-4 py-10 text-center text-stone-600">
+              No expenses recorded yet. Start with one quick entry.
+            </div>
+          ) : (
+            preview.recentExpenses.map((expense) => (
+              <article
+                key={expense.id}
+                className="flex flex-wrap items-center justify-between gap-3 rounded-3xl border border-stone-200 bg-[#fffcf7] px-4 py-4"
+              >
+                <div>
+                  <p className="font-semibold text-stone-950">{expense.title}</p>
+                  <p className="mt-1 text-sm text-stone-600">
+                    {expense.date} · {getCategoryLabel(expense.category)}
+                  </p>
+                </div>
+                <p className="font-semibold text-stone-950">{formatCurrencyFromCents(expense.amountCents)}</p>
+              </article>
+            ))
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}

src/components/expense-workspace.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useEffect, useMemo, useState, type FormEvent } from "react";
+
+import { getCategoryLabel, type CategoryValue } from "@/lib/categories";
+import { formatCurrencyFromCents } from "@/lib/money";
+
+type ExpenseRecord = {
+  id: string;
+  title: string;
+  amountCents: number;
+  date: string;
+  category: CategoryValue;
+};
+
+type CategoryOption = {
+  value: string;
+  label: string;
+};
+
+type Props = {
+  categoryOptions: CategoryOption[];
+};
+
+export function ExpenseWorkspace({ categoryOptions }: Props) {
+  const [expenses, setExpenses] = useState<ExpenseRecord[]>([]);
+  const [formState, setFormState] = useState({
+    title: "",
+    amount: "",
+    date: new Date().toISOString().slice(0, 10),
+    category: categoryOptions[0]?.value ?? "",
+  });
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function loadExpenses() {
+      const response = await fetch("/expenses", { cache: "no-store" });
+      const payload = (await response.json()) as { expenses?: ExpenseRecord[] };
+      setExpenses(payload.expenses ?? []);
+    }
+
+    void loadExpenses();
+  }, []);
+
+  const totalSpent = useMemo(
+    () => expenses.reduce((sum, expense) => sum + expense.amountCents, 0),
+    [expenses],
+  );
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setBusy(true);
+    setError(null);
+
+    const response = await fetch("/expenses", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(formState),
+    });
+
+    setBusy(false);
+
+    if (!response.ok) {
+      const payload = (await response.json().catch(() => null)) as { error?: string } | null;
+      setError(payload?.error ?? "Could not save the expense.");
+      return;
+    }
+
+    const payload = (await response.json()) as { expense: ExpenseRecord };
+    setExpenses((current) => [payload.expense, ...current]);
+
+    setFormState((current) => ({ ...current, title: "", amount: "" }));
+  }
+
+  async function handleDelete(id: string) {
+    setBusy(true);
+    setError(null);
+
+    const response = await fetch(`/expenses/${id}`, { method: "DELETE" });
+
+    setBusy(false);
+
+    if (!response.ok) {
+      setError("Could not delete the expense.");
+      return;
+    }
+
+    setExpenses((current) => current.filter((expense) => expense.id !== id));
+  }
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
+      <section className="rounded-[2rem] border border-stone-200 bg-white p-6 shadow-[0_24px_60px_rgba(120,90,50,0.08)]">
+        <div className="mb-6 flex items-center justify-between gap-4">
+          <div>
+            <p className="text-sm font-semibold uppercase tracking-[0.24em] text-amber-700">Daily entry</p>
+            <h2 className="mt-2 text-3xl font-semibold text-stone-950">Log today&apos;s spend in seconds</h2>
+          </div>
+          <div className="rounded-2xl bg-amber-50 px-4 py-3 text-right">
+            <p className="text-xs uppercase tracking-[0.2em] text-amber-700">Current list total</p>
+            <p className="mt-1 text-2xl font-semibold text-stone-950">{formatCurrencyFromCents(totalSpent)}</p>
+          </div>
+        </div>
+
+        <form className="grid gap-4 md:grid-cols-2" onSubmit={handleSubmit}>
+          <label className="grid gap-2 text-sm font-medium text-stone-700 md:col-span-2">
+            Title
+            <input
+              required
+              value={formState.title}
+              onChange={(event) => setFormState((current) => ({ ...current, title: event.target.value }))}
+              className="rounded-2xl border border-stone-300 bg-stone-50 px-4 py-3 outline-none transition focus:border-stone-900"
+              placeholder="Groceries, rent, train pass..."
+            />
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium text-stone-700">
+            Amount
+            <input
+              required
+              inputMode="decimal"
+              value={formState.amount}
+              onChange={(event) => setFormState((current) => ({ ...current, amount: event.target.value }))}
+              className="rounded-2xl border border-stone-300 bg-stone-50 px-4 py-3 outline-none transition focus:border-stone-900"
+              placeholder="42.50"
+            />
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium text-stone-700">
+            Date
+            <input
+              required
+              type="date"
+              value={formState.date}
+              onChange={(event) => setFormState((current) => ({ ...current, date: event.target.value }))}
+              className="rounded-2xl border border-stone-300 bg-stone-50 px-4 py-3 outline-none transition focus:border-stone-900"
+            />
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium text-stone-700 md:col-span-2">
+            Category
+            <select
+              value={formState.category}
+              onChange={(event) => setFormState((current) => ({ ...current, category: event.target.value }))}
+              className="rounded-2xl border border-stone-300 bg-stone-50 px-4 py-3 outline-none transition focus:border-stone-900"
+            >
+              {categoryOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <div className="md:col-span-2 flex items-center justify-between gap-3">
+            <p className="text-sm text-rose-700">{error}</p>
+            <button
+              type="submit"
+              disabled={busy}
+              className="rounded-full bg-stone-950 px-5 py-3 text-sm font-semibold text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:bg-stone-400"
+            >
+              {busy ? "Saving..." : "Save expense"}
+            </button>
+          </div>
+        </form>
+      </section>
+
+      <section className="rounded-[2rem] border border-stone-200 bg-[#fffaf2] p-6 shadow-[0_24px_60px_rgba(120,90,50,0.08)]">
+        <div className="mb-5">
+          <p className="text-sm font-semibold uppercase tracking-[0.24em] text-stone-500">Recent entries</p>
+          <h2 className="mt-2 text-2xl font-semibold text-stone-950">Expense history</h2>
+        </div>
+
+        <div className="space-y-3">
+          {expenses.length === 0 ? (
+            <div className="rounded-3xl border border-dashed border-stone-300 px-4 py-6 text-sm text-stone-600">
+              No expenses yet. Add your first entry to start the month.
+            </div>
+          ) : (
+            expenses.map((expense) => (
+              <article
+                key={expense.id}
+                className="flex items-center justify-between gap-4 rounded-3xl border border-stone-200 bg-white px-4 py-4"
+              >
+                <div>
+                  <p className="font-semibold text-stone-950">{expense.title}</p>
+                  <p className="mt-1 text-sm text-stone-600">
+                    {expense.date} · {getCategoryLabel(expense.category)}
+                  </p>
+                </div>
+                <div className="flex items-center gap-4">
+                  <p className="font-semibold text-stone-950">{formatCurrencyFromCents(expense.amountCents)}</p>
+                  <button
+                    type="button"
+                    onClick={() => handleDelete(expense.id)}
+                    className="rounded-full border border-stone-300 px-3 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-stone-600 transition hover:border-rose-400 hover:text-rose-600"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </article>
+            ))
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}

src/components/home-dashboard.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+
+import { getCategoryLabel, type CategoryValue } from "@/lib/categories";
+import { getCurrentMonthKey, getMonthLabel, isDateInMonth } from "@/lib/date";
+import { formatCurrencyFromCents } from "@/lib/money";
+
+type ExpenseRecord = {
+  id: string;
+  title: string;
+  amountCents: number;
+  date: string;
+  category: CategoryValue;
+};
+
+export function HomeDashboard() {
+  const [expenses, setExpenses] = useState<ExpenseRecord[]>([]);
+
+  useEffect(() => {
+    async function loadExpenses() {
+      const response = await fetch("/expenses", { cache: "no-store" });
+      const payload = (await response.json()) as { expenses?: ExpenseRecord[] };
+      setExpenses(payload.expenses ?? []);
+    }
+
+    void loadExpenses();
+  }, []);
+
+  const month = getCurrentMonthKey();
+  const monthExpenses = useMemo(
+    () => expenses.filter((expense) => isDateInMonth(expense.date, month)),
+    [expenses, month],
+  );
+  const recentExpenses = useMemo(() => monthExpenses.slice(0, 6), [monthExpenses]);
+  const totalSpentCents = useMemo(
+    () => monthExpenses.reduce((sum, expense) => sum + expense.amountCents, 0),
+    [monthExpenses],
+  );
+
+  return (
+    <div className="space-y-10">
+      <section className="grid gap-6 rounded-[2rem] border border-stone-200 bg-[radial-gradient(circle_at_top_left,_rgba(251,191,36,0.26),_transparent_32%),linear-gradient(135deg,#fffaf2,#f3efe7)] p-8 shadow-[0_28px_70px_rgba(120,90,50,0.10)] lg:grid-cols-[1.2fr_0.8fr]">
+        <div className="space-y-5">
+          <p className="text-sm font-semibold uppercase tracking-[0.28em] text-amber-700">Monthly Expense Tracker</p>
+          <h1 className="max-w-3xl text-5xl font-semibold leading-tight text-stone-950">
+            A calm local-first home for everyday spending.
+          </h1>
+          <p className="max-w-2xl text-lg leading-8 text-stone-600">
+            The dashboard is starting with the expense-tracking slice first: fast entry, visible history, and a live pulse on the current month.
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <Link
+              href="/add-expense"
+              className="rounded-full bg-stone-950 px-5 py-3 text-sm font-semibold text-white transition hover:bg-stone-800"
+            >
+              Add an expense
+            </Link>
+            <Link
+              href="/income"
+              className="rounded-full border border-stone-300 bg-white px-5 py-3 text-sm font-semibold text-stone-800 transition hover:border-stone-900"
+            >
+              View paycheck plan
+            </Link>
+          </div>
+        </div>
+
+        <div className="rounded-[1.75rem] border border-white/80 bg-white/90 p-6">
+          <p className="text-sm font-semibold uppercase tracking-[0.24em] text-stone-500">This month</p>
+          <h2 className="mt-2 text-3xl font-semibold text-stone-950">{getMonthLabel(month)}</h2>
+          <div className="mt-6 grid gap-4 sm:grid-cols-2">
+            <article className="rounded-3xl bg-stone-950 px-4 py-5 text-white">
+              <p className="text-xs uppercase tracking-[0.2em] text-stone-300">Total spent</p>
+              <p className="mt-3 text-3xl font-semibold">{formatCurrencyFromCents(totalSpentCents)}</p>
+            </article>
+            <article className="rounded-3xl bg-amber-50 px-4 py-5 text-stone-950">
+              <p className="text-xs uppercase tracking-[0.2em] text-amber-700">Entries logged</p>
+              <p className="mt-3 text-3xl font-semibold">{monthExpenses.length}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-[0_24px_60px_rgba(120,90,50,0.08)]">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <p className="text-sm font-semibold uppercase tracking-[0.24em] text-stone-500">Recent expense pulse</p>
+            <h2 className="mt-2 text-3xl font-semibold text-stone-950">Latest entries</h2>
+          </div>
+          <Link href="/add-expense" className="text-sm font-semibold text-amber-800 transition hover:text-stone-950">
+            Manage expenses
+          </Link>
+        </div>
+
+        <div className="mt-6 grid gap-3">
+          {recentExpenses.length === 0 ? (
+            <div className="rounded-3xl border border-dashed border-stone-300 px-4 py-10 text-center text-stone-600">
+              No expenses recorded yet. Start with one quick entry.
+            </div>
+          ) : (
+            recentExpenses.map((expense) => (
+              <article
+                key={expense.id}
+                className="flex flex-wrap items-center justify-between gap-3 rounded-3xl border border-stone-200 bg-[#fffcf7] px-4 py-4"
+              >
+                <div>
+                  <p className="font-semibold text-stone-950">{expense.title}</p>
+                  <p className="mt-1 text-sm text-stone-600">
+                    {expense.date} · {getCategoryLabel(expense.category)}
+                  </p>
+                </div>
+                <p className="font-semibold text-stone-950">{formatCurrencyFromCents(expense.amountCents)}</p>
+              </article>
+            ))
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}

src/components/site-nav.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+const links = [
+  { href: "/", label: "Dashboard" },
+  { href: "/add-expense", label: "Add Expense" },
+  { href: "/income", label: "Income / Paychecks" },
+];
+
+export function SiteNav() {
+  return (
+    <nav className="flex flex-wrap gap-3 text-sm font-semibold text-stone-700">
+      {links.map((link) => (
+        <Link
+          key={link.href}
+          href={link.href}
+          className="rounded-full border border-stone-300/80 bg-white/80 px-4 py-2 transition hover:border-stone-900 hover:text-stone-950"
+        >
+          {link.label}
+        </Link>
+      ))}
+    </nav>
+  );
+}

src/lib/categories.ts

@@ -0,0 +1,18 @@
+export const CATEGORY_OPTIONS = [
+  { value: "RENT", label: "Rent" },
+  { value: "FOOD", label: "Food" },
+  { value: "TRANSPORT", label: "Transport" },
+  { value: "BILLS", label: "Bills" },
+  { value: "SHOPPING", label: "Shopping" },
+  { value: "HEALTH", label: "Health" },
+  { value: "ENTERTAINMENT", label: "Entertainment" },
+  { value: "MISC", label: "Misc" },
+] as const;
+
+export const CATEGORY_VALUES = CATEGORY_OPTIONS.map((option) => option.value);
+
+export type CategoryValue = (typeof CATEGORY_VALUES)[number];
+
+export function getCategoryLabel(value: CategoryValue) {
+  return CATEGORY_OPTIONS.find((option) => option.value === value)?.label ?? value;
+}

src/lib/date.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+
+import { getMonthKeyFromLocalDate, isDateInMonth, isValidLocalDate, isValidMonthKey } from "@/lib/date";
+
+describe("date helpers", () => {
+  it("validates local calendar dates", () => {
+    expect(isValidLocalDate("2026-03-23")).toBe(true);
+    expect(isValidLocalDate("2026-02-31")).toBe(false);
+  });
+
+  it("derives and checks month keys", () => {
+    expect(getMonthKeyFromLocalDate("2026-03-23")).toBe("2026-03");
+    expect(isDateInMonth("2026-03-23", "2026-03")).toBe(true);
+    expect(isValidMonthKey("2026-03")).toBe(true);
+    expect(isValidMonthKey("2026-13")).toBe(false);
+  });
+});

src/lib/date.ts

@@ -0,0 +1,54 @@
+const LOCAL_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+function pad(value: number) {
+  return value.toString().padStart(2, "0");
+}
+
+export function getLocalToday() {
+  const now = new Date();
+  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+}
+
+export function getCurrentMonthKey() {
+  return getMonthKeyFromLocalDate(getLocalToday());
+}
+
+export function isValidLocalDate(date: string) {
+  if (!LOCAL_DATE_PATTERN.test(date)) {
+    return false;
+  }
+
+  const [year, month, day] = date.split("-").map(Number);
+  const candidate = new Date(year, month - 1, day);
+
+  return (
+    candidate.getFullYear() === year &&
+    candidate.getMonth() === month - 1 &&
+    candidate.getDate() === day
+  );
+}
+
+export function isValidMonthKey(month: string) {
+  if (!/^\d{4}-\d{2}$/.test(month)) {
+    return false;
+  }
+
+  const [year, numericMonth] = month.split("-").map(Number);
+  return year > 2000 && numericMonth >= 1 && numericMonth <= 12;
+}
+
+export function getMonthKeyFromLocalDate(date: string) {
+  return date.slice(0, 7);
+}
+
+export function isDateInMonth(date: string, month: string) {
+  return date.startsWith(`${month}-`);
+}
+
+export function getMonthLabel(month: string) {
+  const [year, numericMonth] = month.split("-").map(Number);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    year: "numeric",
+  }).format(new Date(year, numericMonth - 1, 1));
+}

src/lib/db.ts

@@ -0,0 +1,15 @@
+import { PrismaClient } from "@prisma/client";
+
+const globalForPrisma = globalThis as typeof globalThis & {
+  prisma?: PrismaClient;
+};
+
+export const db =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log: process.env.NODE_ENV === "development" ? ["error", "warn"] : ["error"],
+  });
+
+if (process.env.NODE_ENV !== "production") {
+  globalForPrisma.prisma = db;
+}

src/lib/expenses.ts

@@ -0,0 +1,43 @@
+import type { Category } from "@prisma/client";
+
+import { db } from "@/lib/db";
+import { getCurrentMonthKey, isDateInMonth } from "@/lib/date";
+
+export async function listExpenses() {
+  return db.expense.findMany({
+    orderBy: [{ date: "desc" }, { createdAt: "desc" }],
+  });
+}
+
+export async function createExpense(input: {
+  title: string;
+  amountCents: number;
+  date: string;
+  category: Category;
+}) {
+  return db.expense.create({
+    data: {
+      title: input.title.trim(),
+      amountCents: input.amountCents,
+      date: input.date,
+      category: input.category,
+    },
+  });
+}
+
+export async function removeExpense(id: string) {
+  return db.expense.delete({ where: { id } });
+}
+
+export async function getExpenseDashboardPreview(month = getCurrentMonthKey()) {
+  const expenses = await listExpenses();
+  const monthExpenses = expenses.filter((expense) => isDateInMonth(expense.date, month));
+  const totalSpentCents = monthExpenses.reduce((sum, expense) => sum + expense.amountCents, 0);
+
+  return {
+    month,
+    totalSpentCents,
+    expenseCount: monthExpenses.length,
+    recentExpenses: monthExpenses.slice(0, 6),
+  };
+}

src/lib/money.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+
+import { parseAmountToCents } from "@/lib/money";
+
+describe("parseAmountToCents", () => {
+  it("parses decimal currency input", () => {
+    expect(parseAmountToCents("42.50")).toBe(4250);
+  });
+
+  it("rejects invalid amounts", () => {
+    expect(parseAmountToCents("12.345")).toBeNull();
+    expect(parseAmountToCents("0")).toBeNull();
+  });
+});

src/lib/money.ts

@@ -0,0 +1,22 @@
+const AMOUNT_PATTERN = /^\d+(?:\.\d{1,2})?$/;
+
+export function parseAmountToCents(value: string | number) {
+  const normalized = typeof value === "number" ? value.toString() : value.trim();
+
+  if (!AMOUNT_PATTERN.test(normalized)) {
+    return null;
+  }
+
+  const [whole, fraction = ""] = normalized.split(".");
+  const cents = Number.parseInt(whole, 10) * 100 + Number.parseInt(fraction.padEnd(2, "0"), 10);
+
+  return Number.isSafeInteger(cents) && cents > 0 ? cents : null;
+}
+
+export function formatCurrencyFromCents(value: number) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 2,
+  }).format(value / 100);
+}

src/lib/validation.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+
+import { expenseInputSchema } from "@/lib/validation";
+
+describe("expenseInputSchema", () => {
+  it("accepts valid expense payloads", () => {
+    const parsed = expenseInputSchema.parse({
+      title: "Groceries",
+      amount: "64.32",
+      date: "2026-03-23",
+      category: "FOOD",
+    });
+
+    expect(parsed.amount).toBe(6432);
+  });
+
+  it("rejects invalid categories", () => {
+    const parsed = expenseInputSchema.safeParse({
+      title: "Groceries",
+      amount: "64.32",
+      date: "2026-03-23",
+      category: "OTHER",
+    });
+
+    expect(parsed.success).toBe(false);
+  });
+});

src/lib/validation.ts

@@ -0,0 +1,39 @@
+import { Category } from "@prisma/client";
+import { z } from "zod";
+
+import { isValidLocalDate, isValidMonthKey } from "@/lib/date";
+import { parseAmountToCents } from "@/lib/money";
+
+const amountSchema = z
+  .union([z.string(), z.number()])
+  .transform((value, ctx) => {
+    const cents = parseAmountToCents(value);
+
+    if (!cents) {
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Enter a valid amount." });
+      return z.NEVER;
+    }
+
+    return cents;
+  });
+
+const localDateSchema = z.string().refine(isValidLocalDate, "Enter a valid local date.");
+
+export const expenseInputSchema = z.object({
+  title: z.string().trim().min(1, "Title is required.").max(80, "Keep titles under 80 characters."),
+  amount: amountSchema,
+  date: localDateSchema,
+  category: z.nativeEnum(Category, { message: "Choose a valid category." }),
+});
+
+export const paycheckInputSchema = z.object({
+  amount: amountSchema,
+  payDate: localDateSchema,
+});
+
+export const monthQuerySchema = z.object({
+  month: z.string().refine(isValidMonthKey, "Use a YYYY-MM month."),
+});
+
+export type ExpenseInput = z.infer<typeof expenseInputSchema>;
+export type PaycheckInput = z.infer<typeof paycheckInputSchema>;