Phase6: Customer Billing details

src/components/billing/running-total-widget.tsx

@@ -11,6 +11,17 @@ type CurrentResponse =
   | { draft: InvoiceDraft }
   | { error: string; code?: string };
 
+interface Props {
+  /**
+   * Whether the viewing user has org-owner role. Drives the
+   * "complete your billing details" CTA — only owners can edit
+   * billing settings, so non-owners see a softer message asking
+   * them to contact their org owner instead. The flag is computed
+   * server-side and passed in to avoid a second API round-trip.
+   */
+  isOwner: boolean;
+}
+
 /**
  * Live running total for the current calendar month.
  *
@@ -28,7 +39,7 @@ type CurrentResponse =
  * No polling — the page is static enough that an explicit
  * "refresh" link is good enough if the user wants newer numbers.
  */
-export function RunningTotalWidget() {
+export function RunningTotalWidget({ isOwner }: Props) {
   const t = useTranslations("customerBilling");
   const fmt = useFormatter();
   const [data, setData] = useState<CurrentResponse | null>(null);
@@ -62,13 +73,29 @@ export function RunningTotalWidget() {
     );
   }
   if (!data || "error" in data) {
+    const noConfig =
+      data && "code" in data && data.code === "COMPUTE_FAILED";
     return (
       <Card>
         <p className="text-sm text-text-secondary py-2">
-          {data && "code" in data && data.code === "COMPUTE_FAILED"
-            ? t("noBillingConfig")
-            : t("currentPeriodError")}
+          {noConfig ? t("noBillingConfig") : t("currentPeriodError")}
         </p>
+        {/* Phase 6: owner-only CTA. Non-owners can't edit billing
+            settings, so we show them a "contact owner" hint instead
+            — that's gentler than a button that 404s on click. */}
+        {noConfig && isOwner && (
+          <Link
+            href="/settings/billing"
+            className="inline-block mt-2 px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors"
+          >
+            {t("configureBillingCta")}
+          </Link>
+        )}
+        {noConfig && !isOwner && (
+          <p className="text-xs text-text-muted italic mt-2">
+            {t("noBillingConfigNonOwner")}
+          </p>
+        )}
       </Card>
     );
   }