Compare commits

...

2 Commits

Author SHA1 Message Date
188bef2ece Budget setting and all dollar to chf
All checks were successful
Build and Push / build (push) Successful in 1m28s
2026-05-02 23:16:14 +02:00
57258bca92 Budget setting and all dollar to chf
All checks were successful
Build and Push / build (push) Successful in 1m31s
2026-05-02 22:59:51 +02:00
2 changed files with 47 additions and 13 deletions

View File

@@ -43,6 +43,19 @@ export default async function TenantDetailPage({
// the same page but with edit controls hidden / fields read-only. // the same page but with edit controls hidden / fields read-only.
const canEdit = canMutate(user); const canEdit = canMutate(user);
// TEMP DIAGNOSTIC for budget-card non-rendering. Logs the prop
// values that flow into UsageDisplay so we can see which one is
// turning the editable variant off. Remove once cause is found.
console.log(
"[tenant page] budget edit props",
JSON.stringify({
tenantName: name,
canEdit,
isPlatform: user.isPlatform,
roles: user.roles,
})
);
// Bug 31: customer-side cancel/resume control. Same gate as canEdit // Bug 31: customer-side cancel/resume control. Same gate as canEdit
// — only owners (or platform staff) may toggle the subscription. // — only owners (or platform staff) may toggle the subscription.
// The current state comes from spec.suspend on the CR. // The current state comes from spec.suspend on the CR.
@@ -199,7 +212,7 @@ export default async function TenantDetailPage({
<h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3"> <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
{t("usage")} {t("usage")}
</h2> </h2>
<UsageDisplay tenant={name} /> <UsageDisplay tenant={name} canEditBudget={canEdit} />
</section> </section>
{/* Packages */} {/* Packages */}

View File

@@ -126,12 +126,35 @@ export function BudgetEditableCard({
<> <>
<button <button
type="button" type="button"
onClick={() => setOpen(true)} onClick={() => {
className="bg-surface-1 border border-border rounded-xl p-4 text-left hover:border-text-secondary transition-colors group" // Temporary debug aid — if clicks reach the handler we'll
// see this in the browser console. Remove once confirmed.
console.log("[BudgetEditableCard] open clicked");
setOpen(true);
}}
className="bg-surface-1 border border-accent/40 rounded-xl p-4 text-left hover:border-accent transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent/40 group block w-full"
> >
<div className="text-xs text-text-muted mb-1 flex items-center justify-between"> <div className="text-xs text-text-muted mb-1 flex items-center justify-between">
<span>{t("budget")}</span> <span>{t("budget")}</span>
<span className="text-[10px] text-text-muted opacity-0 group-hover:opacity-100 transition-opacity"> <span className="text-[10px] text-accent inline-flex items-center gap-1">
{/* Pencil icon — unambiguous "this is editable" affordance.
Visible at all times (was hover-only before, which on
touch devices and at-a-glance scanning gave no
indication the card was clickable). */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="11"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
</svg>
{t("budgetEdit")} {t("budgetEdit")}
</span> </span>
</div> </div>
@@ -140,14 +163,13 @@ export function BudgetEditableCard({
</div> </div>
</button> </button>
{open && ( <Modal open={open} onClose={() => setOpen(false)} ariaLabel={t("budgetEditTitle")}>
<Modal open={open} onClose={() => setOpen(false)} ariaLabel={t("budgetEditTitle")}> <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
<h3 className="font-display text-lg font-semibold text-text-primary mb-2"> {t("budgetEditTitle")}
{t("budgetEditTitle")} </h3>
</h3> <p className="text-sm text-text-secondary mb-4">
<p className="text-sm text-text-secondary mb-4"> {t("budgetEditDescription")}
{t("budgetEditDescription")} </p>
</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"> <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")} {t("budgetOrgScopeWarning")}
</div> </div>
@@ -256,7 +278,6 @@ export function BudgetEditableCard({
</div> </div>
</form> </form>
</Modal> </Modal>
)}
</> </>
); );
} }