Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c7ab4c6b4e | |||
| b77dd04b15 | |||
| 11157b872c |
@@ -272,6 +272,8 @@ export default async function TenantDetailPage({
|
||||
? {
|
||||
id: pendingResumeRequest.id,
|
||||
createdAt: pendingResumeRequest.createdAt,
|
||||
customerNotes:
|
||||
pendingResumeRequest.customerNotes ?? null,
|
||||
}
|
||||
: null
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { z } from "zod";
|
||||
import { getSessionUser, canMutate } from "@/lib/session";
|
||||
import { getTenant, setTenantAnnotation } from "@/lib/k8s";
|
||||
import { canUserSeeTenant } from "@/lib/visibility";
|
||||
@@ -7,8 +8,26 @@ import {
|
||||
getPendingResumeRequestForTenant,
|
||||
getTenantRequestByTenantName,
|
||||
} from "@/lib/db";
|
||||
import { sendResumeRequestAdminNotificationEmail } from "@/lib/email";
|
||||
import { safeError } from "@/lib/errors";
|
||||
|
||||
/**
|
||||
* Body schema. Both fields optional; the customer can submit a
|
||||
* resume request with no body at all (the JS client sends `{}`),
|
||||
* or with a note explaining their reactivation rationale.
|
||||
*
|
||||
* Length cap mirrors `billing_notes` (2000 chars) — same lower
|
||||
* bound for "free-form text we don't want abused".
|
||||
*/
|
||||
const bodySchema = z.object({
|
||||
customerNotes: z
|
||||
.string()
|
||||
.trim()
|
||||
.max(2000)
|
||||
.optional()
|
||||
.transform((v) => (v && v.length > 0 ? v : undefined)),
|
||||
});
|
||||
|
||||
/**
|
||||
* POST /api/tenants/[name]/resume-request
|
||||
*
|
||||
@@ -82,6 +101,18 @@ export async function POST(
|
||||
);
|
||||
}
|
||||
|
||||
// Body is optional — the customer can submit a resume request
|
||||
// with no payload at all, or attach a free-form note.
|
||||
const rawBody = await req.json().catch(() => ({}));
|
||||
const parsed = bodySchema.safeParse(rawBody ?? {});
|
||||
if (!parsed.success) {
|
||||
return NextResponse.json(
|
||||
{ error: "Invalid input", details: parsed.error.flatten() },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
const customerNotes = parsed.data.customerNotes;
|
||||
|
||||
// Already a pending request? Don't duplicate.
|
||||
const existing = await getPendingResumeRequestForTenant(name);
|
||||
if (existing) {
|
||||
@@ -110,6 +141,7 @@ export async function POST(
|
||||
contactEmail: user.email,
|
||||
companyName: provision?.companyName ?? tenant.spec.displayName ?? name,
|
||||
agentName: provision?.agentName ?? "Assistant",
|
||||
customerNotes,
|
||||
});
|
||||
|
||||
// Stamp the annotation so the operator pauses its TTL. If this
|
||||
@@ -128,6 +160,20 @@ export async function POST(
|
||||
);
|
||||
}
|
||||
|
||||
// Notify admin distribution. Fire-and-log: failure to email
|
||||
// doesn't roll back the request creation. The customer's note
|
||||
// (if any) is included so admin can triage from the email
|
||||
// without opening the queue.
|
||||
sendResumeRequestAdminNotificationEmail({
|
||||
tenantName: name,
|
||||
companyName: resumeRequest.companyName,
|
||||
contactName: resumeRequest.contactName,
|
||||
contactEmail: resumeRequest.contactEmail,
|
||||
customerNotes,
|
||||
}).catch((e) =>
|
||||
console.error("resume admin notification email failed:", e)
|
||||
);
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
message: "Resume request submitted. An admin will review shortly.",
|
||||
|
||||
@@ -384,6 +384,18 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
|
||||
{req.tenantName}
|
||||
</div>
|
||||
)}
|
||||
{/* Feature 6: customer's reactivation rationale,
|
||||
shown inline so admin can triage without
|
||||
opening a detail view. Truncated for
|
||||
queue density; full content on hover. */}
|
||||
{req.requestType === "resume" && req.customerNotes && (
|
||||
<div
|
||||
className="text-text-secondary text-xs mt-1 max-w-[280px] line-clamp-2 whitespace-pre-wrap"
|
||||
title={req.customerNotes}
|
||||
>
|
||||
{req.customerNotes}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="text-text-primary text-sm">
|
||||
|
||||
262
src/components/dashboard/budget-editable-card.tsx
Normal file
262
src/components/dashboard/budget-editable-card.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
|
||||
/**
|
||||
* Format remaining budget as CHF. Same adaptive precision rule as the
|
||||
* usage display: 2 decimals for amounts ≥ 1, 4 for smaller values
|
||||
* so per-request residuals don't round to zero. The currency comes
|
||||
* from LiteLLM via our CHF pricing config — see chf() in
|
||||
* usage-display.tsx for the full reasoning.
|
||||
*/
|
||||
function formatRemaining(n: number): string {
|
||||
const decimals = Math.abs(n) >= 1 ? 2 : 4;
|
||||
return `CHF ${n.toFixed(decimals)}`;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tenantName: string;
|
||||
maxBudget: number | null;
|
||||
remaining: number | null;
|
||||
budgetDuration: string | null;
|
||||
/** Called after a successful save so the parent re-fetches usage. */
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clickable Budget StatCard with edit modal (Feature 7).
|
||||
*
|
||||
* The display side mirrors the read-only StatCard layout exactly so
|
||||
* the grid stays uniform. The "click to edit" hint is implicit via
|
||||
* hover state — a "Set" / "Edit" link in the corner would be louder
|
||||
* but adds clutter on a tile that's already busy. Customers who
|
||||
* mouse over discover it.
|
||||
*
|
||||
* Important UX note shown in the modal: the budget is org-scoped,
|
||||
* not per-tenant. All tenants in the same ZITADEL org share the
|
||||
* underlying LiteLLM team. Without that callout, a customer with
|
||||
* multiple tenants might think they're capping just one.
|
||||
*/
|
||||
export function BudgetEditableCard({
|
||||
tenantName,
|
||||
maxBudget,
|
||||
remaining,
|
||||
budgetDuration,
|
||||
onSaved,
|
||||
}: Props) {
|
||||
const t = useTranslations("usage");
|
||||
const tCommon = useTranslations("common");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
// Form state. Mode = "unlimited" | "capped". When unlimited, the
|
||||
// duration dropdown is hidden because LiteLLM's reset cadence is
|
||||
// meaningless without a cap.
|
||||
const [mode, setMode] = useState<"unlimited" | "capped">(
|
||||
maxBudget !== null ? "capped" : "unlimited"
|
||||
);
|
||||
const [budgetInput, setBudgetInput] = useState<string>(
|
||||
maxBudget !== null ? String(maxBudget) : ""
|
||||
);
|
||||
const [duration, setDuration] = useState<"30d" | "1mo" | "1y">(
|
||||
(budgetDuration === "30d" ||
|
||||
budgetDuration === "1mo" ||
|
||||
budgetDuration === "1y")
|
||||
? budgetDuration
|
||||
: "1mo"
|
||||
);
|
||||
|
||||
// Reset form when modal opens — picks up any change made elsewhere
|
||||
// (e.g. another browser tab) since this card was last re-rendered.
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setMode(maxBudget !== null ? "capped" : "unlimited");
|
||||
setBudgetInput(maxBudget !== null ? String(maxBudget) : "");
|
||||
setDuration(
|
||||
(budgetDuration === "30d" ||
|
||||
budgetDuration === "1mo" ||
|
||||
budgetDuration === "1y")
|
||||
? budgetDuration
|
||||
: "1mo"
|
||||
);
|
||||
setError("");
|
||||
}
|
||||
}, [open, maxBudget, budgetDuration]);
|
||||
|
||||
const onSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
setError("");
|
||||
try {
|
||||
let body: { maxBudget: number | null; budgetDuration: string | null };
|
||||
if (mode === "unlimited") {
|
||||
body = { maxBudget: null, budgetDuration: null };
|
||||
} else {
|
||||
const parsed = parseFloat(budgetInput);
|
||||
if (!Number.isFinite(parsed) || parsed <= 0) {
|
||||
throw new Error(t("budgetInvalid"));
|
||||
}
|
||||
body = { maxBudget: parsed, budgetDuration: duration };
|
||||
}
|
||||
const res = await fetch(
|
||||
`/api/tenants/${encodeURIComponent(tenantName)}/budget`,
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
}
|
||||
);
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || t("budgetSaveFailed"));
|
||||
}
|
||||
setOpen(false);
|
||||
onSaved();
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="bg-surface-1 border border-border rounded-xl p-4 text-left hover:border-text-secondary transition-colors group"
|
||||
>
|
||||
<div className="text-xs text-text-muted mb-1 flex items-center justify-between">
|
||||
<span>{t("budget")}</span>
|
||||
<span className="text-[10px] text-text-muted opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{t("budgetEdit")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-text-primary tabular-nums">
|
||||
{remaining !== null ? formatRemaining(remaining) : t("noLimit")}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<Modal open={open} onClose={() => setOpen(false)} ariaLabel={t("budgetEditTitle")}>
|
||||
<h3 className="font-display text-lg font-semibold text-text-primary mb-2">
|
||||
{t("budgetEditTitle")}
|
||||
</h3>
|
||||
<p className="text-sm text-text-secondary mb-4">
|
||||
{t("budgetEditDescription")}
|
||||
</p>
|
||||
<div className="text-xs text-amber-400 bg-amber-400/10 border border-amber-400/20 rounded-lg px-3 py-2 mb-5">
|
||||
{t("budgetOrgScopeWarning")}
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
{/* Mode toggle: unlimited vs capped. Two radios are
|
||||
clearer than a single "max" field where 0 means
|
||||
unlimited (which would conflict with our zod
|
||||
validation requiring positive). */}
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-start gap-2 text-sm text-text-primary cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="budget-mode"
|
||||
checked={mode === "unlimited"}
|
||||
onChange={() => setMode("unlimited")}
|
||||
className="mt-1"
|
||||
/>
|
||||
<span>
|
||||
<span className="font-medium">{t("budgetModeUnlimited")}</span>
|
||||
<span className="block text-xs text-text-muted">
|
||||
{t("budgetModeUnlimitedDescription")}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<label className="flex items-start gap-2 text-sm text-text-primary cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="budget-mode"
|
||||
checked={mode === "capped"}
|
||||
onChange={() => setMode("capped")}
|
||||
className="mt-1"
|
||||
/>
|
||||
<span>
|
||||
<span className="font-medium">{t("budgetModeCapped")}</span>
|
||||
<span className="block text-xs text-text-muted">
|
||||
{t("budgetModeCappedDescription")}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{mode === "capped" && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
|
||||
<div>
|
||||
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
|
||||
{t("budgetAmount")} <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-3 top-2 text-sm text-text-muted font-medium">
|
||||
CHF
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
min="0.01"
|
||||
max="1000000"
|
||||
step="0.01"
|
||||
required
|
||||
value={budgetInput}
|
||||
onChange={(e) => setBudgetInput(e.target.value)}
|
||||
className="w-full pl-12 pr-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
|
||||
{t("budgetResetCadence")}
|
||||
</label>
|
||||
<select
|
||||
value={duration}
|
||||
onChange={(e) =>
|
||||
setDuration(e.target.value as "30d" | "1mo" | "1y")
|
||||
}
|
||||
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
||||
>
|
||||
<option value="30d">{t("budgetCadence_30d")}</option>
|
||||
<option value="1mo">{t("budgetCadence_1mo")}</option>
|
||||
<option value="1y">{t("budgetCadence_1y")}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
disabled={saving}
|
||||
className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
|
||||
>
|
||||
{tCommon("cancel")}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="text-sm px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{saving ? tCommon("loading") : tCommon("save")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { BudgetEditableCard } from "@/components/dashboard/budget-editable-card";
|
||||
|
||||
interface DailyUsage {
|
||||
date: string;
|
||||
@@ -18,7 +19,17 @@ interface UsageData {
|
||||
totalSpend: number;
|
||||
requestCount: number;
|
||||
};
|
||||
budget: { maxBudget: number | null; spend: number; remaining: number | null };
|
||||
budget: {
|
||||
maxBudget: number | null;
|
||||
spend: number;
|
||||
remaining: number | null;
|
||||
/**
|
||||
* Feature 7: budget reset cadence as stored on LiteLLM.
|
||||
* Strings: "30d" / "1mo" / "1y" / null (no reset). UI maps these
|
||||
* to user-friendly labels.
|
||||
*/
|
||||
budgetDuration: string | null;
|
||||
};
|
||||
rateLimits: { rpm: number | null; tpm: number | null };
|
||||
dailyUsage: DailyUsage[];
|
||||
}
|
||||
@@ -29,8 +40,31 @@ function fmt(n: number): string {
|
||||
return n.toString();
|
||||
}
|
||||
|
||||
function usd(n: number): string {
|
||||
return `$${n.toFixed(4)}`;
|
||||
/**
|
||||
* Format a numeric amount as CHF.
|
||||
*
|
||||
* Note on currency labelling: LiteLLM stores raw cost numbers it
|
||||
* receives from upstream (OpenAI/Anthropic), which originate as USD.
|
||||
* The PieCed pricing config (Slice 5) converts those numbers to
|
||||
* CHF before LiteLLM persists them, so the values flowing through
|
||||
* here are already CHF amounts. We label them as such in the UI;
|
||||
* "USD" or "$" anywhere in the customer-facing experience would
|
||||
* be misleading.
|
||||
*
|
||||
* Precision is adaptive:
|
||||
* - Amounts ≥ 1 CHF: 2 decimals (typical money formatting).
|
||||
* - Smaller amounts: 4 decimals — per-request inference costs are
|
||||
* routinely sub-rappen, and rounding to 2dp
|
||||
* would render CHF 0.0042 as "CHF 0.00",
|
||||
* which obscures real costs from customers
|
||||
* looking at the daily breakdown.
|
||||
*
|
||||
* This is a customer-facing display helper; for storage and
|
||||
* comparisons keep using the raw number.
|
||||
*/
|
||||
function chf(n: number): string {
|
||||
const decimals = Math.abs(n) >= 1 ? 2 : 4;
|
||||
return `CHF ${n.toFixed(decimals)}`;
|
||||
}
|
||||
|
||||
function getCurrentMonth(): string {
|
||||
@@ -69,7 +103,7 @@ function UsageChart({ data }: { data: DailyUsage[] }) {
|
||||
const x = i * (barW + 2);
|
||||
return (
|
||||
<g key={d.date}>
|
||||
<title>{d.date}: {fmt(d.inputTokens)} in / {fmt(d.outputTokens)} out — {usd(d.spend)}</title>
|
||||
<title>{d.date}: {fmt(d.inputTokens)} in / {fmt(d.outputTokens)} out — {chf(d.spend)}</title>
|
||||
<rect x={x} y={h - totalH} width={barW} height={totalH - inputH} rx={1} fill="var(--color-accent)" opacity={0.3} />
|
||||
<rect x={x} y={h - inputH} width={barW} height={inputH} rx={1} fill="var(--color-accent)" opacity={0.7} />
|
||||
{i % 7 === 0 && (
|
||||
@@ -113,10 +147,18 @@ export function UsageDisplay({
|
||||
tenant,
|
||||
teamId,
|
||||
keyAlias,
|
||||
canEditBudget = false,
|
||||
}: {
|
||||
tenant?: string | null;
|
||||
teamId?: string | null;
|
||||
keyAlias?: string | null;
|
||||
/**
|
||||
* Feature 7: when true, the Budget StatCard becomes clickable and
|
||||
* opens the budget editor. Off by default — owners and platform
|
||||
* admins get it on; `user` role customers see the budget read-only.
|
||||
* Server component decides this via canMutate(user).
|
||||
*/
|
||||
canEditBudget?: boolean;
|
||||
}) {
|
||||
const t = useTranslations("usage");
|
||||
const [month, setMonth] = useState(getCurrentMonth);
|
||||
@@ -185,11 +227,25 @@ export function UsageDisplay({
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<StatCard label={t("inputTokens")} value={fmt(data.currentPeriod.inputTokens)} />
|
||||
<StatCard label={t("outputTokens")} value={fmt(data.currentPeriod.outputTokens)} />
|
||||
<StatCard label={t("totalSpend")} value={usd(data.currentPeriod.totalSpend)} accent />
|
||||
<StatCard
|
||||
label={t("budget")}
|
||||
value={data.budget.remaining !== null ? usd(data.budget.remaining) : t("noLimit")}
|
||||
/>
|
||||
<StatCard label={t("totalSpend")} value={chf(data.currentPeriod.totalSpend)} accent />
|
||||
{canEditBudget && tenant ? (
|
||||
<BudgetEditableCard
|
||||
tenantName={tenant}
|
||||
maxBudget={data.budget.maxBudget}
|
||||
remaining={data.budget.remaining}
|
||||
budgetDuration={data.budget.budgetDuration}
|
||||
onSaved={fetchUsage}
|
||||
/>
|
||||
) : (
|
||||
<StatCard
|
||||
label={t("budget")}
|
||||
value={
|
||||
data.budget.remaining !== null
|
||||
? chf(data.budget.remaining)
|
||||
: t("noLimit")
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-surface-1 border border-border rounded-xl p-5">
|
||||
|
||||
@@ -24,11 +24,16 @@ interface Props {
|
||||
isPlatform: boolean;
|
||||
/**
|
||||
* If a resume request is currently pending for this tenant, its
|
||||
* id and submitted-at. The component renders an info card with
|
||||
* a cancel-request button instead of the request-reactivation
|
||||
* button. Only meaningful when `suspended === true`.
|
||||
* id, when it was submitted, and the customer's optional note.
|
||||
* The component renders an info card with a cancel-request button
|
||||
* instead of the request-reactivation button. Only meaningful when
|
||||
* `suspended === true`.
|
||||
*/
|
||||
pendingResumeRequest: { id: string; createdAt: string } | null;
|
||||
pendingResumeRequest: {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
customerNotes: string | null;
|
||||
} | null;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -65,6 +70,10 @@ export function SubscriptionToggle({
|
||||
const [confirmResumeOpen, setConfirmResumeOpen] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
// Feature 6: customer's free-form note attached to the resume
|
||||
// request. Reset when the modal opens/closes so re-opening doesn't
|
||||
// show stale text from a previous abandoned attempt.
|
||||
const [resumeNotes, setResumeNotes] = useState("");
|
||||
|
||||
// Customer-side cancel: PATCH suspend=true. Same path as before.
|
||||
// The 60-day retention copy in the modal is the new bit (Bug 37b);
|
||||
@@ -106,6 +115,13 @@ export function SubscriptionToggle({
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
// Trim and omit on empty so the API stores NULL rather
|
||||
// than empty string. The endpoint's zod transform also
|
||||
// handles this; double-checking on the client lets us
|
||||
// skip the round-trip when there's nothing to send.
|
||||
customerNotes: resumeNotes.trim() || undefined,
|
||||
}),
|
||||
}
|
||||
);
|
||||
if (!res.ok) {
|
||||
@@ -113,6 +129,7 @@ export function SubscriptionToggle({
|
||||
throw new Error(data.error || t("subscriptionUpdateFailed"));
|
||||
}
|
||||
setConfirmResumeOpen(false);
|
||||
setResumeNotes("");
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
@@ -210,6 +227,15 @@ export function SubscriptionToggle({
|
||||
when: formatRelative(pendingResumeRequest.createdAt, f),
|
||||
})}
|
||||
</div>
|
||||
{/* Feature 6: echo the customer's note back so they can
|
||||
see what they wrote. Useful especially when they
|
||||
later wonder "what did I tell them?" or want to
|
||||
confirm before cancelling and resubmitting. */}
|
||||
{pendingResumeRequest.customerNotes && (
|
||||
<div className="mt-2 text-xs text-text-secondary border-l-2 border-amber-500/30 pl-3 whitespace-pre-wrap">
|
||||
{pendingResumeRequest.customerNotes}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={cancelResumeRequest}
|
||||
@@ -249,10 +275,33 @@ export function SubscriptionToggle({
|
||||
<h3 className="font-display text-lg font-semibold text-text-primary mb-2">
|
||||
{t("requestReactivationConfirmTitle")}
|
||||
</h3>
|
||||
<p className="text-sm text-text-secondary mb-5">
|
||||
<p className="text-sm text-text-secondary mb-4">
|
||||
{t("requestReactivationConfirmDescription")}
|
||||
</p>
|
||||
|
||||
{/* Feature 6: optional explanatory note. Useful for
|
||||
customers to tell admin why they want reactivation
|
||||
— e.g. "we paused over winter break, picking back
|
||||
up". Stored on the tenant_request and surfaced in
|
||||
the admin queue. */}
|
||||
<div className="mb-5">
|
||||
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1.5">
|
||||
{t("requestReactivationNoteLabel")}{" "}
|
||||
<span className="text-text-muted normal-case">
|
||||
({tCommon("optional")})
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
value={resumeNotes}
|
||||
onChange={(e) => setResumeNotes(e.target.value)}
|
||||
rows={3}
|
||||
maxLength={2000}
|
||||
placeholder={t("requestReactivationNotePlaceholder")}
|
||||
disabled={submitting}
|
||||
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-3">
|
||||
{error}
|
||||
|
||||
@@ -93,6 +93,14 @@ const MIGRATION_SQL = `
|
||||
-- is only meaningful for rejected and cancelled rows.
|
||||
ALTER TABLE tenant_requests ADD COLUMN IF NOT EXISTS dismissed_at TIMESTAMPTZ;
|
||||
|
||||
-- Feature 6: free-form customer note attached to the request.
|
||||
-- Currently surfaced only by resume requests (where the customer
|
||||
-- explains why they want reactivation), but the column is generic
|
||||
-- so future flows could reuse it. Distinct from billing_notes
|
||||
-- (provision-only, accounting-related) and admin_notes (admin's
|
||||
-- reason on reject/approve). Optional — nullable.
|
||||
ALTER TABLE tenant_requests ADD COLUMN IF NOT EXISTS customer_notes TEXT;
|
||||
|
||||
-- Bug 37a: resume requests use the same table as provision requests so
|
||||
-- the customer dashboard and admin queue share rendering. Discriminator
|
||||
-- is request_type. Default 'provision' on backfill keeps existing rows
|
||||
@@ -558,14 +566,21 @@ export async function createResumeRequest(params: {
|
||||
// tenant request for traceability rather than storing dummy values.
|
||||
companyName: string;
|
||||
agentName: string;
|
||||
/**
|
||||
* Feature 6: optional free-form note from the customer explaining
|
||||
* why they want reactivation. Surfaced to admin in the queue and
|
||||
* forwarded to the platform notification email so the admin can
|
||||
* decide before opening the request.
|
||||
*/
|
||||
customerNotes?: string | null;
|
||||
}): Promise<TenantRequest> {
|
||||
await ensureSchema();
|
||||
const result = await getPool().query(
|
||||
`INSERT INTO tenant_requests (
|
||||
zitadel_org_id, zitadel_user_id, company_name,
|
||||
contact_name, contact_email, agent_name,
|
||||
tenant_name, request_type, status
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, 'resume', 'pending')
|
||||
tenant_name, request_type, status, customer_notes
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, 'resume', 'pending', $8)
|
||||
RETURNING *`,
|
||||
[
|
||||
params.zitadelOrgId,
|
||||
@@ -575,6 +590,7 @@ export async function createResumeRequest(params: {
|
||||
params.contactEmail,
|
||||
params.agentName,
|
||||
params.tenantName,
|
||||
params.customerNotes ?? null,
|
||||
]
|
||||
);
|
||||
return mapRow(result.rows[0]);
|
||||
@@ -876,6 +892,7 @@ function mapRow(row: any): TenantRequest {
|
||||
packages: row.packages ?? [],
|
||||
billingAddress: row.billing_address ?? {},
|
||||
billingNotes: row.billing_notes,
|
||||
customerNotes: row.customer_notes ?? null,
|
||||
status: row.status as TenantRequestStatus,
|
||||
adminNotes: row.admin_notes,
|
||||
tenantName: row.tenant_name,
|
||||
|
||||
136
src/lib/email.ts
136
src/lib/email.ts
@@ -11,6 +11,17 @@
|
||||
* SMTP_PASS — App Password
|
||||
* SMTP_FROM — e.g. "PieCed <noreply@pieced.ch>"
|
||||
* ADMIN_NOTIFICATION_EMAIL — e.g. admin@pieced.ch (optional)
|
||||
* SUPPORT_CONTACT_EMAIL — e.g. support@pieced.ch (optional)
|
||||
* Customer-facing address for "have
|
||||
* questions?" follow-ups in
|
||||
* transactional emails. The from
|
||||
* address itself (SMTP_USER) is
|
||||
* typically a noreply mailbox, so we
|
||||
* don't tell customers to "reply to
|
||||
* this email" — instead we point them
|
||||
* at this monitored address. If
|
||||
* unset, the contact-prompt line is
|
||||
* simply omitted from emails.
|
||||
*/
|
||||
|
||||
import nodemailer from "nodemailer";
|
||||
@@ -42,6 +53,12 @@ function getFrom(): string {
|
||||
);
|
||||
}
|
||||
|
||||
/** Returns the customer-facing support email address, or null if unset. */
|
||||
function getSupportContactEmail(): string | null {
|
||||
const v = process.env.SUPPORT_CONTACT_EMAIL?.trim();
|
||||
return v && v.length > 0 ? v : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML entities to prevent injection in HTML emails.
|
||||
*/
|
||||
@@ -125,6 +142,21 @@ export async function sendRejectionEmail(
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
const supportEmail = getSupportContactEmail();
|
||||
// The customer here is rejected pre-onboarding — they don't yet
|
||||
// have a portal account, so we can't send them to /support.
|
||||
// Instead point at the configured support address (if set).
|
||||
// If unset (e.g. early pilot before a support inbox exists), we
|
||||
// omit the follow-up line entirely rather than promise something
|
||||
// that goes nowhere — telling the customer to "reply to this
|
||||
// email" would be misleading because we send from a noreply box.
|
||||
const contactLineText = supportEmail
|
||||
? `If you have questions or would like to discuss this further, please contact us at ${supportEmail}.`
|
||||
: "";
|
||||
const contactLineHtml = supportEmail
|
||||
? `<p>If you have questions or would like to discuss this further, please contact us at <a href="mailto:${escapeHtml(supportEmail)}" style="color: #3b82f6;">${escapeHtml(supportEmail)}</a>.</p>`
|
||||
: "";
|
||||
|
||||
await getTransporter().sendMail({
|
||||
from: getFrom(),
|
||||
to,
|
||||
@@ -134,18 +166,20 @@ export async function sendRejectionEmail(
|
||||
"",
|
||||
`Thank you for your interest in PieCed IT. Unfortunately, we were unable to approve your onboarding request for ${companyName} at this time.`,
|
||||
notesBlock,
|
||||
"If you have questions or would like to discuss this further, please reply to this email.",
|
||||
contactLineText,
|
||||
"",
|
||||
"Best regards,",
|
||||
"PieCed IT",
|
||||
].join("\n"),
|
||||
]
|
||||
.filter((s) => s !== "")
|
||||
.join("\n"),
|
||||
html: `
|
||||
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 560px; margin: 0 auto; color: #e0e0e0; background: #1a1a1a; padding: 32px; border-radius: 12px;">
|
||||
<h2 style="color: #ffffff; margin-top: 0;">Update on your onboarding request</h2>
|
||||
<p>Hello ${safeName},</p>
|
||||
<p>Thank you for your interest in PieCed IT. Unfortunately, we were unable to approve your onboarding request for <strong>${safeCompany}</strong> at this time.</p>
|
||||
${notesHtml}
|
||||
<p>If you have questions or would like to discuss this further, please reply to this email.</p>
|
||||
${contactLineHtml}
|
||||
<hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
|
||||
<p style="color: #666; font-size: 12px;">PieCed IT — Hosted on-premises in Switzerland</p>
|
||||
</div>
|
||||
@@ -237,6 +271,15 @@ export async function sendResumeRejectionEmail(
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
// The customer has portal access (their tenant exists, they
|
||||
// just had a resume request rejected), so direct them to the
|
||||
// support ticket system for follow-up. We never tell them to
|
||||
// "reply to this email" because the from address is a noreply
|
||||
// mailbox.
|
||||
const contactLineText =
|
||||
"If you have questions, open a support ticket at https://app.pieced.ch/support.";
|
||||
const contactLineHtml = `<p>If you have questions, <a href="https://app.pieced.ch/support" style="color: #3b82f6;">open a support ticket</a>.</p>`;
|
||||
|
||||
await getTransporter().sendMail({
|
||||
from: getFrom(),
|
||||
to,
|
||||
@@ -248,7 +291,7 @@ export async function sendResumeRejectionEmail(
|
||||
notesBlock,
|
||||
"Your tenant remains suspended. As a reminder, your data is preserved for 60 days from the original cancellation date, after which it will be permanently deleted. You can submit a new reactivation request at any time before then.",
|
||||
"",
|
||||
"If you have questions, please reply to this email.",
|
||||
contactLineText,
|
||||
"",
|
||||
"Best regards,",
|
||||
"PieCed IT",
|
||||
@@ -260,7 +303,7 @@ export async function sendResumeRejectionEmail(
|
||||
<p>Thank you for your reactivation request for <strong>${safeCompany}</strong>. Unfortunately, we were unable to approve it at this time.</p>
|
||||
${notesHtml}
|
||||
<p>Your tenant remains suspended. As a reminder, your data is preserved for 60 days from the original cancellation date, after which it will be permanently deleted. You can submit a new reactivation request at any time before then.</p>
|
||||
<p>If you have questions, please reply to this email.</p>
|
||||
${contactLineHtml}
|
||||
<hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
|
||||
<p style="color: #666; font-size: 12px;">PieCed IT — Hosted on-premises in Switzerland</p>
|
||||
</div>
|
||||
@@ -319,6 +362,89 @@ export async function sendAdminNotificationEmail(
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Feature 6: resume-request admin notification
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Notify the admin distribution list that a customer has requested
|
||||
* reactivation of a suspended tenant. Distinct from the onboarding
|
||||
* notification because the action consequences differ (admin
|
||||
* approving a resume just unsuspends an existing tenant; no
|
||||
* provisioning runs), and because the customer's note — explaining
|
||||
* why they want reactivation — is meaningful context for the admin
|
||||
* triaging the queue.
|
||||
*
|
||||
* Skipped silently if ADMIN_NOTIFICATION_EMAIL isn't set, matching
|
||||
* the pattern of the other admin notification functions.
|
||||
*/
|
||||
export async function sendResumeRequestAdminNotificationEmail(params: {
|
||||
tenantName: string;
|
||||
companyName: string;
|
||||
contactName: string;
|
||||
contactEmail: string;
|
||||
customerNotes?: string | null;
|
||||
}): Promise<void> {
|
||||
const adminEmail = process.env.ADMIN_NOTIFICATION_EMAIL;
|
||||
if (!adminEmail) return;
|
||||
|
||||
const safeCompany = escapeHtml(params.companyName);
|
||||
const safeName = escapeHtml(params.contactName);
|
||||
const safeEmail = escapeHtml(params.contactEmail);
|
||||
const safeTenant = escapeHtml(params.tenantName);
|
||||
const safeNotes = params.customerNotes ? escapeHtml(params.customerNotes) : "";
|
||||
|
||||
const noteText = params.customerNotes
|
||||
? `\nCustomer's note:\n${params.customerNotes}\n`
|
||||
: "";
|
||||
const noteHtml = safeNotes
|
||||
? `<div style="background: #2a2a2a; border-left: 3px solid #3b82f6; padding: 12px 16px; border-radius: 6px; margin: 16px 0; white-space: pre-wrap;">
|
||||
<p style="color: #ccc; font-size: 13px; margin: 0 0 8px 0;"><strong>Customer's note:</strong></p>
|
||||
<p style="color: #e0e0e0; font-size: 13px; margin: 0;">${safeNotes}</p>
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
try {
|
||||
await getTransporter().sendMail({
|
||||
from: getFrom(),
|
||||
to: adminEmail,
|
||||
subject: `Reactivation request: ${params.companyName}`,
|
||||
text: [
|
||||
`A customer has requested reactivation of a suspended tenant.`,
|
||||
"",
|
||||
`Company: ${params.companyName}`,
|
||||
`Tenant: ${params.tenantName}`,
|
||||
`Contact: ${params.contactName} (${params.contactEmail})`,
|
||||
noteText,
|
||||
`Review at https://app.pieced.ch/admin`,
|
||||
]
|
||||
.filter((s) => s !== "")
|
||||
.join("\n"),
|
||||
html: `
|
||||
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 560px; margin: 0 auto; color: #e0e0e0; background: #1a1a1a; padding: 32px; border-radius: 12px;">
|
||||
<h2 style="color: #ffffff; margin-top: 0;">Reactivation request</h2>
|
||||
<p>A customer has requested reactivation of a suspended tenant.</p>
|
||||
<table style="color: #ccc; font-size: 14px; margin: 16px 0;">
|
||||
<tr><td style="padding: 4px 12px 4px 0; color: #888;">Company:</td><td>${safeCompany}</td></tr>
|
||||
<tr><td style="padding: 4px 12px 4px 0; color: #888;">Tenant:</td><td style="font-family: monospace;">${safeTenant}</td></tr>
|
||||
<tr><td style="padding: 4px 12px 4px 0; color: #888;">Contact:</td><td>${safeName} (${safeEmail})</td></tr>
|
||||
</table>
|
||||
${noteHtml}
|
||||
<p>
|
||||
<a href="https://app.pieced.ch/admin" style="display: inline-block; padding: 10px 24px; background: #3b82f6; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500;">
|
||||
Review Request
|
||||
</a>
|
||||
</p>
|
||||
<hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
|
||||
<p style="color: #666; font-size: 12px;">PieCed IT — Admin notification</p>
|
||||
</div>
|
||||
`,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to send resume request admin notification:", err);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Feature 5: support ticket emails
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@@ -175,7 +175,9 @@
|
||||
"cancelConfirmRetentionWarning": "Ihre Daten bleiben nach der Kündigung 60 Tage lang erhalten. Danach werden alle Tenant-Daten – Konfiguration, Geheimnisse, Konversationen und Dateien – endgültig gelöscht.",
|
||||
"suspendedSince": "Gekündigt am {date}",
|
||||
"suspendedDeletionIn": "Datenlöschung in {days, plural, one {# Tag} other {# Tagen}} ({date})",
|
||||
"suspendedDeletionImminent": "Daten werden jetzt gelöscht"
|
||||
"suspendedDeletionImminent": "Daten werden jetzt gelöscht",
|
||||
"requestReactivationNoteLabel": "Notiz an unser Team",
|
||||
"requestReactivationNotePlaceholder": "Alles, was unser Team wissen sollte – z. B. Grund der Reaktivierung, Dringlichkeit usw."
|
||||
},
|
||||
"usage": {
|
||||
"inputTokens": "Input-Tokens",
|
||||
|
||||
@@ -175,7 +175,9 @@
|
||||
"cancelConfirmRetentionWarning": "Your data is preserved for 60 days after cancellation. After that, all tenant data — configuration, secrets, conversations, and files — will be permanently deleted.",
|
||||
"suspendedSince": "Suspended on {date}",
|
||||
"suspendedDeletionIn": "data deletion in {days, plural, one {# day} other {# days}} ({date})",
|
||||
"suspendedDeletionImminent": "data is being deleted now"
|
||||
"suspendedDeletionImminent": "data is being deleted now",
|
||||
"requestReactivationNoteLabel": "Note for our team",
|
||||
"requestReactivationNotePlaceholder": "Anything our team should know — e.g. why you want to reactivate, urgency, etc."
|
||||
},
|
||||
"usage": {
|
||||
"inputTokens": "Input Tokens",
|
||||
|
||||
@@ -175,7 +175,9 @@
|
||||
"cancelConfirmRetentionWarning": "Vos données sont conservées pendant 60 jours après l'annulation. Passé ce délai, toutes les données du locataire — configuration, secrets, conversations et fichiers — seront définitivement supprimées.",
|
||||
"suspendedSince": "Suspendu le {date}",
|
||||
"suspendedDeletionIn": "suppression des données dans {days, plural, one {# jour} other {# jours}} ({date})",
|
||||
"suspendedDeletionImminent": "les données sont en cours de suppression"
|
||||
"suspendedDeletionImminent": "les données sont en cours de suppression",
|
||||
"requestReactivationNoteLabel": "Note pour notre équipe",
|
||||
"requestReactivationNotePlaceholder": "Tout ce que notre équipe devrait savoir — par exemple, pourquoi vous voulez réactiver, urgence, etc."
|
||||
},
|
||||
"usage": {
|
||||
"inputTokens": "Tokens d'entrée",
|
||||
|
||||
@@ -175,7 +175,9 @@
|
||||
"cancelConfirmRetentionWarning": "I tuoi dati sono conservati per 60 giorni dopo l'annullamento. Trascorso tale periodo, tutti i dati del tenant — configurazione, segreti, conversazioni e file — verranno eliminati definitivamente.",
|
||||
"suspendedSince": "Sospeso il {date}",
|
||||
"suspendedDeletionIn": "eliminazione dei dati tra {days, plural, one {# giorno} other {# giorni}} ({date})",
|
||||
"suspendedDeletionImminent": "i dati vengono eliminati ora"
|
||||
"suspendedDeletionImminent": "i dati vengono eliminati ora",
|
||||
"requestReactivationNoteLabel": "Nota per il nostro team",
|
||||
"requestReactivationNotePlaceholder": "Qualsiasi cosa il nostro team dovrebbe sapere — ad es. il motivo della riattivazione, l'urgenza, ecc."
|
||||
},
|
||||
"usage": {
|
||||
"inputTokens": "Token di input",
|
||||
|
||||
@@ -273,6 +273,13 @@ export interface TenantRequest {
|
||||
* domain-uniqueness check on subsequent registrations.
|
||||
*/
|
||||
isPersonal?: boolean;
|
||||
/**
|
||||
* Feature 6: free-form note from the customer, attached at request
|
||||
* creation time. Currently used by resume requests (customer's
|
||||
* explanation of why they want reactivation); kept optional and
|
||||
* generic so future flows can reuse without schema work.
|
||||
*/
|
||||
customerNotes?: string | null;
|
||||
/**
|
||||
* Bug 13: when set, the customer has explicitly dismissed a rejected
|
||||
* request from their dashboard. Used by `listActiveTenantRequestsByOrgId`
|
||||
|
||||
Reference in New Issue
Block a user