feat: basic POS & invoicing (closes groombook/groombook#5) (#26)
- Add invoice_status and payment_method enums to schema - Add invoices table: appointmentId, clientId, subtotal/tax/tip/total cents, status (draft/pending/paid/void), paymentMethod, paidAt, notes - Add invoice_line_items table: invoiceId, description, qty, unitPrice, total - Migration 0002_invoices.sql with FK constraints and journal entry - POST /api/invoices — create invoice with line items - POST /api/invoices/from-appointment/:id — one-click invoice from appointment, pre-populated with service name and price; returns 409 if already invoiced - GET /api/invoices — list with optional ?status/clientId/appointmentId filters - GET /api/invoices/:id — invoice with line items - PATCH /api/invoices/:id — update status, payment method, tip, notes; auto-sets paidAt when marking paid; blocks edits on voided invoices - Add Invoice/InvoiceLineItem types to @groombook/types - InvoicesPage: list view with status filter, create from appointment modal, detail modal with tip input, payment method selector, Mark as Paid/Void actions - Add Invoices nav link in App.tsx Co-authored-by: Groom Book CTO <cto@groombook.app> Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit was merged in pull request #26.
This commit is contained in:
groombook-paperclip[bot]
committed by
GitHub
GitHub
parent
eb9255eee0
commit
b767a00b5f
@@ -7,6 +7,7 @@ import { petsRouter } from "./routes/pets.js";
|
||||
import { servicesRouter } from "./routes/services.js";
|
||||
import { appointmentsRouter } from "./routes/appointments.js";
|
||||
import { staffRouter } from "./routes/staff.js";
|
||||
import { invoicesRouter } from "./routes/invoices.js";
|
||||
import { authMiddleware } from "./middleware/auth.js";
|
||||
|
||||
const app = new Hono();
|
||||
@@ -33,6 +34,7 @@ api.route("/pets", petsRouter);
|
||||
api.route("/services", servicesRouter);
|
||||
api.route("/appointments", appointmentsRouter);
|
||||
api.route("/staff", staffRouter);
|
||||
api.route("/invoices", invoicesRouter);
|
||||
|
||||
const port = Number(process.env.PORT ?? 3000);
|
||||
console.log(`API server listening on port ${port}`);
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
import { Hono } from "hono";
|
||||
import { zValidator } from "@hono/zod-validator";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
and,
|
||||
eq,
|
||||
getDb,
|
||||
invoices,
|
||||
invoiceLineItems,
|
||||
appointments,
|
||||
services,
|
||||
} from "@groombook/db";
|
||||
|
||||
export const invoicesRouter = new Hono();
|
||||
|
||||
const createInvoiceSchema = z.object({
|
||||
appointmentId: z.string().uuid().optional(),
|
||||
clientId: z.string().uuid(),
|
||||
lineItems: z
|
||||
.array(
|
||||
z.object({
|
||||
description: z.string().min(1).max(500),
|
||||
quantity: z.number().int().positive().default(1),
|
||||
unitPriceCents: z.number().int().nonnegative(),
|
||||
})
|
||||
)
|
||||
.min(1),
|
||||
taxCents: z.number().int().nonnegative().default(0),
|
||||
tipCents: z.number().int().nonnegative().default(0),
|
||||
notes: z.string().max(2000).optional(),
|
||||
});
|
||||
|
||||
const updateInvoiceSchema = z.object({
|
||||
status: z.enum(["draft", "pending", "paid", "void"]).optional(),
|
||||
paymentMethod: z.enum(["cash", "card", "check", "other"]).nullable().optional(),
|
||||
paidAt: z.string().datetime().nullable().optional(),
|
||||
taxCents: z.number().int().nonnegative().optional(),
|
||||
tipCents: z.number().int().nonnegative().optional(),
|
||||
notes: z.string().max(2000).nullable().optional(),
|
||||
});
|
||||
|
||||
// List invoices
|
||||
invoicesRouter.get("/", async (c) => {
|
||||
const db = getDb();
|
||||
const clientId = c.req.query("clientId");
|
||||
const appointmentId = c.req.query("appointmentId");
|
||||
const status = c.req.query("status");
|
||||
|
||||
const conditions = [];
|
||||
if (clientId) conditions.push(eq(invoices.clientId, clientId));
|
||||
if (appointmentId) conditions.push(eq(invoices.appointmentId, appointmentId));
|
||||
if (status) conditions.push(eq(invoices.status, status as "draft" | "pending" | "paid" | "void"));
|
||||
|
||||
const rows =
|
||||
conditions.length > 0
|
||||
? await db.select().from(invoices).where(and(...conditions)).orderBy(invoices.createdAt)
|
||||
: await db.select().from(invoices).orderBy(invoices.createdAt);
|
||||
|
||||
return c.json(rows);
|
||||
});
|
||||
|
||||
// Get single invoice with line items
|
||||
invoicesRouter.get("/:id", async (c) => {
|
||||
const db = getDb();
|
||||
const id = c.req.param("id");
|
||||
|
||||
const [invoice] = await db.select().from(invoices).where(eq(invoices.id, id));
|
||||
if (!invoice) return c.json({ error: "Not found" }, 404);
|
||||
|
||||
const lineItems = await db
|
||||
.select()
|
||||
.from(invoiceLineItems)
|
||||
.where(eq(invoiceLineItems.invoiceId, id));
|
||||
|
||||
return c.json({ ...invoice, lineItems });
|
||||
});
|
||||
|
||||
// Create invoice (optionally pre-populated from an appointment)
|
||||
invoicesRouter.post(
|
||||
"/",
|
||||
zValidator("json", createInvoiceSchema),
|
||||
async (c) => {
|
||||
const db = getDb();
|
||||
const body = c.req.valid("json");
|
||||
|
||||
// If appointmentId provided, verify it exists
|
||||
if (body.appointmentId) {
|
||||
const [appt] = await db
|
||||
.select()
|
||||
.from(appointments)
|
||||
.where(eq(appointments.id, body.appointmentId));
|
||||
if (!appt) return c.json({ error: "Appointment not found" }, 404);
|
||||
}
|
||||
|
||||
const subtotalCents = body.lineItems.reduce(
|
||||
(sum, item) => sum + item.quantity * item.unitPriceCents,
|
||||
0
|
||||
);
|
||||
const totalCents = subtotalCents + body.taxCents + body.tipCents;
|
||||
|
||||
const [invoice] = await db
|
||||
.insert(invoices)
|
||||
.values({
|
||||
appointmentId: body.appointmentId ?? null,
|
||||
clientId: body.clientId,
|
||||
subtotalCents,
|
||||
taxCents: body.taxCents,
|
||||
tipCents: body.tipCents,
|
||||
totalCents,
|
||||
notes: body.notes ?? null,
|
||||
})
|
||||
.returning();
|
||||
|
||||
if (!invoice) return c.json({ error: "Failed to create invoice" }, 500);
|
||||
|
||||
const items = await db
|
||||
.insert(invoiceLineItems)
|
||||
.values(
|
||||
body.lineItems.map((item) => ({
|
||||
invoiceId: invoice.id,
|
||||
description: item.description,
|
||||
quantity: item.quantity,
|
||||
unitPriceCents: item.unitPriceCents,
|
||||
totalCents: item.quantity * item.unitPriceCents,
|
||||
}))
|
||||
)
|
||||
.returning();
|
||||
|
||||
return c.json({ ...invoice, lineItems: items }, 201);
|
||||
}
|
||||
);
|
||||
|
||||
// Create invoice from appointment (convenience endpoint)
|
||||
invoicesRouter.post("/from-appointment/:appointmentId", async (c) => {
|
||||
const db = getDb();
|
||||
const appointmentId = c.req.param("appointmentId");
|
||||
|
||||
const [appt] = await db
|
||||
.select({
|
||||
id: appointments.id,
|
||||
clientId: appointments.clientId,
|
||||
serviceId: appointments.serviceId,
|
||||
priceCents: appointments.priceCents,
|
||||
serviceName: services.name,
|
||||
serviceBasePriceCents: services.basePriceCents,
|
||||
})
|
||||
.from(appointments)
|
||||
.innerJoin(services, eq(appointments.serviceId, services.id))
|
||||
.where(eq(appointments.id, appointmentId));
|
||||
|
||||
if (!appt) return c.json({ error: "Appointment not found" }, 404);
|
||||
|
||||
// Check if invoice already exists for this appointment
|
||||
const [existing] = await db
|
||||
.select({ id: invoices.id })
|
||||
.from(invoices)
|
||||
.where(eq(invoices.appointmentId, appointmentId))
|
||||
.limit(1);
|
||||
|
||||
if (existing) {
|
||||
return c.json(
|
||||
{ error: "Invoice already exists for this appointment", invoiceId: existing.id },
|
||||
409
|
||||
);
|
||||
}
|
||||
|
||||
const unitPriceCents = appt.priceCents ?? appt.serviceBasePriceCents;
|
||||
const subtotalCents = unitPriceCents;
|
||||
const totalCents = subtotalCents;
|
||||
|
||||
const [invoice] = await db
|
||||
.insert(invoices)
|
||||
.values({
|
||||
appointmentId,
|
||||
clientId: appt.clientId,
|
||||
subtotalCents,
|
||||
taxCents: 0,
|
||||
tipCents: 0,
|
||||
totalCents,
|
||||
})
|
||||
.returning();
|
||||
|
||||
if (!invoice) return c.json({ error: "Failed to create invoice" }, 500);
|
||||
|
||||
const [lineItem] = await db
|
||||
.insert(invoiceLineItems)
|
||||
.values({
|
||||
invoiceId: invoice.id,
|
||||
description: appt.serviceName,
|
||||
quantity: 1,
|
||||
unitPriceCents,
|
||||
totalCents: unitPriceCents,
|
||||
})
|
||||
.returning();
|
||||
|
||||
return c.json({ ...invoice, lineItems: [lineItem] }, 201);
|
||||
});
|
||||
|
||||
// Update invoice
|
||||
invoicesRouter.patch(
|
||||
"/:id",
|
||||
zValidator("json", updateInvoiceSchema),
|
||||
async (c) => {
|
||||
const db = getDb();
|
||||
const id = c.req.param("id");
|
||||
const body = c.req.valid("json");
|
||||
|
||||
const [current] = await db
|
||||
.select()
|
||||
.from(invoices)
|
||||
.where(eq(invoices.id, id));
|
||||
if (!current) return c.json({ error: "Not found" }, 404);
|
||||
|
||||
if (current.status === "void") {
|
||||
return c.json({ error: "Cannot modify a voided invoice" }, 422);
|
||||
}
|
||||
|
||||
const update: Record<string, unknown> = { ...body, updatedAt: new Date() };
|
||||
|
||||
// Auto-set paidAt when marking as paid
|
||||
if (body.status === "paid" && !body.paidAt && !current.paidAt) {
|
||||
update.paidAt = new Date();
|
||||
}
|
||||
|
||||
// Recalculate total if tax or tip changed
|
||||
const newTaxCents = body.taxCents ?? current.taxCents;
|
||||
const newTipCents = body.tipCents ?? current.tipCents;
|
||||
if (body.taxCents !== undefined || body.tipCents !== undefined) {
|
||||
update.totalCents = current.subtotalCents + newTaxCents + newTipCents;
|
||||
}
|
||||
|
||||
const [updated] = await db
|
||||
.update(invoices)
|
||||
.set(update)
|
||||
.where(eq(invoices.id, id))
|
||||
.returning();
|
||||
|
||||
const lineItems = await db
|
||||
.select()
|
||||
.from(invoiceLineItems)
|
||||
.where(eq(invoiceLineItems.invoiceId, id));
|
||||
|
||||
return c.json({ ...updated, lineItems });
|
||||
}
|
||||
);
|
||||
@@ -3,12 +3,14 @@ import { AppointmentsPage } from "./pages/Appointments.js";
|
||||
import { ClientsPage } from "./pages/Clients.js";
|
||||
import { ServicesPage } from "./pages/Services.js";
|
||||
import { StaffPage } from "./pages/Staff.js";
|
||||
import { InvoicesPage } from "./pages/Invoices.js";
|
||||
|
||||
const NAV_LINKS = [
|
||||
{ to: "/", label: "Appointments" },
|
||||
{ to: "/clients", label: "Clients" },
|
||||
{ to: "/services", label: "Services" },
|
||||
{ to: "/staff", label: "Staff" },
|
||||
{ to: "/invoices", label: "Invoices" },
|
||||
];
|
||||
|
||||
export function App() {
|
||||
@@ -54,6 +56,7 @@ export function App() {
|
||||
<Route path="/clients" element={<ClientsPage />} />
|
||||
<Route path="/services" element={<ServicesPage />} />
|
||||
<Route path="/staff" element={<StaffPage />} />
|
||||
<Route path="/invoices" element={<InvoicesPage />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,520 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import type { Invoice, Client, Appointment, Service } from "@groombook/types";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface InvoiceWithClient extends Invoice {
|
||||
clientName?: string;
|
||||
}
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function fmtMoney(cents: number) {
|
||||
return `$${(cents / 100).toFixed(2)}`;
|
||||
}
|
||||
|
||||
function fmtDate(iso: string | null) {
|
||||
if (!iso) return "—";
|
||||
return new Date(iso).toLocaleDateString();
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<string, { bg: string; color: string }> = {
|
||||
draft: { bg: "#f3f4f6", color: "#6b7280" },
|
||||
pending: { bg: "#fef3c7", color: "#92400e" },
|
||||
paid: { bg: "#d1fae5", color: "#065f46" },
|
||||
void: { bg: "#fee2e2", color: "#991b1b" },
|
||||
};
|
||||
|
||||
// ─── Invoice Status Badge ─────────────────────────────────────────────────────
|
||||
|
||||
function StatusBadge({ status }: { status: string }) {
|
||||
const { bg, color } = STATUS_COLORS[status] ?? { bg: "#f3f4f6", color: "#374151" };
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
padding: "2px 8px",
|
||||
borderRadius: 12,
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
background: bg,
|
||||
color,
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
{status}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Create Invoice Form ──────────────────────────────────────────────────────
|
||||
|
||||
interface CreateFromApptProps {
|
||||
appointments: Appointment[];
|
||||
clients: Client[];
|
||||
services: Service[];
|
||||
onCreated: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function CreateFromAppointmentForm({
|
||||
appointments,
|
||||
clients,
|
||||
services,
|
||||
onCreated,
|
||||
onClose,
|
||||
}: CreateFromApptProps) {
|
||||
const [selectedApptId, setSelectedApptId] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Only show completed appointments without an invoice already
|
||||
const completedAppts = appointments.filter((a) => a.status === "completed");
|
||||
|
||||
function getClientName(clientId: string) {
|
||||
return clients.find((c) => c.id === clientId)?.name ?? clientId;
|
||||
}
|
||||
|
||||
function getServiceName(serviceId: string) {
|
||||
return services.find((s) => s.id === serviceId)?.name ?? serviceId;
|
||||
}
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!selectedApptId) return;
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/invoices/from-appointment/${selectedApptId}`, {
|
||||
method: "POST",
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = (await res.json()) as { error?: string };
|
||||
throw new Error(err.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
onCreated();
|
||||
} catch (e: unknown) {
|
||||
setError(e instanceof Error ? e.message : "Failed to create invoice");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal onClose={onClose}>
|
||||
<h2 style={{ marginTop: 0 }}>Create Invoice from Appointment</h2>
|
||||
<form onSubmit={submit}>
|
||||
<Field label="Select Appointment">
|
||||
<select
|
||||
value={selectedApptId}
|
||||
onChange={(e) => setSelectedApptId(e.target.value)}
|
||||
required
|
||||
style={inputStyle}
|
||||
>
|
||||
<option value="">— Choose a completed appointment —</option>
|
||||
{completedAppts.map((a) => (
|
||||
<option key={a.id} value={a.id}>
|
||||
{fmtDate(a.startTime)} · {getClientName(a.clientId)} · {getServiceName(a.serviceId)}
|
||||
{a.priceCents ? ` · ${fmtMoney(a.priceCents)}` : ""}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
{completedAppts.length === 0 && (
|
||||
<p style={{ color: "#6b7280", fontSize: 13 }}>
|
||||
No completed appointments available. Mark an appointment as completed first.
|
||||
</p>
|
||||
)}
|
||||
{error && <p style={{ color: "red", margin: "0.5rem 0 0" }}>{error}</p>}
|
||||
<div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving || !selectedApptId}
|
||||
style={{ ...btnStyle, backgroundColor: "#3b82f6", color: "#fff", borderColor: "#3b82f6" }}
|
||||
>
|
||||
{saving ? "Creating…" : "Create Invoice"}
|
||||
</button>
|
||||
<button type="button" onClick={onClose} style={btnStyle}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Invoice Detail Modal ─────────────────────────────────────────────────────
|
||||
|
||||
function InvoiceDetailModal({
|
||||
invoice,
|
||||
onClose,
|
||||
onUpdated,
|
||||
}: {
|
||||
invoice: Invoice;
|
||||
onClose: () => void;
|
||||
onUpdated: () => void;
|
||||
}) {
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [tipStr, setTipStr] = useState((invoice.tipCents / 100).toFixed(2));
|
||||
const [paymentMethod, setPaymentMethod] = useState<string>(invoice.paymentMethod ?? "cash");
|
||||
|
||||
async function markPaid() {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
const tipCents = Math.round(parseFloat(tipStr) * 100) || 0;
|
||||
try {
|
||||
const res = await fetch(`/api/invoices/${invoice.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
status: "paid",
|
||||
paymentMethod,
|
||||
tipCents,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = (await res.json()) as { error?: string };
|
||||
throw new Error(err.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
onUpdated();
|
||||
} catch (e: unknown) {
|
||||
setError(e instanceof Error ? e.message : "Failed to update");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function voidInvoice() {
|
||||
if (!confirm("Void this invoice? This cannot be undone.")) return;
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/invoices/${invoice.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status: "void" }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = (await res.json()) as { error?: string };
|
||||
throw new Error(err.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
onUpdated();
|
||||
} catch (e: unknown) {
|
||||
setError(e instanceof Error ? e.message : "Failed to void");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
const tipCentsCalc = Math.round(parseFloat(tipStr) * 100) || 0;
|
||||
const newTotal = invoice.subtotalCents + invoice.taxCents + tipCentsCalc;
|
||||
|
||||
return (
|
||||
<Modal onClose={onClose}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "1rem" }}>
|
||||
<h2 style={{ margin: 0 }}>Invoice</h2>
|
||||
<StatusBadge status={invoice.status} />
|
||||
</div>
|
||||
|
||||
<table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14, marginBottom: "1rem" }}>
|
||||
<thead>
|
||||
<tr style={{ background: "#f8fafc" }}>
|
||||
{["Description", "Qty", "Unit Price", "Total"].map((h) => (
|
||||
<th key={h} style={{ textAlign: "left", padding: "0.4rem 0.5rem", borderBottom: "1px solid #e2e8f0" }}>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(invoice.lineItems ?? []).map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td style={tdStyle}>{item.description}</td>
|
||||
<td style={tdStyle}>{item.quantity}</td>
|
||||
<td style={tdStyle}>{fmtMoney(item.unitPriceCents)}</td>
|
||||
<td style={tdStyle}>{fmtMoney(item.totalCents)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div style={{ borderTop: "1px solid #e2e8f0", paddingTop: "0.75rem", fontSize: 14 }}>
|
||||
<SummaryRow label="Subtotal" value={fmtMoney(invoice.subtotalCents)} />
|
||||
<SummaryRow label="Tax" value={fmtMoney(invoice.taxCents)} />
|
||||
{invoice.status !== "paid" && invoice.status !== "void" ? (
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0.25rem 0" }}>
|
||||
<span style={{ color: "#6b7280" }}>Tip</span>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={tipStr}
|
||||
onChange={(e) => setTipStr(e.target.value)}
|
||||
style={{ ...inputStyle, width: 80, textAlign: "right" }}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<SummaryRow label="Tip" value={fmtMoney(invoice.tipCents)} />
|
||||
)}
|
||||
<SummaryRow
|
||||
label="Total"
|
||||
value={fmtMoney(invoice.status !== "paid" && invoice.status !== "void" ? newTotal : invoice.totalCents)}
|
||||
bold
|
||||
/>
|
||||
{invoice.paidAt && <SummaryRow label="Paid on" value={fmtDate(invoice.paidAt)} />}
|
||||
{invoice.paymentMethod && <SummaryRow label="Payment" value={invoice.paymentMethod} />}
|
||||
</div>
|
||||
|
||||
{invoice.status !== "paid" && invoice.status !== "void" && (
|
||||
<div style={{ marginTop: "1rem", borderTop: "1px solid #e2e8f0", paddingTop: "1rem" }}>
|
||||
<Field label="Payment Method">
|
||||
<select
|
||||
value={paymentMethod}
|
||||
onChange={(e) => setPaymentMethod(e.target.value)}
|
||||
style={inputStyle}
|
||||
>
|
||||
<option value="cash">Cash</option>
|
||||
<option value="card">Card</option>
|
||||
<option value="check">Check</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</Field>
|
||||
{error && <p style={{ color: "red", margin: "0.5rem 0 0" }}>{error}</p>}
|
||||
<div style={{ display: "flex", gap: "0.5rem", marginTop: "0.75rem" }}>
|
||||
<button
|
||||
onClick={markPaid}
|
||||
disabled={saving}
|
||||
style={{ ...btnStyle, backgroundColor: "#10b981", color: "#fff", borderColor: "#10b981" }}
|
||||
>
|
||||
{saving ? "Saving…" : "Mark as Paid"}
|
||||
</button>
|
||||
<button onClick={voidInvoice} disabled={saving} style={{ ...btnStyle, color: "#dc2626", borderColor: "#dc2626" }}>
|
||||
Void
|
||||
</button>
|
||||
<button onClick={onClose} style={btnStyle}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(invoice.status === "paid" || invoice.status === "void") && (
|
||||
<div style={{ marginTop: "1rem", display: "flex", justifyContent: "flex-end" }}>
|
||||
<button onClick={onClose} style={btnStyle}>Close</button>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryRow({ label, value, bold }: { label: string; value: string; bold?: boolean }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
padding: "0.25rem 0",
|
||||
fontWeight: bold ? 700 : 400,
|
||||
fontSize: bold ? 15 : 14,
|
||||
}}
|
||||
>
|
||||
<span style={{ color: bold ? "#111827" : "#6b7280" }}>{label}</span>
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Page ────────────────────────────────────────────────────────────────
|
||||
|
||||
export function InvoicesPage() {
|
||||
const [invoiceList, setInvoiceList] = useState<InvoiceWithClient[]>([]);
|
||||
const [clients, setClients] = useState<Client[]>([]);
|
||||
const [appointments, setAppointments] = useState<Appointment[]>([]);
|
||||
const [services, setServices] = useState<Service[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [selectedInvoice, setSelectedInvoice] = useState<Invoice | null>(null);
|
||||
const [statusFilter, setStatusFilter] = useState<string>("");
|
||||
|
||||
async function loadAll() {
|
||||
const [invRes, clientRes, apptRes, svcRes] = await Promise.all([
|
||||
fetch("/api/invoices" + (statusFilter ? `?status=${statusFilter}` : "")),
|
||||
fetch("/api/clients"),
|
||||
fetch("/api/appointments"),
|
||||
fetch("/api/services?includeInactive=true"),
|
||||
]);
|
||||
|
||||
if (!invRes.ok || !clientRes.ok || !apptRes.ok || !svcRes.ok) {
|
||||
throw new Error("Failed to load data");
|
||||
}
|
||||
|
||||
const [invData, clientData, apptData, svcData] = await Promise.all([
|
||||
invRes.json() as Promise<Invoice[]>,
|
||||
clientRes.json() as Promise<Client[]>,
|
||||
apptRes.json() as Promise<Appointment[]>,
|
||||
svcRes.json() as Promise<Service[]>,
|
||||
]);
|
||||
|
||||
const clientMap = new Map(clientData.map((c) => [c.id, c.name]));
|
||||
const enriched: InvoiceWithClient[] = invData.map((inv) => ({
|
||||
...inv,
|
||||
clientName: clientMap.get(inv.clientId),
|
||||
}));
|
||||
|
||||
setInvoiceList(enriched);
|
||||
setClients(clientData);
|
||||
setAppointments(apptData);
|
||||
setServices(svcData);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
loadAll()
|
||||
.catch((e: unknown) => setError(e instanceof Error ? e.message : "Unknown error"))
|
||||
.finally(() => setLoading(false));
|
||||
}, [statusFilter]);
|
||||
|
||||
async function openInvoiceDetail(inv: InvoiceWithClient) {
|
||||
const res = await fetch(`/api/invoices/${inv.id}`);
|
||||
if (!res.ok) return;
|
||||
const data = (await res.json()) as Invoice;
|
||||
setSelectedInvoice(data);
|
||||
}
|
||||
|
||||
if (loading) return <p style={{ padding: "1rem" }}>Loading…</p>;
|
||||
if (error) return <p style={{ padding: "1rem", color: "red" }}>Error: {error}</p>;
|
||||
|
||||
return (
|
||||
<div style={{ fontFamily: "system-ui, sans-serif" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "1rem" }}>
|
||||
<h1 style={{ margin: 0 }}>Invoices</h1>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
style={{ ...inputStyle, width: "auto" }}
|
||||
>
|
||||
<option value="">All Statuses</option>
|
||||
<option value="draft">Draft</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="paid">Paid</option>
|
||||
<option value="void">Void</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
style={{ ...btnStyle, backgroundColor: "#3b82f6", color: "#fff", borderColor: "#3b82f6", marginLeft: "auto" }}
|
||||
>
|
||||
+ Create Invoice
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{invoiceList.length === 0 ? (
|
||||
<p style={{ color: "#6b7280" }}>
|
||||
No invoices yet. Create one from a completed appointment.
|
||||
</p>
|
||||
) : (
|
||||
<table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
|
||||
<thead>
|
||||
<tr style={{ background: "#f8fafc" }}>
|
||||
{["Date", "Client", "Subtotal", "Tax", "Tip", "Total", "Status", ""].map((h) => (
|
||||
<th key={h} style={{ textAlign: "left", padding: "0.5rem 0.75rem", borderBottom: "1px solid #e2e8f0" }}>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{invoiceList.map((inv) => (
|
||||
<tr key={inv.id} style={{ opacity: inv.status === "void" ? 0.5 : 1 }}>
|
||||
<td style={tdStyle}>{fmtDate(inv.createdAt)}</td>
|
||||
<td style={tdStyle}>{inv.clientName ?? "—"}</td>
|
||||
<td style={tdStyle}>{fmtMoney(inv.subtotalCents)}</td>
|
||||
<td style={tdStyle}>{fmtMoney(inv.taxCents)}</td>
|
||||
<td style={tdStyle}>{fmtMoney(inv.tipCents)}</td>
|
||||
<td style={{ ...tdStyle, fontWeight: 600 }}>{fmtMoney(inv.totalCents)}</td>
|
||||
<td style={tdStyle}>
|
||||
<StatusBadge status={inv.status} />
|
||||
</td>
|
||||
<td style={tdStyle}>
|
||||
<button onClick={() => openInvoiceDetail(inv)} style={btnStyle}>
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{showCreate && (
|
||||
<CreateFromAppointmentForm
|
||||
appointments={appointments}
|
||||
clients={clients}
|
||||
services={services}
|
||||
onCreated={() => {
|
||||
setShowCreate(false);
|
||||
loadAll().catch(() => {});
|
||||
}}
|
||||
onClose={() => setShowCreate(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedInvoice && (
|
||||
<InvoiceDetailModal
|
||||
invoice={selectedInvoice}
|
||||
onClose={() => setSelectedInvoice(null)}
|
||||
onUpdated={() => {
|
||||
setSelectedInvoice(null);
|
||||
loadAll().catch(() => {});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Shared UI helpers ────────────────────────────────────────────────────────
|
||||
|
||||
function Modal({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)",
|
||||
display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100,
|
||||
}}
|
||||
onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
>
|
||||
<div style={{
|
||||
background: "#fff", borderRadius: 8, padding: "1.5rem",
|
||||
maxWidth: 520, width: "calc(100% - 2rem)", maxHeight: "90vh", overflowY: "auto",
|
||||
boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div style={{ marginBottom: "0.75rem" }}>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: "0.25rem", fontSize: 13, color: "#374151" }}>
|
||||
{label}
|
||||
</label>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const btnStyle: React.CSSProperties = {
|
||||
padding: "0.35rem 0.75rem", border: "1px solid #d1d5db",
|
||||
borderRadius: 4, background: "#f9fafb", cursor: "pointer", fontSize: 13,
|
||||
};
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: "100%", padding: "0.4rem 0.5rem", border: "1px solid #d1d5db",
|
||||
borderRadius: 4, fontSize: 14, boxSizing: "border-box",
|
||||
};
|
||||
|
||||
const tdStyle: React.CSSProperties = {
|
||||
padding: "0.5rem 0.75rem", borderBottom: "1px solid #e2e8f0",
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
CREATE TYPE "public"."invoice_status" AS ENUM('draft', 'pending', 'paid', 'void');--> statement-breakpoint
|
||||
CREATE TYPE "public"."payment_method" AS ENUM('cash', 'card', 'check', 'other');--> statement-breakpoint
|
||||
CREATE TABLE "invoices" (
|
||||
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
|
||||
"appointment_id" uuid,
|
||||
"client_id" uuid NOT NULL,
|
||||
"subtotal_cents" integer NOT NULL,
|
||||
"tax_cents" integer DEFAULT 0 NOT NULL,
|
||||
"tip_cents" integer DEFAULT 0 NOT NULL,
|
||||
"total_cents" integer NOT NULL,
|
||||
"status" "invoice_status" DEFAULT 'draft' NOT NULL,
|
||||
"payment_method" "payment_method",
|
||||
"paid_at" timestamp,
|
||||
"notes" text,
|
||||
"created_at" timestamp DEFAULT now() NOT NULL,
|
||||
"updated_at" timestamp DEFAULT now() NOT NULL
|
||||
);
|
||||
--> statement-breakpoint
|
||||
CREATE TABLE "invoice_line_items" (
|
||||
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
|
||||
"invoice_id" uuid NOT NULL,
|
||||
"description" text NOT NULL,
|
||||
"quantity" integer DEFAULT 1 NOT NULL,
|
||||
"unit_price_cents" integer NOT NULL,
|
||||
"total_cents" integer NOT NULL,
|
||||
"created_at" timestamp DEFAULT now() NOT NULL
|
||||
);
|
||||
--> statement-breakpoint
|
||||
ALTER TABLE "invoices" ADD CONSTRAINT "invoices_appointment_id_appointments_id_fk" FOREIGN KEY ("appointment_id") REFERENCES "public"."appointments"("id") ON DELETE restrict ON UPDATE no action;--> statement-breakpoint
|
||||
ALTER TABLE "invoices" ADD CONSTRAINT "invoices_client_id_clients_id_fk" FOREIGN KEY ("client_id") REFERENCES "public"."clients"("id") ON DELETE restrict ON UPDATE no action;--> statement-breakpoint
|
||||
ALTER TABLE "invoice_line_items" ADD CONSTRAINT "invoice_line_items_invoice_id_invoices_id_fk" FOREIGN KEY ("invoice_id") REFERENCES "public"."invoices"("id") ON DELETE cascade ON UPDATE no action;
|
||||
@@ -15,6 +15,13 @@
|
||||
"when": 1742241600000,
|
||||
"tag": "0001_pet_health_alerts",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 2,
|
||||
"version": "7",
|
||||
"when": 1773777600000,
|
||||
"tag": "0002_invoices",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -26,6 +26,20 @@ export const staffRoleEnum = pgEnum("staff_role", [
|
||||
"manager",
|
||||
]);
|
||||
|
||||
export const invoiceStatusEnum = pgEnum("invoice_status", [
|
||||
"draft",
|
||||
"pending",
|
||||
"paid",
|
||||
"void",
|
||||
]);
|
||||
|
||||
export const paymentMethodEnum = pgEnum("payment_method", [
|
||||
"cash",
|
||||
"card",
|
||||
"check",
|
||||
"other",
|
||||
]);
|
||||
|
||||
// ─── Tables ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export const clients = pgTable("clients", {
|
||||
@@ -101,3 +115,35 @@ export const appointments = pgTable("appointments", {
|
||||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
updatedAt: timestamp("updated_at").notNull().defaultNow(),
|
||||
});
|
||||
|
||||
export const invoices = pgTable("invoices", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
appointmentId: uuid("appointment_id").references(() => appointments.id, {
|
||||
onDelete: "restrict",
|
||||
}),
|
||||
clientId: uuid("client_id")
|
||||
.notNull()
|
||||
.references(() => clients.id, { onDelete: "restrict" }),
|
||||
subtotalCents: integer("subtotal_cents").notNull(),
|
||||
taxCents: integer("tax_cents").notNull().default(0),
|
||||
tipCents: integer("tip_cents").notNull().default(0),
|
||||
totalCents: integer("total_cents").notNull(),
|
||||
status: invoiceStatusEnum("status").notNull().default("draft"),
|
||||
paymentMethod: paymentMethodEnum("payment_method"),
|
||||
paidAt: timestamp("paid_at"),
|
||||
notes: text("notes"),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
updatedAt: timestamp("updated_at").notNull().defaultNow(),
|
||||
});
|
||||
|
||||
export const invoiceLineItems = pgTable("invoice_line_items", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
invoiceId: uuid("invoice_id")
|
||||
.notNull()
|
||||
.references(() => invoices.id, { onDelete: "cascade" }),
|
||||
description: text("description").notNull(),
|
||||
quantity: integer("quantity").notNull().default(1),
|
||||
unitPriceCents: integer("unit_price_cents").notNull(),
|
||||
totalCents: integer("total_cents").notNull(),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
});
|
||||
|
||||
@@ -69,6 +69,36 @@ export interface Appointment {
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export type InvoiceStatus = "draft" | "pending" | "paid" | "void";
|
||||
export type PaymentMethod = "cash" | "card" | "check" | "other";
|
||||
|
||||
export interface InvoiceLineItem {
|
||||
id: string;
|
||||
invoiceId: string;
|
||||
description: string;
|
||||
quantity: number;
|
||||
unitPriceCents: number;
|
||||
totalCents: number;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface Invoice {
|
||||
id: string;
|
||||
appointmentId: string | null;
|
||||
clientId: string;
|
||||
subtotalCents: number;
|
||||
taxCents: number;
|
||||
tipCents: number;
|
||||
totalCents: number;
|
||||
status: InvoiceStatus;
|
||||
paymentMethod: PaymentMethod | null;
|
||||
paidAt: string | null;
|
||||
notes: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
lineItems?: InvoiceLineItem[];
|
||||
}
|
||||
|
||||
// Paginated list response
|
||||
export interface PaginatedList<T> {
|
||||
items: T[];
|
||||
|
||||
Reference in New Issue
Block a user