Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Hugh Hackman
|
e26718be4e |
@@ -1,43 +1,218 @@
|
||||
# GroomBook Monorepo — Archived
|
||||
# GroomBook
|
||||
|
||||
> **This repository has been archived and replaced by standalone repositories.**
|
||||
> **The open-source scheduling and client management platform built specifically for independent pet groomers** — giving you the tools of enterprise software without the enterprise price tag or vendor lock-in.
|
||||
|
||||
## Successor Repositories
|
||||
|
||||
| Repository | Description |
|
||||
|---|---|
|
||||
| [groombook/api](https://github.com/groombook/api) | Hono REST API (TypeScript, Node.js) |
|
||||
| [groombook/web](https://github.com/groombook/web) | React PWA frontend |
|
||||
| [groombook/charts](https://github.com/groombook/charts) | Helm charts for Kubernetes deployment |
|
||||
|
||||
## What Changed
|
||||
|
||||
- **Monorepo split complete** — The former `apps/api`, `apps/web`, and `packages/*` are now standalone repos
|
||||
- **`@groombook/types`** — Inlined directly into `groombook/api` and `groombook/web`
|
||||
- **E2E testing** — Now via Playwright MCP, no standalone repo needed
|
||||
- **CI/CD** — Each repo has its own pipeline; see individual repos for status
|
||||
|
||||
## Migration Notes
|
||||
|
||||
If you were cloning `groombook/groombook` for local development:
|
||||
|
||||
```bash
|
||||
# API
|
||||
git clone https://github.com/groombook/api.git
|
||||
cd api && pnpm install && pnpm dev
|
||||
|
||||
# Web (in a new terminal)
|
||||
git clone https://github.com/groombook/web.git
|
||||
cd web && pnpm install && pnpm dev
|
||||
```
|
||||
|
||||
For full Docker Compose setup, see each repo's README.
|
||||
|
||||
## Archive Info
|
||||
|
||||
This repository was archived on 2026-05-14 as part of the monorepo decommission ([GRO-1081]).
|
||||
The history is preserved but the repo is read-only.
|
||||
**Built for groomers, not corporations.**
|
||||
|
||||
---
|
||||
|
||||
*For Kubernetes deployments, see [groombook/infra](https://github.com/groombook/infra) (private).*
|
||||
## Key Features
|
||||
|
||||
**Stop chasing confirmations**
|
||||
- **Customer portal** — Clients confirm or cancel appointments on their own. Reduce no-shows with an automated waitlist.
|
||||
|
||||
**Your calendar, your way**
|
||||
- **iCal calendar feed** — Push GroomBook appointments directly into Google Calendar or Apple Calendar. No app switching.
|
||||
|
||||
**Know every pet at a glance**
|
||||
- **Client & pet records** — Detailed profiles with grooming history, preferences, and breed-specific notes. Full appointment notes for context on every regular.
|
||||
- **Quick-find search** — Find clients and pets instantly without digging through spreadsheets.
|
||||
|
||||
**Staff access without stress**
|
||||
- **Role-based access control (RBAC)** — Front desk sees bookings; only you see financials. Right access for every role.
|
||||
|
||||
**Everything else**
|
||||
- **Appointment scheduling** — Calendar management for single or multiple groomers
|
||||
- **Service management** — Pricing, duration, and service catalog
|
||||
- **POS & invoicing** — Payments, tips, and receipt generation
|
||||
- **Automated reminders** — SMS and email notifications
|
||||
- **Reporting dashboard** — Revenue, utilization, and trend analytics
|
||||
- **Staff impersonation** — Managers can view the customer portal as any client, with full audit logging and session controls
|
||||
- **PWA** — Installable on mobile devices, works offline
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Try the Demo
|
||||
|
||||
[**Live Demo**](https://demo.groombook.app) — explore GroomBook without installing anything.
|
||||
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Docker Compose (recommended for indie groomers)
|
||||
|
||||
Run GroomBook on your own hardware in minutes. Everything you need is in the box — no subscription, no vendor lock-in.
|
||||
|
||||
```bash
|
||||
git clone https://github.com/groombook/groombook.git
|
||||
cd groombook
|
||||
|
||||
# Start everything (Postgres + database migrations + API + web UI)
|
||||
docker compose up --build
|
||||
```
|
||||
|
||||
- **Web UI**: http://localhost:8080
|
||||
- **API**: http://localhost:3000
|
||||
|
||||
The default `docker-compose.yml` sets `AUTH_DISABLED=true` so you can explore the app without configuring an OIDC provider. **Important:** Disable this in any internet-facing deployment.
|
||||
|
||||
---
|
||||
|
||||
## Tech Stack
|
||||
|
||||
| Layer | Technology |
|
||||
|---|---|
|
||||
| Backend | [Hono](https://hono.dev/) (TypeScript, Node.js) |
|
||||
| Frontend | React 19 + Vite + [vite-plugin-pwa](https://vite-pwa-org.netlify.app/) |
|
||||
| Database | PostgreSQL via [CNPG](https://cloudnative-pg.io/) + [Drizzle ORM](https://orm.drizzle.team/) |
|
||||
| Auth | OIDC via [Authentik](https://goauthentik.io/) |
|
||||
| Infra | Kubernetes (namespace: `groombook`), Flux GitOps |
|
||||
| CI | GitHub Actions (self-hosted `groombook-runners`) |
|
||||
|
||||
## Repository Structure
|
||||
|
||||
```
|
||||
groombook/
|
||||
├── apps/
|
||||
│ ├── api/ # Hono REST API
|
||||
│ └── web/ # React PWA
|
||||
├── packages/
|
||||
│ ├── db/ # Drizzle schema + migrations
|
||||
│ └── types/ # Shared TypeScript types
|
||||
├── .github/
|
||||
│ └── workflows/ # CI/CD pipelines
|
||||
└── docker-compose.yml
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js >= 20
|
||||
- pnpm >= 9 (`npm install -g pnpm`)
|
||||
- Docker & Docker Compose (for local Postgres)
|
||||
|
||||
### Local Development
|
||||
|
||||
```bash
|
||||
# Clone the repo
|
||||
git clone https://github.com/groombook/groombook.git
|
||||
cd groombook
|
||||
|
||||
# Install dependencies
|
||||
pnpm install
|
||||
|
||||
# Start local Postgres
|
||||
docker compose up postgres -d
|
||||
|
||||
# Run database migrations
|
||||
DATABASE_URL=postgres://groombook:groombook@localhost:5432/groombook pnpm db:migrate
|
||||
|
||||
# Start API and Web in parallel
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
API will be available at http://localhost:3000
|
||||
Web will be available at http://localhost:5173
|
||||
|
||||
### Environment Variables
|
||||
|
||||
#### API (`apps/api/.env`)
|
||||
|
||||
```env
|
||||
DATABASE_URL=postgres://groombook:groombook@localhost:5432/groombook
|
||||
OIDC_ISSUER=https://authentik.example.com
|
||||
OIDC_AUDIENCE=groombook
|
||||
CORS_ORIGIN=http://localhost:5173
|
||||
PORT=3000
|
||||
```
|
||||
|
||||
### Running Tests
|
||||
|
||||
```bash
|
||||
# Unit tests (vitest)
|
||||
pnpm test
|
||||
|
||||
# E2E tests (Playwright) — requires the full Docker Compose stack to be running
|
||||
docker compose up -d --wait
|
||||
pnpm --filter @groombook/e2e test
|
||||
|
||||
# Open the Playwright UI (interactive test runner)
|
||||
pnpm --filter @groombook/e2e test:ui
|
||||
|
||||
# View the last E2E test report
|
||||
pnpm --filter @groombook/e2e test:report
|
||||
```
|
||||
|
||||
E2E tests target the Docker Compose stack (`http://localhost:8080`). They use API route mocking where needed so happy-path tests are deterministic without requiring seed data.
|
||||
|
||||
### Building
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
## Self-Hosting
|
||||
|
||||
### Production Configuration
|
||||
|
||||
Copy `.env.example` to `.env` and configure:
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Key variables to update for production:
|
||||
|
||||
| Variable | Description |
|
||||
|---|---|
|
||||
| `DATABASE_URL` | PostgreSQL connection string |
|
||||
| `AUTH_DISABLED` | Set to `false` in production |
|
||||
| `OIDC_ISSUER` | Authentik issuer URL |
|
||||
| `OIDC_AUDIENCE` | OAuth2 audience (default: `groombook`) |
|
||||
| `CORS_ORIGIN` | Public URL of the web frontend |
|
||||
|
||||
To use your `.env` file with Docker Compose:
|
||||
|
||||
```bash
|
||||
docker compose --env-file .env up --build
|
||||
```
|
||||
|
||||
### Kubernetes (production-grade deployments)
|
||||
|
||||
See the [groombook/infra](https://github.com/groombook/infra) repository for Kubernetes manifests and Flux configuration.
|
||||
|
||||
Groom Book is deployed in the `groombook` Kubernetes namespace using:
|
||||
- **CNPG** for PostgreSQL
|
||||
- **Authentik** for OIDC authentication
|
||||
- **Flux** for GitOps-managed deployments
|
||||
|
||||
---
|
||||
|
||||
## Contributing
|
||||
|
||||
GroomBook thrives on contributions from the grooming community. Whether you're a groomer with a feature request, a developer fixing a bug, or someone improving docs — we'd love your help.
|
||||
|
||||
1. Fork the repository
|
||||
2. Create a feature branch (`git checkout -b feature/my-feature`)
|
||||
3. Commit your changes
|
||||
4. Open a pull request
|
||||
|
||||
All PRs require CI to pass before merge. See [CONTRIBUTING.md](./CONTRIBUTING.md) for details.
|
||||
|
||||
---
|
||||
|
||||
## Why GroomBook?
|
||||
|
||||
- **Open source** — You own your data. No vendor lock-in.
|
||||
- **Purpose-built** — Features designed for grooming workflows, not generic scheduling.
|
||||
- **Self-hosted or managed** — Run it yourself for free, or pay for hosted support (coming soon).
|
||||
- **Community-driven** — Used and built by actual groomers.
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
AGPL-3.0
|
||||
|
||||
|
||||
@@ -102,7 +102,6 @@ invoicesRouter.get(
|
||||
paidAt: invoices.paidAt,
|
||||
notes: invoices.notes,
|
||||
stripePaymentIntentId: invoices.stripePaymentIntentId,
|
||||
stripeRefundId: invoices.stripeRefundId,
|
||||
createdAt: invoices.createdAt,
|
||||
updatedAt: invoices.updatedAt,
|
||||
})
|
||||
@@ -130,17 +129,7 @@ invoicesRouter.get("/:id", async (c) => {
|
||||
db.select().from(invoiceTipSplits).where(eq(invoiceTipSplits.invoiceId, id)),
|
||||
]);
|
||||
|
||||
let cardLast4: string | null = null;
|
||||
let paymentStatus: string | null = null;
|
||||
if (invoice.stripePaymentIntentId) {
|
||||
const details = await getPaymentIntentDetails(invoice.stripePaymentIntentId);
|
||||
if (details) {
|
||||
cardLast4 = details.cardLast4;
|
||||
paymentStatus = details.paymentStatus;
|
||||
}
|
||||
}
|
||||
|
||||
return c.json({ ...invoice, lineItems, tipSplits, cardLast4, paymentStatus });
|
||||
return c.json({ ...invoice, lineItems, tipSplits });
|
||||
});
|
||||
|
||||
// Save tip splits for an invoice (replaces existing splits)
|
||||
@@ -460,6 +449,9 @@ invoicesRouter.post(
|
||||
if (invoice.status !== "paid") {
|
||||
return c.json({ error: "Refund only allowed on paid invoices" }, 422);
|
||||
}
|
||||
if (!invoice.stripePaymentIntentId) {
|
||||
return c.json({ error: "No Stripe payment intent found for this invoice" }, 422);
|
||||
}
|
||||
|
||||
return await db.transaction(async (tx) => {
|
||||
if (body.idempotencyKey) {
|
||||
@@ -472,25 +464,17 @@ invoicesRouter.post(
|
||||
}
|
||||
}
|
||||
|
||||
let refundId: string;
|
||||
|
||||
if (invoice.stripePaymentIntentId) {
|
||||
const result = await processRefund(id, body.amountCents);
|
||||
if (!result) return c.json({ error: "Refund failed" }, 500);
|
||||
refundId = result.refundId;
|
||||
} else {
|
||||
// Manual refund — no Stripe call needed
|
||||
refundId = `manual_${id}_${Date.now()}`;
|
||||
}
|
||||
const result = await processRefund(id, body.amountCents);
|
||||
if (!result) return c.json({ error: "Refund failed" }, 500);
|
||||
|
||||
await tx.insert(refunds).values({
|
||||
invoiceId: id,
|
||||
stripeRefundId: refundId,
|
||||
stripeRefundId: result.refundId,
|
||||
idempotencyKey: body.idempotencyKey ?? null,
|
||||
amountCents: body.amountCents ?? null,
|
||||
});
|
||||
|
||||
return c.json({ refundId });
|
||||
return c.json({ refundId: result.refundId });
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@@ -173,21 +173,22 @@ function InvoiceDetailModal({
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [tipStr, setTipStr] = useState((invoice.tipCents / 100).toFixed(2));
|
||||
const [paymentMethod, setPaymentMethod] = useState<string>(invoice.paymentMethod ?? "cash");
|
||||
const [showRefundDialog, setShowRefundDialog] = useState(false);
|
||||
const [showRefundDialog, setShowRefundDialog] = useState(false);
|
||||
const [refundType, setRefundType] = useState<"full" | "partial">("full");
|
||||
const [refundAmount, setRefundAmount] = useState("");
|
||||
const [refundError, setRefundError] = useState<string | null>(null);
|
||||
const [refunding, setRefunding] = useState(false);
|
||||
const [partialAmount, setPartialAmount] = useState("");
|
||||
const [stripeDetails, setStripeDetails] = useState<{ cardLast4: string | null; paymentStatus: string | null; stripeRefundId: string | null } | null>(null);
|
||||
|
||||
// Fetch current staff role to determine manager access
|
||||
const [staffMe, setStaffMe] = useState<{ role: string; isSuperUser: boolean } | null>(null);
|
||||
// Fetch Stripe details when modal opens for paid invoices with a payment intent
|
||||
useEffect(() => {
|
||||
fetch("/api/staff/me")
|
||||
.then((r) => r.json())
|
||||
.then((d) => setStaffMe(d))
|
||||
.catch(() => setStaffMe(null));
|
||||
}, []);
|
||||
const isManager = staffMe && (staffMe.role === "manager" || staffMe.isSuperUser);
|
||||
if (invoice.status === "paid" && invoice.stripePaymentIntentId) {
|
||||
fetch(`/api/invoices/${invoice.id}/stripe-details`)
|
||||
.then((r) => r.ok ? r.json() : null)
|
||||
.then((data) => { if (data) setStripeDetails(data); })
|
||||
.catch(() => {});
|
||||
} else {
|
||||
setStripeDetails(null);
|
||||
}
|
||||
}, [invoice.id, invoice.status, invoice.stripePaymentIntentId]);
|
||||
|
||||
// Tip split state: array of {staffId, staffName, pct}
|
||||
const linkedAppt = invoice.appointmentId
|
||||
@@ -291,6 +292,35 @@ const [showRefundDialog, setShowRefundDialog] = useState(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function issueRefund() {
|
||||
const amountCents = refundType === "partial"
|
||||
? Math.round(parseFloat(partialAmount) * 100)
|
||||
: undefined;
|
||||
if (refundType === "partial" && (!amountCents || amountCents <= 0)) {
|
||||
setError("Enter a valid refund amount");
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/invoices/${invoice.id}/refund`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(amountCents ? { amountCents } : {}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = (await res.json()) as { error?: string };
|
||||
throw new Error(err.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
setShowRefundDialog(false);
|
||||
onUpdated();
|
||||
} catch (e: unknown) {
|
||||
setError(e instanceof Error ? e.message : "Failed to issue refund");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <Modal onClose={onClose}><p style={{ padding: "1rem" }}>Loading…</p></Modal>;
|
||||
|
||||
const tipCentsCalc = Math.round(parseFloat(tipStr) * 100) || 0;
|
||||
@@ -350,15 +380,15 @@ const [showRefundDialog, setShowRefundDialog] = useState(false);
|
||||
/>
|
||||
{invoice.paidAt && <SummaryRow label="Paid on" value={fmtDate(invoice.paidAt)} />}
|
||||
{invoice.paymentMethod && <SummaryRow label="Payment" value={invoice.paymentMethod} />}
|
||||
{invoice.stripePaymentIntentId && (
|
||||
{stripeDetails && (
|
||||
<>
|
||||
{invoice.cardLast4 && (
|
||||
<SummaryRow label="Card" value={`•••• ${invoice.cardLast4}`} />
|
||||
{stripeDetails.cardLast4 && (
|
||||
<SummaryRow label="Card" value={`•••• ${stripeDetails.cardLast4}`} />
|
||||
)}
|
||||
{invoice.paymentStatus && (
|
||||
<SummaryRow label="Stripe status" value={invoice.paymentStatus} />
|
||||
{stripeDetails.paymentStatus && (
|
||||
<SummaryRow label="Stripe status" value={stripeDetails.paymentStatus} />
|
||||
)}
|
||||
{invoice.stripeRefundId && (
|
||||
{stripeDetails.stripeRefundId && (
|
||||
<SummaryRow label="Refund" value="Refunded" />
|
||||
)}
|
||||
</>
|
||||
@@ -480,92 +510,77 @@ const [showRefundDialog, setShowRefundDialog] = useState(false);
|
||||
</div>
|
||||
)}
|
||||
{(invoice.status === "paid" || invoice.status === "void") && (
|
||||
<div style={{ marginTop: "1rem", borderTop: "1px solid #e2e8f0", paddingTop: "1rem" }}>
|
||||
{invoice.stripeRefundId && (
|
||||
<div style={{ marginBottom: "0.75rem", display: "flex", alignItems: "center", gap: "0.5rem" }}>
|
||||
<span style={{ background: "#fef3c7", color: "#92400e", padding: "0.2rem 0.6rem", borderRadius: 4, fontSize: 13, fontWeight: 600 }}>Refunded</span>
|
||||
</div>
|
||||
<div style={{ marginTop: "1rem", display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
|
||||
{invoice.status === "paid" && invoice.stripePaymentIntentId && (
|
||||
<button
|
||||
onClick={() => setShowRefundDialog(true)}
|
||||
style={{ ...btnStyle, color: "#b45309", borderColor: "#b45309" }}
|
||||
>
|
||||
Refund
|
||||
</button>
|
||||
)}
|
||||
<div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
|
||||
{invoice.status === "paid" && !invoice.stripeRefundId && isManager && (
|
||||
<button onClick={() => setShowRefundDialog(true)} style={{ ...btnStyle, color: "#fff", backgroundColor: "#7c3aed", borderColor: "#7c3aed" }}>
|
||||
Refund
|
||||
</button>
|
||||
)}
|
||||
<button onClick={onClose} style={btnStyle}>Close</button>
|
||||
</div>
|
||||
<button onClick={onClose} style={btnStyle}>Close</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Refund Dialog */}
|
||||
{showRefundDialog && (
|
||||
<div style={{ marginTop: "1rem", border: "1px solid #e2e8f0", borderRadius: 8, padding: "1rem", background: "#f9fafb" }}>
|
||||
<p style={{ fontWeight: 600, margin: "0 0 0.75rem" }}>Process Refund</p>
|
||||
<div style={{ display: "flex", gap: "0.75rem", marginBottom: "0.75rem" }}>
|
||||
<label style={{ display: "flex", alignItems: "center", gap: "0.25rem", cursor: "pointer" }}>
|
||||
<input type="radio" checked={refundType === "full"} onChange={() => setRefundType("full")} />
|
||||
<Modal onClose={() => setShowRefundDialog(false)}>
|
||||
<h2 style={{ marginTop: 0 }}>Issue Refund</h2>
|
||||
<p style={{ fontSize: 14, color: "#6b7280", marginBottom: "1rem" }}>
|
||||
Invoice total: <strong>{fmtMoney(invoice.totalCents)}</strong>
|
||||
</p>
|
||||
<div style={{ marginBottom: "0.75rem" }}>
|
||||
<label style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontWeight: 600, marginBottom: "0.5rem" }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="refundType"
|
||||
value="full"
|
||||
checked={refundType === "full"}
|
||||
onChange={() => setRefundType("full")}
|
||||
/>
|
||||
Full refund
|
||||
</label>
|
||||
<label style={{ display: "flex", alignItems: "center", gap: "0.25rem", cursor: "pointer" }}>
|
||||
<input type="radio" checked={refundType === "partial"} onChange={() => setRefundType("partial")} />
|
||||
<label style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontWeight: 600 }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="refundType"
|
||||
value="partial"
|
||||
checked={refundType === "partial"}
|
||||
onChange={() => setRefundType("partial")}
|
||||
/>
|
||||
Partial refund
|
||||
</label>
|
||||
</div>
|
||||
{refundType === "partial" && (
|
||||
<div style={{ marginBottom: "0.75rem" }}>
|
||||
<div style={{ marginBottom: "1rem" }}>
|
||||
<input
|
||||
type="number"
|
||||
min="0.01"
|
||||
step="0.01"
|
||||
placeholder="Amount ($)"
|
||||
value={refundAmount}
|
||||
onChange={(e) => setRefundAmount(e.target.value)}
|
||||
style={{ ...inputStyle, width: 100 }}
|
||||
placeholder="0.00"
|
||||
value={partialAmount}
|
||||
onChange={(e) => setPartialAmount(e.target.value)}
|
||||
style={{ ...inputStyle, width: 120 }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{refundError && <p style={{ color: "red", margin: "0 0 0.5rem", fontSize: 13 }}>{refundError}</p>}
|
||||
<div style={{ display: "flex", gap: "0.5rem" }}>
|
||||
{error && <p style={{ color: "red", margin: "0.5rem 0" }}>{error}</p>}
|
||||
<div style={{ display: "flex", gap: "0.5rem", marginTop: "0.75rem" }}>
|
||||
<button
|
||||
onClick={async () => {
|
||||
setRefunding(true);
|
||||
setRefundError(null);
|
||||
try {
|
||||
if (refundType === "partial") {
|
||||
const parsed = parseFloat(refundAmount);
|
||||
if (isNaN(parsed) || parsed <= 0) {
|
||||
setRefundError("Please enter a valid amount greater than zero.");
|
||||
setRefunding(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
const body = refundType === "partial" ? { amountCents: Math.round(parseFloat(refundAmount) * 100) } : {};
|
||||
const res = await fetch(`/api/invoices/${invoice.id}/refund`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = (await res.json()) as { error?: string };
|
||||
throw new Error(err.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
setShowRefundDialog(false);
|
||||
onUpdated();
|
||||
} catch (e: unknown) {
|
||||
setRefundError(e instanceof Error ? e.message : "Refund failed");
|
||||
} finally {
|
||||
setRefunding(false);
|
||||
}
|
||||
}}
|
||||
disabled={refunding}
|
||||
style={{ ...btnStyle, color: "#fff", backgroundColor: "#7c3aed", borderColor: "#7c3aed" }}
|
||||
onClick={issueRefund}
|
||||
disabled={saving}
|
||||
style={{ ...btnStyle, backgroundColor: "#b45309", color: "#fff", borderColor: "#b45309" }}
|
||||
>
|
||||
{refunding ? "Processing…" : "Process Refund"}
|
||||
{saving ? "Processing…" : "Issue Refund"}
|
||||
</button>
|
||||
<button onClick={() => setShowRefundDialog(false)} style={btnStyle}>
|
||||
Cancel
|
||||
</button>
|
||||
<button onClick={() => { setShowRefundDialog(false); setRefundError(null); }} style={btnStyle}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</Modal>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -326,7 +326,7 @@ export function CustomerPortal() {
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 min-h-screen overflow-hidden">
|
||||
<main className="flex-1 min-h-screen overflow-x-hidden">
|
||||
<div className="hidden md:flex items-center justify-between px-8 py-4 border-b border-stone-200 bg-white">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-stone-800">
|
||||
|
||||
@@ -130,7 +130,7 @@ function BillingPaymentsInner({ sessionId, readOnly }: BillingPaymentsProps) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 flex-wrap overflow-x-auto">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{([
|
||||
{ id: "invoices" as const, label: "Invoices", icon: DollarSign },
|
||||
{ id: "payment" as const, label: "Payment Methods", icon: CreditCard },
|
||||
|
||||
Reference in New Issue
Block a user