@burdenoff/microfe-billing 2026.731.1 → 2026.802.1

package/dist/billing/modules/credits/pages/CreditTransactionsPage.js

@@ -13,7 +13,7 @@ import { useBillingNavigate as f } from "../../../hooks/useBillingNavigate.js";
 import { useCreditTransactions as p } from "../hooks/useCredits.js";
 import { useState as m } from "react";
 import { ArrowLeft as h, Calendar as g, CheckCircle as _, ChevronLeft as v, ChevronRight as y, Coins as b, CreditCard as x, FileText as S, Mail as C, Minus as w, Plus as T, XCircle as E } from "lucide-react";
-import { useParams as D } from "react-router-dom";
+import { useParams as D } from "react-router";
 import { jsx as O, jsxs as k } from "react/jsx-runtime";
 import { useI18n as A } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { EmphasisPanel as j, IllustratedEmptyState as M, PagePurpose as N } from "@burdenoff/fe-libs/ui";

package/dist/billing/modules/credits/pages/CreditTransactionsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreditTransactionsPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditTransactionsPage.tsx"],"sourcesContent":["/**\n * Credits Module - Credit Transactions Page\n * Displays credit transaction history for a specific billing account\n */\n\nimport { useState, type FC } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  Coins,\n  CreditCard,\n  Mail,\n  ChevronLeft,\n  ChevronRight,\n  Plus,\n  Minus,\n  CheckCircle,\n  XCircle,\n  FileText,\n  Calendar,\n} from 'lucide-react';\nimport { useCreditTransactions } from '../hooks/useCredits';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { AccessDenied, PageHeader, EmptyState, ServerError } from '../../../shared/components';\nimport {\n  formatDateTime,\n  formatRelativeTime,\n  formatCreditTransactionType,\n  isServerError,\n} from '../../../shared/utils';\nimport {\n  getCreditTransactionStatusColor,\n  getStatusBadgeClasses,\n} from '../../../shared/utils/status';\nimport type { CreditTransaction, CreditTransactionType } from '../../../shared/types';\nimport { useGetBillingAccountQuery } from '../../../../generated/global-operations';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { IllustratedEmptyState, PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\n\ntype FilterType = 'all' | CreditTransactionType;\n\nexport const CreditTransactionsPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { billingAccountId } = useParams<{ billingAccountId: string }>();\n  const permissions = useBillingPermissions();\n  const navigateTo = useBillingNavigate();\n\n  const [days, setDays] = useState(30);\n  const [filterType, setFilterType] = useState<FilterType>('all');\n  const [page, setPage] = useState(1);\n  const pageSize = 20;\n\n  // Fetch billing account details\n  const { data: accountData, loading: isLoadingAccount } = useGetBillingAccountQuery({\n    variables: { id: billingAccountId! },\n    skip: !billingAccountId,\n  });\n\n  const billingAccount = accountData?.getBillingAccount;\n\n  // Fetch credit transactions\n  const {\n    transactions,\n    pagination,\n    isLoading: isLoadingTransactions,\n    error,\n    refetch,\n  } = useCreditTransactions({\n    billingAccountId: billingAccountId || '',\n    days,\n    page,\n    pageSize,\n  });\n\n  // Permission check\n  if (!permissions.canViewCredits) {\n    return <AccessDenied message=\"You don't have permission to view credit history.\" />;\n  }\n\n  // Show error if no billing account ID provided\n  if (!billingAccountId) {\n    return (\n      <div className=\"p-6\">\n        <EmptyState\n          icon={\n            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          }\n          title=\"No billing account selected\"\n          description=\"Please select a billing account from the overview page to view credit history.\"\n        />\n      </div>\n    );\n  }\n\n  // Show server error if backend is down\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load credit transactions. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  const isLoading = isLoadingAccount || isLoadingTransactions;\n\n  // Filter transactions\n  const filteredTransactions =\n    filterType === 'all' ? transactions : transactions.filter((t) => t.type === filterType);\n\n  // Calculate total pages\n  const totalPages = Math.ceil(pagination.totalCount / pageSize);\n\n  // Pagination handlers\n  const goToNextPage = () => {\n    if (pagination.hasMore) {\n      setPage((p) => p + 1);\n    }\n  };\n\n  const goToPreviousPage = () => {\n    if (page > 1) {\n      setPage((p) => p - 1);\n    }\n  };\n\n  if (isLoading && !billingAccount) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"space-y-2\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Back Button */}\n      <button\n        type=\"button\"\n        onClick={() => navigateTo('/overview')}\n        className=\"inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n      >\n        <ArrowLeft className=\"size-4\" />\n        {tr('billing.credits.backToOverview', 'Back to Overview')}\n      </button>\n\n      <PageHeader\n        title=\"Credit History\"\n        description={\n          billingAccount\n            ? `Credit transactions for ${billingAccount.name}`\n            : 'View your credit transaction history'\n        }\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.credits.historyPurpose',\n          'A detailed ledger of every credit added to or spent from this billing account — purchases, grants, usage deductions and adjustments. Use it to understand exactly how your credit balance changed over time.'\n        )}\n      </PagePurpose>\n\n      {/* Billing Account Info Card — primary emphasis zone */}\n      {billingAccount && (\n        <EmphasisPanel className=\"p-4\">\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4\">\n            {/* Account Name & Status */}\n            <div className=\"flex items-start gap-2\">\n              <CreditCard className=\"size-4 text-text-secondary mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-text-secondary mb-0.5\">Account</p>\n                <p className=\"text-sm font-medium\">{billingAccount.name}</p>\n                {billingAccount.isActive ? (\n                  <span className=\"inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-success-bg-subtle text-status-success-text\">\n                    <CheckCircle className=\"size-3\" />\n                    Active\n                  </span>\n                ) : (\n                  <span className=\"inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-error-bg-subtle text-status-error-text\">\n                    <XCircle className=\"size-3\" />\n                    Inactive\n                  </span>\n                )}\n              </div>\n            </div>\n\n            {/* Email */}\n            <div className=\"flex items-start gap-2\">\n              <Mail className=\"size-4 text-text-secondary mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-text-secondary mb-0.5\">Email</p>\n                <p className=\"text-sm font-medium break-all\">\n                  {billingAccount.billingEmail || billingAccount.email}\n                </p>\n              </div>\n            </div>\n\n            {/* Credit Balance */}\n            <div className=\"flex items-start gap-2\">\n              <Coins className=\"size-4 text-text-secondary mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-text-secondary mb-0.5\">Credit Balance</p>\n                <p className=\"text-sm font-semibold text-text-primary\">\n                  {(billingAccount.creditAmount || 0).toLocaleString()} Credits\n                </p>\n              </div>\n            </div>\n\n            {/* Tax ID */}\n            <div className=\"flex items-start gap-2\">\n              <FileText className=\"size-4 text-text-secondary mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-text-secondary mb-0.5\">Tax ID</p>\n                <p className=\"text-sm font-medium\">{billingAccount.taxId || '-'}</p>\n              </div>\n            </div>\n\n            {/* Account Created */}\n            <div className=\"flex items-start gap-2\">\n              <Calendar className=\"size-4 text-text-secondary mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-text-secondary mb-0.5\">Member Since</p>\n                <p className=\"text-sm font-medium\">\n                  {billingAccount.createdAt ? formatDateTime(billingAccount.createdAt) : '-'}\n                </p>\n              </div>\n            </div>\n          </div>\n        </EmphasisPanel>\n      )}\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle\">\n        {/* Time Range */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {[7, 30, 90].map((d) => (\n            <button\n              type=\"button\"\n              key={d}\n              onClick={() => {\n                setDays(d);\n                setPage(1); // Reset to first page on filter change\n              }}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${\n                days === d\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {d}d\n            </button>\n          ))}\n        </div>\n\n        {/* Transaction Type Filter */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {(['all', 'purchase', 'usage', 'adjustment'] as FilterType[]).map((type) => (\n            <button\n              type=\"button\"\n              key={type}\n              onClick={() => {\n                setFilterType(type);\n                setPage(1); // Reset to first page on filter change\n              }}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors capitalize ${\n                filterType === type\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {type === 'all' ? 'All' : formatCreditTransactionType(type as CreditTransactionType)}\n            </button>\n          ))}\n        </div>\n\n        {/* Transaction count */}\n        <div className=\"ml-auto text-sm text-text-secondary\">\n          {pagination.totalCount} transaction{pagination.totalCount !== 1 ? 's' : ''} in last {days}{' '}\n          days\n        </div>\n      </div>\n\n      {/* Transactions List */}\n      {filteredTransactions.length === 0 ? (\n        <IllustratedEmptyState\n          illustration={filterType !== 'all' ? 'empty-search' : 'empty-data'}\n          title=\"No credit transactions found\"\n          description={\n            filterType !== 'all'\n              ? 'No transactions match your filter.'\n              : 'Your credit transaction history will appear here.'\n          }\n        />\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredTransactions.map((transaction) => (\n            <CreditTransactionRow key={transaction.id} transaction={transaction} />\n          ))}\n        </div>\n      )}\n\n      {/* Pagination Controls */}\n      {pagination.totalCount > 0 && (\n        <div className=\"flex items-center justify-between border-t border-border-subtle pt-4\">\n          <p className=\"text-sm text-text-secondary\">\n            Showing {(page - 1) * pageSize + 1} to{' '}\n            {Math.min(page * pageSize, pagination.totalCount)} of {pagination.totalCount}{' '}\n            transactions\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              onClick={goToPreviousPage}\n              disabled={page <= 1}\n              className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n            >\n              <ChevronLeft className=\"size-4\" />\n              Previous\n            </button>\n            <span className=\"text-sm text-text-secondary px-2\">\n              Page {page} of {totalPages || 1}\n            </span>\n            <button\n              type=\"button\"\n              onClick={goToNextPage}\n              disabled={!pagination.hasMore}\n              className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n            >\n              Next\n              <ChevronRight className=\"size-4\" />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Credit Transaction Row Component\n// ============================================================================\n\ninterface CreditTransactionRowProps {\n  transaction: CreditTransaction;\n}\n\nconst CreditTransactionRow: FC<CreditTransactionRowProps> = ({ transaction }) => {\n  const statusColor = getCreditTransactionStatusColor(transaction.status);\n\n  // FIX: Check the actual amount value, not just the transaction type\n  // Negative amounts are debits (show red with \"-\"), positive amounts are credits (show green with \"+\")\n  const amount = Number(transaction.amount);\n  const isCredit = amount > 0;\n  const absAmount = Math.abs(amount);\n\n  const getTransactionIcon = () => {\n    // For adjustments, show different icon based on amount sign\n    if (transaction.type === 'adjustment') {\n      return isCredit ? (\n        <Plus className=\"size-4 text-status-success-text\" />\n      ) : (\n        <Minus className=\"size-4 text-status-error-text\" />\n      );\n    }\n\n    switch (transaction.type) {\n      case 'purchase':\n        return <Plus className=\"size-4 text-status-success-text\" />;\n      case 'usage':\n        return <Minus className=\"size-4 text-status-warning-text\" />;\n      default:\n        return <Coins className=\"size-4 text-text-secondary\" />;\n    }\n  };\n\n  const getIconBackground = () => {\n    // For adjustments, show different background based on amount sign\n    if (transaction.type === 'adjustment') {\n      return isCredit ? 'bg-status-success-bg-subtle' : 'bg-status-error-bg-subtle';\n    }\n\n    switch (transaction.type) {\n      case 'purchase':\n        return 'bg-status-success-bg-subtle';\n      case 'usage':\n        return 'bg-status-warning-bg-subtle';\n      default:\n        return 'bg-bg-sunken';\n    }\n  };\n\n  return (\n    <div className=\"flex items-center gap-4 p-4 border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 hover:shadow-sm transition-shadow\">\n      {/* Icon */}\n      <div\n        className={`size-10 rounded-full flex items-center justify-center flex-shrink-0 ${getIconBackground()}`}\n      >\n        {getTransactionIcon()}\n      </div>\n\n      {/* Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          <p className=\"font-medium text-text-primary capitalize\">\n            {formatCreditTransactionType(transaction.type)}\n          </p>\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n          >\n            {transaction.status}\n          </span>\n          {transaction.entityType && (\n            <span className=\"px-2 py-0.5 text-xs font-medium rounded bg-bg-sunken text-text-secondary capitalize\">\n              {transaction.entityType}\n            </span>\n          )}\n        </div>\n        <p className=\"text-sm text-text-secondary mt-0.5\">\n          {formatRelativeTime(transaction.createdAt)} • {formatDateTime(transaction.createdAt)}\n        </p>\n        {transaction.productId && transaction.productId !== 'default' && (\n          <p className=\"text-xs text-text-secondary mt-1\">Product: {transaction.productId}</p>\n        )}\n      </div>\n\n      {/* Amount */}\n      <div className=\"text-right flex-shrink-0\">\n        <p\n          className={`font-semibold text-lg ${isCredit ? 'text-status-success-text' : 'text-status-error-text'}`}\n        >\n          {isCredit ? '+' : '-'}\n          {absAmount.toLocaleString()} credits\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,UAAmC;CAC9C,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,EAAE,wBAAqB,GAAyC,EAChE,IAAc,GAAuB,EACrC,IAAa,GAAoB,EAEjC,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAY,KAAiB,EAAqB,MAAM,EACzD,CAAC,GAAM,KAAW,EAAS,EAAE,EAI7B,EAAE,MAAM,GAAa,SAAS,MAAqB,EAA0B;EACjF,WAAW,EAAE,IAAI,GAAmB;EACpC,MAAM,CAAC;EACR,CAAC,EAEI,IAAiB,GAAa,mBAG9B,EACJ,iBACA,eACA,WAAW,GACX,UACA,eACE,EAAsB;EACxB,kBAAkB,KAAoB;EACtC;EACA;EACA;EACD,CAAC;AAGF,KAAI,CAAC,EAAY,eACf,QAAO,kBAAC,GAAD,EAAc,SAAQ,qDAAsD,CAAA;AAIrF,KAAI,CAAC,EACH,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,MACE,kBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,SAAQ;IACR,QAAO;cAEP,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAM;GACN,aAAY;GACZ,CAAA;EACE,CAAA;AAKV,KAAI,KAAS,EAAc,EAAM,CAC/B,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,OAAM;GACN,SAAQ;GACR,eAAe,GAAS;GACxB,WAAA;GACA,CAAA;EACE,CAAA;CAIV,IAAM,IAAY,KAAoB,GAGhC,IACJ,MAAe,QAAQ,IAAe,EAAa,QAAQ,MAAM,EAAE,SAAS,EAAW,EAGnF,IAAa,KAAK,KAAK,EAAW,aAAa,GAAS;AA4B9D,QAbI,KAAa,CAAC,IAEd,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,EAC/D,kBAAC,OAAD;GAAK,WAAU;aACZ;IAAC;IAAG;IAAG;IAAG;IAAG;IAAE,CAAC,KAAK,MACpB,kBAAC,OAAD,EAAa,WAAU,2CAA4C,EAAzD,EAAyD,CACnE;GACE,CAAA,CACF;MAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAW,YAAY;IACtC,WAAU;cAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAC/B,EAAG,kCAAkC,mBAAmB,CAClD;;GAET,kBAAC,GAAD;IACE,OAAM;IACN,aACE,IACI,2BAA2B,EAAe,SAC1C;IAEN,CAAA;GAEF,kBAAC,GAAD,EAAA,UACG,EACC,kCACA,+MACD,EACW,CAAA;GAGb,KACC,kBAAC,GAAD;IAAe,WAAU;cACvB,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAY,WAAU,qCAAsC,CAAA,EAC5D,kBAAC,OAAD,EAAA,UAAA;QACE,kBAAC,KAAD;SAAG,WAAU;mBAAqC;SAAW,CAAA;QAC7D,kBAAC,KAAD;SAAG,WAAU;mBAAuB,EAAe;SAAS,CAAA;QAC3D,EAAe,WACd,kBAAC,QAAD;SAAM,WAAU;mBAAhB,CACE,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA,EAAA,SAE7B;aAEP,kBAAC,QAAD;SAAM,WAAU;mBAAhB,CACE,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA,EAAA,WAEzB;;QAEL,EAAA,CAAA,CACF;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,qCAAsC,CAAA,EACtD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAqC;QAAS,CAAA,EAC3D,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAe,gBAAgB,EAAe;QAC7C,CAAA,CACA,EAAA,CAAA,CACF;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,qCAAsC,CAAA,EACvD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAqC;QAAkB,CAAA,EACpE,kBAAC,KAAD;QAAG,WAAU;kBAAb,EACI,EAAe,gBAAgB,GAAG,gBAAgB,EAAC,WACnD;UACA,EAAA,CAAA,CACF;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAU,WAAU,qCAAsC,CAAA,EAC1D,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAqC;QAAU,CAAA,EAC5D,kBAAC,KAAD;QAAG,WAAU;kBAAuB,EAAe,SAAS;QAAQ,CAAA,CAChE,EAAA,CAAA,CACF;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAU,WAAU,qCAAsC,CAAA,EAC1D,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAqC;QAAgB,CAAA,EAClE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAe,YAAY,EAAe,EAAe,UAAU,GAAG;QACrE,CAAA,CACA,EAAA,CAAA,CACF;;MACF;;IACQ,CAAA;GAIlB,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEE,kBAAC,OAAD;MAAK,WAAU;gBACZ;OAAC;OAAG;OAAI;OAAG,CAAC,KAAK,MAChB,kBAAC,UAAD;OACE,MAAK;OAEL,eAAe;AAEb,QADA,EAAQ,EAAE,EACV,EAAQ,EAAE;;OAEZ,WAAW,oEACT,MAAS,IACL,8CACA;iBAVR,CAaG,GAAE,IACI;SAZF,EAYE,CACT;MACE,CAAA;KAGN,kBAAC,OAAD;MAAK,WAAU;gBACX;OAAC;OAAO;OAAY;OAAS;OAAa,CAAkB,KAAK,MACjE,kBAAC,UAAD;OACE,MAAK;OAEL,eAAe;AAEb,QADA,EAAc,EAAK,EACnB,EAAQ,EAAE;;OAEZ,WAAW,+EACT,MAAe,IACX,8CACA;iBAGL,MAAS,QAAQ,QAAQ,EAA4B,EAA8B;OAC7E,EAZF,EAYE,CACT;MACE,CAAA;KAGN,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACG,EAAW;OAAW;OAAa,EAAW,eAAe,IAAU,KAAN;OAAS;OAAU;OAAM;OAAI;OAE3F;;KACF;;GAGL,EAAqB,WAAW,IAC/B,kBAAC,GAAD;IACE,cAAc,MAAe,QAAyB,eAAjB;IACrC,OAAM;IACN,aACE,MAAe,QAEX,sDADA;IAGN,CAAA,GAEF,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,KAAK,MACzB,kBAAC,GAAD,EAAwD,gBAAe,EAA5C,EAAY,GAAgC,CACvE;IACE,CAAA;GAIP,EAAW,aAAa,KACvB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA2C;OAC/B,IAAO,KAAK,KAAW;MAAE;MAAI;MACtC,KAAK,IAAI,IAAO,IAAU,EAAW,WAAW;MAAC;MAAK,EAAW;MAAY;MAAI;MAEhF;QACJ,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,UAAD;OACE,MAAK;OACL,eArMmB;AAC7B,QAAI,IAAO,KACT,GAAS,MAAM,IAAI,EAAE;;OAoMb,UAAU,KAAQ;OAClB,WAAU;iBAJZ,CAME,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA,EAAA,WAE3B;;MACT,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QAAmD;QAC3C;QAAK;QAAK,KAAc;QACzB;;MACP,kBAAC,UAAD;OACE,MAAK;OACL,eAvNe;AACzB,QAAI,EAAW,WACb,GAAS,MAAM,IAAI,EAAE;;OAsNb,UAAU,CAAC,EAAW;OACtB,WAAU;iBAJZ,CAKC,QAEC,kBAAC,GAAD,EAAc,WAAU,UAAW,CAAA,CAC5B;;MACL;OACF;;GAEJ;;GAYJ,KAAuD,EAAE,qBAAkB;CAC/E,IAAM,IAAc,EAAgC,EAAY,OAAO,EAIjE,IAAS,OAAO,EAAY,OAAO,EACnC,IAAW,IAAS,GACpB,IAAY,KAAK,IAAI,EAAO;AAsClC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IACE,WAAW,8EApBe;AAE9B,SAAI,EAAY,SAAS,aACvB,QAAO,IAAW,gCAAgC;AAGpD,aAAQ,EAAY,MAApB;MACE,KAAK,WACH,QAAO;MACT,KAAK,QACH,QAAO;MACT,QACE,QAAO;;QAQ8F;qBAxC1E;AAE/B,SAAI,EAAY,SAAS,aACvB,QAAO,IACL,kBAAC,GAAD,EAAM,WAAU,mCAAoC,CAAA,GAEpD,kBAAC,GAAD,EAAO,WAAU,iCAAkC,CAAA;AAIvD,aAAQ,EAAY,MAApB;MACE,KAAK,WACH,QAAO,kBAAC,GAAD,EAAM,WAAU,mCAAoC,CAAA;MAC7D,KAAK,QACH,QAAO,kBAAC,GAAD,EAAO,WAAU,mCAAoC,CAAA;MAC9D,QACE,QAAO,kBAAC,GAAD,EAAO,WAAU,8BAA+B,CAAA;;QA0BlC;IACjB,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAA4B,EAAY,KAAK;QAC5C,CAAA;OACJ,kBAAC,QAAD;QACE,WAAW,2CAA2C,EAAsB,EAAY;kBAEvF,EAAY;QACR,CAAA;OACN,EAAY,cACX,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAY;QACR,CAAA;OAEL;;KACN,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG,EAAmB,EAAY,UAAU;OAAC;OAAI,EAAe,EAAY,UAAU;OAClF;;KACH,EAAY,aAAa,EAAY,cAAc,aAClD,kBAAC,KAAD;MAAG,WAAU;gBAAb,CAAgD,aAAU,EAAY,UAAc;;KAElF;;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,KAAD;KACE,WAAW,yBAAyB,IAAW,6BAA6B;eAD9E;MAGG,IAAW,MAAM;MACjB,EAAU,gBAAgB;MAAC;MAC1B;;IACA,CAAA;GACF"}
+{"version":3,"file":"CreditTransactionsPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditTransactionsPage.tsx"],"sourcesContent":["/**\n * Credits Module - Credit Transactions Page\n * Displays credit transaction history for a specific billing account\n */\n\nimport { useState, type FC } from 'react';\nimport { useParams } from 'react-router';\nimport {\n  ArrowLeft,\n  Coins,\n  CreditCard,\n  Mail,\n  ChevronLeft,\n  ChevronRight,\n  Plus,\n  Minus,\n  CheckCircle,\n  XCircle,\n  FileText,\n  Calendar,\n} from 'lucide-react';\nimport { useCreditTransactions } from '../hooks/useCredits';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { AccessDenied, PageHeader, EmptyState, ServerError } from '../../../shared/components';\nimport {\n  formatDateTime,\n  formatRelativeTime,\n  formatCreditTransactionType,\n  isServerError,\n} from '../../../shared/utils';\nimport {\n  getCreditTransactionStatusColor,\n  getStatusBadgeClasses,\n} from '../../../shared/utils/status';\nimport type { CreditTransaction, CreditTransactionType } from '../../../shared/types';\nimport { useGetBillingAccountQuery } from '../../../../generated/global-operations';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { IllustratedEmptyState, PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\n\ntype FilterType = 'all' | CreditTransactionType;\n\nexport const CreditTransactionsPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { billingAccountId } = useParams<{ billingAccountId: string }>();\n  const permissions = useBillingPermissions();\n  const navigateTo = useBillingNavigate();\n\n  const [days, setDays] = useState(30);\n  const [filterType, setFilterType] = useState<FilterType>('all');\n  const [page, setPage] = useState(1);\n  const pageSize = 20;\n\n  // Fetch billing account details\n  const { data: accountData, loading: isLoadingAccount } = useGetBillingAccountQuery({\n    variables: { id: billingAccountId! },\n    skip: !billingAccountId,\n  });\n\n  const billingAccount = accountData?.getBillingAccount;\n\n  // Fetch credit transactions\n  const {\n    transactions,\n    pagination,\n    isLoading: isLoadingTransactions,\n    error,\n    refetch,\n  } = useCreditTransactions({\n    billingAccountId: billingAccountId || '',\n    days,\n    page,\n    pageSize,\n  });\n\n  // Permission check\n  if (!permissions.canViewCredits) {\n    return <AccessDenied message=\"You don't have permission to view credit history.\" />;\n  }\n\n  // Show error if no billing account ID provided\n  if (!billingAccountId) {\n    return (\n      <div className=\"p-6\">\n        <EmptyState\n          icon={\n            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          }\n          title=\"No billing account selected\"\n          description=\"Please select a billing account from the overview page to view credit history.\"\n        />\n      </div>\n    );\n  }\n\n  // Show server error if backend is down\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load credit transactions. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  const isLoading = isLoadingAccount || isLoadingTransactions;\n\n  // Filter transactions\n  const filteredTransactions =\n    filterType === 'all' ? transactions : transactions.filter((t) => t.type === filterType);\n\n  // Calculate total pages\n  const totalPages = Math.ceil(pagination.totalCount / pageSize);\n\n  // Pagination handlers\n  const goToNextPage = () => {\n    if (pagination.hasMore) {\n      setPage((p) => p + 1);\n    }\n  };\n\n  const goToPreviousPage = () => {\n    if (page > 1) {\n      setPage((p) => p - 1);\n    }\n  };\n\n  if (isLoading && !billingAccount) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"space-y-2\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Back Button */}\n      <button\n        type=\"button\"\n        onClick={() => navigateTo('/overview')}\n        className=\"inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n      >\n        <ArrowLeft className=\"size-4\" />\n        {tr('billing.credits.backToOverview', 'Back to Overview')}\n      </button>\n\n      <PageHeader\n        title=\"Credit History\"\n        description={\n          billingAccount\n            ? `Credit transactions for ${billingAccount.name}`\n            : 'View your credit transaction history'\n        }\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.credits.historyPurpose',\n          'A detailed ledger of every credit added to or spent from this billing account — purchases, grants, usage deductions and adjustments. Use it to understand exactly how your credit balance changed over time.'\n        )}\n      </PagePurpose>\n\n      {/* Billing Account Info Card — primary emphasis zone */}\n      {billingAccount && (\n        <EmphasisPanel className=\"p-4\">\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4\">\n            {/* Account Name & Status */}\n            <div className=\"flex items-start gap-2\">\n              <CreditCard className=\"size-4 text-text-secondary mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-text-secondary mb-0.5\">Account</p>\n                <p className=\"text-sm font-medium\">{billingAccount.name}</p>\n                {billingAccount.isActive ? (\n                  <span className=\"inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-success-bg-subtle text-status-success-text\">\n                    <CheckCircle className=\"size-3\" />\n                    Active\n                  </span>\n                ) : (\n                  <span className=\"inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-error-bg-subtle text-status-error-text\">\n                    <XCircle className=\"size-3\" />\n                    Inactive\n                  </span>\n                )}\n              </div>\n            </div>\n\n            {/* Email */}\n            <div className=\"flex items-start gap-2\">\n              <Mail className=\"size-4 text-text-secondary mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-text-secondary mb-0.5\">Email</p>\n                <p className=\"text-sm font-medium break-all\">\n                  {billingAccount.billingEmail || billingAccount.email}\n                </p>\n              </div>\n            </div>\n\n            {/* Credit Balance */}\n            <div className=\"flex items-start gap-2\">\n              <Coins className=\"size-4 text-text-secondary mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-text-secondary mb-0.5\">Credit Balance</p>\n                <p className=\"text-sm font-semibold text-text-primary\">\n                  {(billingAccount.creditAmount || 0).toLocaleString()} Credits\n                </p>\n              </div>\n            </div>\n\n            {/* Tax ID */}\n            <div className=\"flex items-start gap-2\">\n              <FileText className=\"size-4 text-text-secondary mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-text-secondary mb-0.5\">Tax ID</p>\n                <p className=\"text-sm font-medium\">{billingAccount.taxId || '-'}</p>\n              </div>\n            </div>\n\n            {/* Account Created */}\n            <div className=\"flex items-start gap-2\">\n              <Calendar className=\"size-4 text-text-secondary mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-text-secondary mb-0.5\">Member Since</p>\n                <p className=\"text-sm font-medium\">\n                  {billingAccount.createdAt ? formatDateTime(billingAccount.createdAt) : '-'}\n                </p>\n              </div>\n            </div>\n          </div>\n        </EmphasisPanel>\n      )}\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle\">\n        {/* Time Range */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {[7, 30, 90].map((d) => (\n            <button\n              type=\"button\"\n              key={d}\n              onClick={() => {\n                setDays(d);\n                setPage(1); // Reset to first page on filter change\n              }}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${\n                days === d\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {d}d\n            </button>\n          ))}\n        </div>\n\n        {/* Transaction Type Filter */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {(['all', 'purchase', 'usage', 'adjustment'] as FilterType[]).map((type) => (\n            <button\n              type=\"button\"\n              key={type}\n              onClick={() => {\n                setFilterType(type);\n                setPage(1); // Reset to first page on filter change\n              }}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors capitalize ${\n                filterType === type\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {type === 'all' ? 'All' : formatCreditTransactionType(type as CreditTransactionType)}\n            </button>\n          ))}\n        </div>\n\n        {/* Transaction count */}\n        <div className=\"ml-auto text-sm text-text-secondary\">\n          {pagination.totalCount} transaction{pagination.totalCount !== 1 ? 's' : ''} in last {days}{' '}\n          days\n        </div>\n      </div>\n\n      {/* Transactions List */}\n      {filteredTransactions.length === 0 ? (\n        <IllustratedEmptyState\n          illustration={filterType !== 'all' ? 'empty-search' : 'empty-data'}\n          title=\"No credit transactions found\"\n          description={\n            filterType !== 'all'\n              ? 'No transactions match your filter.'\n              : 'Your credit transaction history will appear here.'\n          }\n        />\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredTransactions.map((transaction) => (\n            <CreditTransactionRow key={transaction.id} transaction={transaction} />\n          ))}\n        </div>\n      )}\n\n      {/* Pagination Controls */}\n      {pagination.totalCount > 0 && (\n        <div className=\"flex items-center justify-between border-t border-border-subtle pt-4\">\n          <p className=\"text-sm text-text-secondary\">\n            Showing {(page - 1) * pageSize + 1} to{' '}\n            {Math.min(page * pageSize, pagination.totalCount)} of {pagination.totalCount}{' '}\n            transactions\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              onClick={goToPreviousPage}\n              disabled={page <= 1}\n              className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n            >\n              <ChevronLeft className=\"size-4\" />\n              Previous\n            </button>\n            <span className=\"text-sm text-text-secondary px-2\">\n              Page {page} of {totalPages || 1}\n            </span>\n            <button\n              type=\"button\"\n              onClick={goToNextPage}\n              disabled={!pagination.hasMore}\n              className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n            >\n              Next\n              <ChevronRight className=\"size-4\" />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Credit Transaction Row Component\n// ============================================================================\n\ninterface CreditTransactionRowProps {\n  transaction: CreditTransaction;\n}\n\nconst CreditTransactionRow: FC<CreditTransactionRowProps> = ({ transaction }) => {\n  const statusColor = getCreditTransactionStatusColor(transaction.status);\n\n  // FIX: Check the actual amount value, not just the transaction type\n  // Negative amounts are debits (show red with \"-\"), positive amounts are credits (show green with \"+\")\n  const amount = Number(transaction.amount);\n  const isCredit = amount > 0;\n  const absAmount = Math.abs(amount);\n\n  const getTransactionIcon = () => {\n    // For adjustments, show different icon based on amount sign\n    if (transaction.type === 'adjustment') {\n      return isCredit ? (\n        <Plus className=\"size-4 text-status-success-text\" />\n      ) : (\n        <Minus className=\"size-4 text-status-error-text\" />\n      );\n    }\n\n    switch (transaction.type) {\n      case 'purchase':\n        return <Plus className=\"size-4 text-status-success-text\" />;\n      case 'usage':\n        return <Minus className=\"size-4 text-status-warning-text\" />;\n      default:\n        return <Coins className=\"size-4 text-text-secondary\" />;\n    }\n  };\n\n  const getIconBackground = () => {\n    // For adjustments, show different background based on amount sign\n    if (transaction.type === 'adjustment') {\n      return isCredit ? 'bg-status-success-bg-subtle' : 'bg-status-error-bg-subtle';\n    }\n\n    switch (transaction.type) {\n      case 'purchase':\n        return 'bg-status-success-bg-subtle';\n      case 'usage':\n        return 'bg-status-warning-bg-subtle';\n      default:\n        return 'bg-bg-sunken';\n    }\n  };\n\n  return (\n    <div className=\"flex items-center gap-4 p-4 border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 hover:shadow-sm transition-shadow\">\n      {/* Icon */}\n      <div\n        className={`size-10 rounded-full flex items-center justify-center flex-shrink-0 ${getIconBackground()}`}\n      >\n        {getTransactionIcon()}\n      </div>\n\n      {/* Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          <p className=\"font-medium text-text-primary capitalize\">\n            {formatCreditTransactionType(transaction.type)}\n          </p>\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n          >\n            {transaction.status}\n          </span>\n          {transaction.entityType && (\n            <span className=\"px-2 py-0.5 text-xs font-medium rounded bg-bg-sunken text-text-secondary capitalize\">\n              {transaction.entityType}\n            </span>\n          )}\n        </div>\n        <p className=\"text-sm text-text-secondary mt-0.5\">\n          {formatRelativeTime(transaction.createdAt)} • {formatDateTime(transaction.createdAt)}\n        </p>\n        {transaction.productId && transaction.productId !== 'default' && (\n          <p className=\"text-xs text-text-secondary mt-1\">Product: {transaction.productId}</p>\n        )}\n      </div>\n\n      {/* Amount */}\n      <div className=\"text-right flex-shrink-0\">\n        <p\n          className={`font-semibold text-lg ${isCredit ? 'text-status-success-text' : 'text-status-error-text'}`}\n        >\n          {isCredit ? '+' : '-'}\n          {absAmount.toLocaleString()} credits\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/earnings/pages/EarningsPage.js

@@ -12,7 +12,7 @@ import { useGetDefaultBillingAccountSettingsQuery as o } from "../../../../gener
 import { fetchDeveloperPortalRevenueDashboard as s, fetchEarningsEntries as c, fetchEarningsSummary as l } from "../api.js";
 import { useEffect as u, useMemo as d, useState as f } from "react";
 import { Coins as p, HandCoins as m, RefreshCw as h, Wallet as g } from "lucide-react";
-import { useSearchParams as _ } from "react-router-dom";
+import { useSearchParams as _ } from "react-router";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
 import { EmphasisPanel as b, IllustratedEmptyState as x, PagePurpose as S, ResponsiveTable as C } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/earnings/pages/EarningsPage.tsx

package/dist/billing/modules/earnings/pages/EarningsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"EarningsPage.js","names":[],"sources":["../../../../../src/billing/modules/earnings/pages/EarningsPage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type FC } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { Coins, HandCoins, RefreshCw, Wallet } from 'lucide-react';\nimport {\n  ResponsiveTable,\n  type ResponsiveTableColumn,\n  PagePurpose,\n  EmphasisPanel,\n  IllustratedEmptyState,\n} from '@burdenoff/fe-libs/ui';\n\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { AccessDenied, PageHeader, ServerError, StatCard } from '../../../shared/components';\nimport { formatCurrency, formatDateTime, isServerError } from '../../../shared/utils';\nimport { useGetDefaultBillingAccountSettingsQuery } from '../../../../generated/global-operations';\nimport {\n  fetchEarningsEntries,\n  fetchEarningsSummary,\n  fetchDeveloperPortalRevenueDashboard,\n  type DeveloperPortalRevenueDashboard,\n  type DeveloperPortalRevenueSale,\n  type DeveloperPortalRevenuePayout,\n  type EarningsEntry,\n  type EarningsSummary,\n} from '../api';\n\ntype EarningsSourceFilter = 'ALL' | 'AFFILIATE' | 'STORE' | 'OTHER';\n\nconst salesColumns: ResponsiveTableColumn<DeveloperPortalRevenueSale>[] = [\n  {\n    key: 'application',\n    header: 'Application',\n    priority: 'primary',\n    cell: (sale) => sale.application?.name || sale.application?.slug || 'Unknown app',\n  },\n  { key: 'pricing', header: 'Pricing', cell: (sale) => sale.pricingModel },\n  {\n    key: 'gross',\n    header: 'Gross',\n    cell: (sale) => (\n      <span className=\"tabular-nums\">\n        {formatCurrency(sale.grossAmount, sale.currency || 'USD')}\n      </span>\n    ),\n  },\n  {\n    key: 'net',\n    header: 'Net',\n    cell: (sale) => (\n      <span className=\"tabular-nums\">{formatCurrency(sale.netAmount, sale.currency || 'USD')}</span>\n    ),\n  },\n  { key: 'status', header: 'Status', cell: (sale) => sale.status },\n  {\n    key: 'purchased',\n    header: 'Purchased',\n    cell: (sale) => formatDateTime(sale.purchasedAt),\n  },\n];\n\nconst payoutColumns: ResponsiveTableColumn<DeveloperPortalRevenuePayout>[] = [\n  {\n    key: 'period',\n    header: 'Period',\n    priority: 'primary',\n    cell: (payout) => payout.periodLabel || '-',\n  },\n  {\n    key: 'amount',\n    header: 'Amount',\n    cell: (payout) => (\n      <span className=\"tabular-nums\">\n        {formatCurrency(payout.netAmount, payout.currency || 'USD')}\n      </span>\n    ),\n  },\n  { key: 'status', header: 'Status', cell: (payout) => payout.status },\n  {\n    key: 'scheduled',\n    header: 'Scheduled',\n    cell: (payout) => (payout.scheduledAt ? formatDateTime(payout.scheduledAt) : '-'),\n  },\n  {\n    key: 'completed',\n    header: 'Completed',\n    cell: (payout) => (payout.completedAt ? formatDateTime(payout.completedAt) : '-'),\n  },\n];\n\nconst ledgerColumns: ResponsiveTableColumn<EarningsEntry>[] = [\n  {\n    key: 'category',\n    header: 'Category',\n    priority: 'primary',\n    cell: (entry) => entry.sourceCategory,\n  },\n  {\n    key: 'description',\n    header: 'Description',\n    cell: (entry) => entry.description || entry.sourceSubcategory || '-',\n  },\n  { key: 'unit', header: 'Unit', cell: (entry) => entry.unitType },\n  {\n    key: 'amount',\n    header: 'Amount',\n    cell: (entry) => (\n      <span className=\"tabular-nums\">\n        {entry.unitType === 'CREDITS'\n          ? `${entry.amount.toLocaleString()} credits`\n          : formatCurrency(entry.amount, entry.currency || 'USD')}\n      </span>\n    ),\n  },\n  { key: 'status', header: 'Status', cell: (entry) => entry.status },\n  {\n    key: 'created',\n    header: 'Created',\n    cell: (entry) => formatDateTime(entry.createdAt),\n  },\n];\n\nexport const EarningsPage: FC = () => {\n  const [searchParams] = useSearchParams();\n  const permissions = useBillingPermissions();\n  const { apiGatewayUrl, authToken, orgId } = useBilling();\n  const developerOrgId = searchParams.get('developerOrgId');\n  const developerOrgName = searchParams.get('developerOrgName');\n  const { data: billingAccountData, loading: billingAccountLoading } =\n    useGetDefaultBillingAccountSettingsQuery({});\n\n  const billingAccountId = billingAccountData?.getDefaultBillingAccount?.id;\n  const [summary, setSummary] = useState<EarningsSummary | null>(null);\n  const [entries, setEntries] = useState<EarningsEntry[]>([]);\n  const [developerPortalRevenue, setDeveloperPortalRevenue] =\n    useState<DeveloperPortalRevenueDashboard | null>(null);\n  const [sourceFilter, setSourceFilter] = useState<EarningsSourceFilter>('ALL');\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const requestContext = useMemo(\n    () => ({\n      apiGatewayUrl,\n      authToken,\n      orgId,\n    }),\n    [apiGatewayUrl, authToken, orgId]\n  );\n\n  const loadData = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      if (developerOrgId) {\n        const loadedRevenue = await fetchDeveloperPortalRevenueDashboard(\n          developerOrgId,\n          requestContext\n        );\n        setDeveloperPortalRevenue(loadedRevenue);\n        setSummary(null);\n        setEntries([]);\n        return;\n      }\n\n      if (!billingAccountId) {\n        setSummary(null);\n        setEntries([]);\n        setDeveloperPortalRevenue(null);\n        return;\n      }\n\n      const [loadedSummary, loadedEntries] = await Promise.all([\n        fetchEarningsSummary(billingAccountId, requestContext),\n        fetchEarningsEntries(billingAccountId, requestContext),\n      ]);\n      setSummary(loadedSummary);\n      setEntries(loadedEntries);\n      setDeveloperPortalRevenue(null);\n    } catch (loadError) {\n      setError(loadError instanceof Error ? loadError : new Error('Failed to load earnings'));\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    void loadData();\n  }, [billingAccountId, developerOrgId, requestContext]);\n\n  if (!permissions.canViewBillingAccount) {\n    return <AccessDenied message=\"You don't have permission to view earnings.\" />;\n  }\n\n  if (!developerOrgId && !billingAccountId && !billingAccountLoading) {\n    return (\n      <IllustratedEmptyState\n        illustration=\"empty-generic\"\n        title=\"No billing account found\"\n        description=\"Create a billing account first to view earnings.\"\n      />\n    );\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <ServerError\n        title=\"Earnings unavailable\"\n        message={error.message}\n        onRetry={() => void loadData()}\n        showRetry\n      />\n    );\n  }\n\n  const cards = summary\n    ? [\n        {\n          title: 'Available',\n          value: formatCurrency(summary.availableAmount, 'USD'),\n          icon: <HandCoins className=\"size-5\" />,\n        },\n        {\n          title: 'Reserved',\n          value: formatCurrency(summary.reservedAmount, 'USD'),\n          icon: <Coins className=\"size-5\" />,\n        },\n        {\n          title: 'Paid out',\n          value: formatCurrency(summary.paidAmount, 'USD'),\n          icon: <Wallet className=\"size-5\" />,\n        },\n        {\n          title: 'Lifetime',\n          value: formatCurrency(summary.totalLifetimeAmount, 'USD'),\n          icon: <RefreshCw className=\"size-5\" />,\n        },\n      ]\n    : [];\n\n  const filteredEntries =\n    sourceFilter === 'ALL'\n      ? entries\n      : entries.filter((entry) => entry.sourceCategory === sourceFilter);\n\n  const categoryCards =\n    summary?.categoryBreakdown?.map((item) => ({\n      title: `${item.category} earnings`,\n      value: formatCurrency(item.amount, 'USD'),\n      helperText: `${item.count} entries`,\n    })) ?? [];\n\n  const developerPortalCards = developerPortalRevenue?.summary\n    ? [\n        {\n          title: 'Gross revenue',\n          value: formatCurrency(developerPortalRevenue.summary.totalGrossRevenue, 'USD'),\n          icon: <HandCoins className=\"size-5\" />,\n        },\n        {\n          title: 'Net revenue',\n          value: formatCurrency(developerPortalRevenue.summary.totalNetRevenue, 'USD'),\n          icon: <Wallet className=\"size-5\" />,\n        },\n        {\n          title: 'Pending balance',\n          value: formatCurrency(developerPortalRevenue.summary.pendingBalance, 'USD'),\n          icon: <Coins className=\"size-5\" />,\n        },\n        {\n          title: 'Platform fees',\n          value: formatCurrency(developerPortalRevenue.summary.totalPlatformFees, 'USD'),\n          icon: <RefreshCw className=\"size-5\" />,\n        },\n      ]\n    : [];\n\n  const isDeveloperPortalMode = !!developerOrgId;\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={isDeveloperPortalMode ? 'Marketplace earnings' : 'Earnings'}\n        description={\n          isDeveloperPortalMode\n            ? `Developer portal revenue, sales, and payouts${developerOrgName ? ` for ${developerOrgName}` : ''}.`\n            : 'Track affiliate, store, and other earning sources in one ledger.'\n        }\n      />\n\n      <PagePurpose>\n        See everything you have earned — from affiliate rewards, store sales and marketplace revenue\n        — in one ledger, along with how much has been paid out and what is still pending. Filter by\n        source to reconcile a specific stream.\n      </PagePurpose>\n\n      {loading ? (\n        <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n          {[1, 2, 3, 4].map((item) => (\n            <div\n              key={item}\n              className=\"h-28 animate-pulse rounded-lg border border-border-subtle bg-bg-surface\"\n            />\n          ))}\n        </div>\n      ) : isDeveloperPortalMode ? (\n        developerPortalRevenue?.summary ? (\n          <div className=\"space-y-6\">\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {developerPortalCards.map((card) => (\n                <StatCard key={card.title} label={card.title} value={card.value} icon={card.icon} />\n              ))}\n            </div>\n\n            <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n              <div className=\"mb-4 flex items-center justify-between\">\n                <h2 className=\"text-lg font-semibold text-text-primary\">Recent sales</h2>\n                <button\n                  type=\"button\"\n                  onClick={() => void loadData()}\n                  className=\"inline-flex items-center gap-2 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary\"\n                >\n                  <RefreshCw className=\"size-4\" />\n                  Refresh\n                </button>\n              </div>\n\n              {developerPortalRevenue.sales.length === 0 ? (\n                <IllustratedEmptyState\n                  illustration=\"empty-data\"\n                  title=\"No sales yet\"\n                  description=\"Sales will appear here when customers start purchasing your apps.\"\n                />\n              ) : (\n                <ResponsiveTable\n                  data={developerPortalRevenue.sales}\n                  rowKey={(sale) => sale.id}\n                  columns={salesColumns}\n                />\n              )}\n            </section>\n\n            <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n              <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Payouts</h2>\n\n              {developerPortalRevenue.payouts.length === 0 ? (\n                <IllustratedEmptyState\n                  illustration=\"empty-data\"\n                  title=\"No payouts yet\"\n                  description=\"Scheduled and completed payouts will appear here.\"\n                />\n              ) : (\n                <ResponsiveTable\n                  data={developerPortalRevenue.payouts}\n                  rowKey={(payout) => payout.id}\n                  columns={payoutColumns}\n                />\n              )}\n            </section>\n          </div>\n        ) : (\n          <IllustratedEmptyState\n            illustration=\"empty-data\"\n            title=\"No developer portal revenue yet\"\n            description=\"Marketplace revenue will appear here once your developer organization records sales.\"\n          />\n        )\n      ) : summary ? (\n        <div className=\"space-y-4\">\n          <EmphasisPanel className=\"p-4 sm:p-5\">\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {cards.map((card) => (\n                <StatCard key={card.title} label={card.title} value={card.value} icon={card.icon} />\n              ))}\n            </div>\n          </EmphasisPanel>\n          {categoryCards.length > 0 ? (\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-3\">\n              {categoryCards.map((card) => (\n                <div\n                  key={card.title}\n                  className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\"\n                >\n                  <p className=\"text-sm text-text-secondary\">{card.title}</p>\n                  <p className=\"mt-2 text-xl font-semibold text-text-primary\">{card.value}</p>\n                  <p className=\"mt-1 text-xs text-text-secondary\">{card.helperText}</p>\n                </div>\n              ))}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n\n      {error && !isServerError(error) ? (\n        <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-status-error-text\">\n          {error.message}\n        </div>\n      ) : null}\n\n      <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n        <div className=\"mb-4 flex items-center justify-between\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">Ledger</h2>\n          <div className=\"flex items-center gap-3\">\n            <select\n              value={sourceFilter}\n              onChange={(event) => setSourceFilter(event.target.value as EarningsSourceFilter)}\n              className=\"rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n            >\n              <option value=\"ALL\">All sources</option>\n              <option value=\"AFFILIATE\">Affiliate</option>\n              <option value=\"STORE\">Store</option>\n              <option value=\"OTHER\">Other</option>\n            </select>\n            <button\n              type=\"button\"\n              onClick={() => void loadData()}\n              className=\"inline-flex items-center gap-2 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary\"\n            >\n              <RefreshCw className=\"size-4\" />\n              Refresh\n            </button>\n          </div>\n        </div>\n\n        {filteredEntries.length === 0 && !loading ? (\n          <IllustratedEmptyState\n            illustration=\"empty-data\"\n            title=\"No earnings yet\"\n            description=\"Eligible affiliate rewards and other earnings will appear here.\"\n          />\n        ) : (\n          <ResponsiveTable\n            data={filteredEntries}\n            rowKey={(entry) => entry.id}\n            columns={ledgerColumns}\n          />\n        )}\n      </section>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"EarningsPage.js","names":[],"sources":["../../../../../src/billing/modules/earnings/pages/EarningsPage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type FC } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { Coins, HandCoins, RefreshCw, Wallet } from 'lucide-react';\nimport {\n  ResponsiveTable,\n  type ResponsiveTableColumn,\n  PagePurpose,\n  EmphasisPanel,\n  IllustratedEmptyState,\n} from '@burdenoff/fe-libs/ui';\n\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { AccessDenied, PageHeader, ServerError, StatCard } from '../../../shared/components';\nimport { formatCurrency, formatDateTime, isServerError } from '../../../shared/utils';\nimport { useGetDefaultBillingAccountSettingsQuery } from '../../../../generated/global-operations';\nimport {\n  fetchEarningsEntries,\n  fetchEarningsSummary,\n  fetchDeveloperPortalRevenueDashboard,\n  type DeveloperPortalRevenueDashboard,\n  type DeveloperPortalRevenueSale,\n  type DeveloperPortalRevenuePayout,\n  type EarningsEntry,\n  type EarningsSummary,\n} from '../api';\n\ntype EarningsSourceFilter = 'ALL' | 'AFFILIATE' | 'STORE' | 'OTHER';\n\nconst salesColumns: ResponsiveTableColumn<DeveloperPortalRevenueSale>[] = [\n  {\n    key: 'application',\n    header: 'Application',\n    priority: 'primary',\n    cell: (sale) => sale.application?.name || sale.application?.slug || 'Unknown app',\n  },\n  { key: 'pricing', header: 'Pricing', cell: (sale) => sale.pricingModel },\n  {\n    key: 'gross',\n    header: 'Gross',\n    cell: (sale) => (\n      <span className=\"tabular-nums\">\n        {formatCurrency(sale.grossAmount, sale.currency || 'USD')}\n      </span>\n    ),\n  },\n  {\n    key: 'net',\n    header: 'Net',\n    cell: (sale) => (\n      <span className=\"tabular-nums\">{formatCurrency(sale.netAmount, sale.currency || 'USD')}</span>\n    ),\n  },\n  { key: 'status', header: 'Status', cell: (sale) => sale.status },\n  {\n    key: 'purchased',\n    header: 'Purchased',\n    cell: (sale) => formatDateTime(sale.purchasedAt),\n  },\n];\n\nconst payoutColumns: ResponsiveTableColumn<DeveloperPortalRevenuePayout>[] = [\n  {\n    key: 'period',\n    header: 'Period',\n    priority: 'primary',\n    cell: (payout) => payout.periodLabel || '-',\n  },\n  {\n    key: 'amount',\n    header: 'Amount',\n    cell: (payout) => (\n      <span className=\"tabular-nums\">\n        {formatCurrency(payout.netAmount, payout.currency || 'USD')}\n      </span>\n    ),\n  },\n  { key: 'status', header: 'Status', cell: (payout) => payout.status },\n  {\n    key: 'scheduled',\n    header: 'Scheduled',\n    cell: (payout) => (payout.scheduledAt ? formatDateTime(payout.scheduledAt) : '-'),\n  },\n  {\n    key: 'completed',\n    header: 'Completed',\n    cell: (payout) => (payout.completedAt ? formatDateTime(payout.completedAt) : '-'),\n  },\n];\n\nconst ledgerColumns: ResponsiveTableColumn<EarningsEntry>[] = [\n  {\n    key: 'category',\n    header: 'Category',\n    priority: 'primary',\n    cell: (entry) => entry.sourceCategory,\n  },\n  {\n    key: 'description',\n    header: 'Description',\n    cell: (entry) => entry.description || entry.sourceSubcategory || '-',\n  },\n  { key: 'unit', header: 'Unit', cell: (entry) => entry.unitType },\n  {\n    key: 'amount',\n    header: 'Amount',\n    cell: (entry) => (\n      <span className=\"tabular-nums\">\n        {entry.unitType === 'CREDITS'\n          ? `${entry.amount.toLocaleString()} credits`\n          : formatCurrency(entry.amount, entry.currency || 'USD')}\n      </span>\n    ),\n  },\n  { key: 'status', header: 'Status', cell: (entry) => entry.status },\n  {\n    key: 'created',\n    header: 'Created',\n    cell: (entry) => formatDateTime(entry.createdAt),\n  },\n];\n\nexport const EarningsPage: FC = () => {\n  const [searchParams] = useSearchParams();\n  const permissions = useBillingPermissions();\n  const { apiGatewayUrl, authToken, orgId } = useBilling();\n  const developerOrgId = searchParams.get('developerOrgId');\n  const developerOrgName = searchParams.get('developerOrgName');\n  const { data: billingAccountData, loading: billingAccountLoading } =\n    useGetDefaultBillingAccountSettingsQuery({});\n\n  const billingAccountId = billingAccountData?.getDefaultBillingAccount?.id;\n  const [summary, setSummary] = useState<EarningsSummary | null>(null);\n  const [entries, setEntries] = useState<EarningsEntry[]>([]);\n  const [developerPortalRevenue, setDeveloperPortalRevenue] =\n    useState<DeveloperPortalRevenueDashboard | null>(null);\n  const [sourceFilter, setSourceFilter] = useState<EarningsSourceFilter>('ALL');\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const requestContext = useMemo(\n    () => ({\n      apiGatewayUrl,\n      authToken,\n      orgId,\n    }),\n    [apiGatewayUrl, authToken, orgId]\n  );\n\n  const loadData = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      if (developerOrgId) {\n        const loadedRevenue = await fetchDeveloperPortalRevenueDashboard(\n          developerOrgId,\n          requestContext\n        );\n        setDeveloperPortalRevenue(loadedRevenue);\n        setSummary(null);\n        setEntries([]);\n        return;\n      }\n\n      if (!billingAccountId) {\n        setSummary(null);\n        setEntries([]);\n        setDeveloperPortalRevenue(null);\n        return;\n      }\n\n      const [loadedSummary, loadedEntries] = await Promise.all([\n        fetchEarningsSummary(billingAccountId, requestContext),\n        fetchEarningsEntries(billingAccountId, requestContext),\n      ]);\n      setSummary(loadedSummary);\n      setEntries(loadedEntries);\n      setDeveloperPortalRevenue(null);\n    } catch (loadError) {\n      setError(loadError instanceof Error ? loadError : new Error('Failed to load earnings'));\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    void loadData();\n  }, [billingAccountId, developerOrgId, requestContext]);\n\n  if (!permissions.canViewBillingAccount) {\n    return <AccessDenied message=\"You don't have permission to view earnings.\" />;\n  }\n\n  if (!developerOrgId && !billingAccountId && !billingAccountLoading) {\n    return (\n      <IllustratedEmptyState\n        illustration=\"empty-generic\"\n        title=\"No billing account found\"\n        description=\"Create a billing account first to view earnings.\"\n      />\n    );\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <ServerError\n        title=\"Earnings unavailable\"\n        message={error.message}\n        onRetry={() => void loadData()}\n        showRetry\n      />\n    );\n  }\n\n  const cards = summary\n    ? [\n        {\n          title: 'Available',\n          value: formatCurrency(summary.availableAmount, 'USD'),\n          icon: <HandCoins className=\"size-5\" />,\n        },\n        {\n          title: 'Reserved',\n          value: formatCurrency(summary.reservedAmount, 'USD'),\n          icon: <Coins className=\"size-5\" />,\n        },\n        {\n          title: 'Paid out',\n          value: formatCurrency(summary.paidAmount, 'USD'),\n          icon: <Wallet className=\"size-5\" />,\n        },\n        {\n          title: 'Lifetime',\n          value: formatCurrency(summary.totalLifetimeAmount, 'USD'),\n          icon: <RefreshCw className=\"size-5\" />,\n        },\n      ]\n    : [];\n\n  const filteredEntries =\n    sourceFilter === 'ALL'\n      ? entries\n      : entries.filter((entry) => entry.sourceCategory === sourceFilter);\n\n  const categoryCards =\n    summary?.categoryBreakdown?.map((item) => ({\n      title: `${item.category} earnings`,\n      value: formatCurrency(item.amount, 'USD'),\n      helperText: `${item.count} entries`,\n    })) ?? [];\n\n  const developerPortalCards = developerPortalRevenue?.summary\n    ? [\n        {\n          title: 'Gross revenue',\n          value: formatCurrency(developerPortalRevenue.summary.totalGrossRevenue, 'USD'),\n          icon: <HandCoins className=\"size-5\" />,\n        },\n        {\n          title: 'Net revenue',\n          value: formatCurrency(developerPortalRevenue.summary.totalNetRevenue, 'USD'),\n          icon: <Wallet className=\"size-5\" />,\n        },\n        {\n          title: 'Pending balance',\n          value: formatCurrency(developerPortalRevenue.summary.pendingBalance, 'USD'),\n          icon: <Coins className=\"size-5\" />,\n        },\n        {\n          title: 'Platform fees',\n          value: formatCurrency(developerPortalRevenue.summary.totalPlatformFees, 'USD'),\n          icon: <RefreshCw className=\"size-5\" />,\n        },\n      ]\n    : [];\n\n  const isDeveloperPortalMode = !!developerOrgId;\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={isDeveloperPortalMode ? 'Marketplace earnings' : 'Earnings'}\n        description={\n          isDeveloperPortalMode\n            ? `Developer portal revenue, sales, and payouts${developerOrgName ? ` for ${developerOrgName}` : ''}.`\n            : 'Track affiliate, store, and other earning sources in one ledger.'\n        }\n      />\n\n      <PagePurpose>\n        See everything you have earned — from affiliate rewards, store sales and marketplace revenue\n        — in one ledger, along with how much has been paid out and what is still pending. Filter by\n        source to reconcile a specific stream.\n      </PagePurpose>\n\n      {loading ? (\n        <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n          {[1, 2, 3, 4].map((item) => (\n            <div\n              key={item}\n              className=\"h-28 animate-pulse rounded-lg border border-border-subtle bg-bg-surface\"\n            />\n          ))}\n        </div>\n      ) : isDeveloperPortalMode ? (\n        developerPortalRevenue?.summary ? (\n          <div className=\"space-y-6\">\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {developerPortalCards.map((card) => (\n                <StatCard key={card.title} label={card.title} value={card.value} icon={card.icon} />\n              ))}\n            </div>\n\n            <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n              <div className=\"mb-4 flex items-center justify-between\">\n                <h2 className=\"text-lg font-semibold text-text-primary\">Recent sales</h2>\n                <button\n                  type=\"button\"\n                  onClick={() => void loadData()}\n                  className=\"inline-flex items-center gap-2 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary\"\n                >\n                  <RefreshCw className=\"size-4\" />\n                  Refresh\n                </button>\n              </div>\n\n              {developerPortalRevenue.sales.length === 0 ? (\n                <IllustratedEmptyState\n                  illustration=\"empty-data\"\n                  title=\"No sales yet\"\n                  description=\"Sales will appear here when customers start purchasing your apps.\"\n                />\n              ) : (\n                <ResponsiveTable\n                  data={developerPortalRevenue.sales}\n                  rowKey={(sale) => sale.id}\n                  columns={salesColumns}\n                />\n              )}\n            </section>\n\n            <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n              <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Payouts</h2>\n\n              {developerPortalRevenue.payouts.length === 0 ? (\n                <IllustratedEmptyState\n                  illustration=\"empty-data\"\n                  title=\"No payouts yet\"\n                  description=\"Scheduled and completed payouts will appear here.\"\n                />\n              ) : (\n                <ResponsiveTable\n                  data={developerPortalRevenue.payouts}\n                  rowKey={(payout) => payout.id}\n                  columns={payoutColumns}\n                />\n              )}\n            </section>\n          </div>\n        ) : (\n          <IllustratedEmptyState\n            illustration=\"empty-data\"\n            title=\"No developer portal revenue yet\"\n            description=\"Marketplace revenue will appear here once your developer organization records sales.\"\n          />\n        )\n      ) : summary ? (\n        <div className=\"space-y-4\">\n          <EmphasisPanel className=\"p-4 sm:p-5\">\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {cards.map((card) => (\n                <StatCard key={card.title} label={card.title} value={card.value} icon={card.icon} />\n              ))}\n            </div>\n          </EmphasisPanel>\n          {categoryCards.length > 0 ? (\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-3\">\n              {categoryCards.map((card) => (\n                <div\n                  key={card.title}\n                  className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\"\n                >\n                  <p className=\"text-sm text-text-secondary\">{card.title}</p>\n                  <p className=\"mt-2 text-xl font-semibold text-text-primary\">{card.value}</p>\n                  <p className=\"mt-1 text-xs text-text-secondary\">{card.helperText}</p>\n                </div>\n              ))}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n\n      {error && !isServerError(error) ? (\n        <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-status-error-text\">\n          {error.message}\n        </div>\n      ) : null}\n\n      <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n        <div className=\"mb-4 flex items-center justify-between\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">Ledger</h2>\n          <div className=\"flex items-center gap-3\">\n            <select\n              value={sourceFilter}\n              onChange={(event) => setSourceFilter(event.target.value as EarningsSourceFilter)}\n              className=\"rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n            >\n              <option value=\"ALL\">All sources</option>\n              <option value=\"AFFILIATE\">Affiliate</option>\n              <option value=\"STORE\">Store</option>\n              <option value=\"OTHER\">Other</option>\n            </select>\n            <button\n              type=\"button\"\n              onClick={() => void loadData()}\n              className=\"inline-flex items-center gap-2 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary\"\n            >\n              <RefreshCw className=\"size-4\" />\n              Refresh\n            </button>\n          </div>\n        </div>\n\n        {filteredEntries.length === 0 && !loading ? (\n          <IllustratedEmptyState\n            illustration=\"empty-data\"\n            title=\"No earnings yet\"\n            description=\"Eligible affiliate rewards and other earnings will appear here.\"\n          />\n        ) : (\n          <ResponsiveTable\n            data={filteredEntries}\n            rowKey={(entry) => entry.id}\n            columns={ledgerColumns}\n          />\n        )}\n      </section>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,IAAM,IAAoE;CACxE;EACE,KAAK;EACL,QAAQ;EACR,UAAU;EACV,OAAO,MAAS,EAAK,aAAa,QAAQ,EAAK,aAAa,QAAQ;EACrE;CACD;EAAE,KAAK;EAAW,QAAQ;EAAW,OAAO,MAAS,EAAK;EAAc;CACxE;EACE,KAAK;EACL,QAAQ;EACR,OAAO,MACL,kBAAC,QAAD;GAAM,WAAU;aACb,EAAe,EAAK,aAAa,EAAK,YAAY,MAAM;GACpD,CAAA;EAEV;CACD;EACE,KAAK;EACL,QAAQ;EACR,OAAO,MACL,kBAAC,QAAD;GAAM,WAAU;aAAgB,EAAe,EAAK,WAAW,EAAK,YAAY,MAAM;GAAQ,CAAA;EAEjG;CACD;EAAE,KAAK;EAAU,QAAQ;EAAU,OAAO,MAAS,EAAK;EAAQ;CAChE;EACE,KAAK;EACL,QAAQ;EACR,OAAO,MAAS,EAAe,EAAK,YAAY;EACjD;CACF,EAEK,IAAuE;CAC3E;EACE,KAAK;EACL,QAAQ;EACR,UAAU;EACV,OAAO,MAAW,EAAO,eAAe;EACzC;CACD;EACE,KAAK;EACL,QAAQ;EACR,OAAO,MACL,kBAAC,QAAD;GAAM,WAAU;aACb,EAAe,EAAO,WAAW,EAAO,YAAY,MAAM;GACtD,CAAA;EAEV;CACD;EAAE,KAAK;EAAU,QAAQ;EAAU,OAAO,MAAW,EAAO;EAAQ;CACpE;EACE,KAAK;EACL,QAAQ;EACR,OAAO,MAAY,EAAO,cAAc,EAAe,EAAO,YAAY,GAAG;EAC9E;CACD;EACE,KAAK;EACL,QAAQ;EACR,OAAO,MAAY,EAAO,cAAc,EAAe,EAAO,YAAY,GAAG;EAC9E;CACF,EAEK,IAAwD;CAC5D;EACE,KAAK;EACL,QAAQ;EACR,UAAU;EACV,OAAO,MAAU,EAAM;EACxB;CACD;EACE,KAAK;EACL,QAAQ;EACR,OAAO,MAAU,EAAM,eAAe,EAAM,qBAAqB;EAClE;CACD;EAAE,KAAK;EAAQ,QAAQ;EAAQ,OAAO,MAAU,EAAM;EAAU;CAChE;EACE,KAAK;EACL,QAAQ;EACR,OAAO,MACL,kBAAC,QAAD;GAAM,WAAU;aACb,EAAM,aAAa,YAChB,GAAG,EAAM,OAAO,gBAAgB,CAAC,YACjC,EAAe,EAAM,QAAQ,EAAM,YAAY,MAAM;GACpD,CAAA;EAEV;CACD;EAAE,KAAK;EAAU,QAAQ;EAAU,OAAO,MAAU,EAAM;EAAQ;CAClE;EACE,KAAK;EACL,QAAQ;EACR,OAAO,MAAU,EAAe,EAAM,UAAU;EACjD;CACF,EAEY,UAAyB;CACpC,IAAM,CAAC,KAAgB,GAAiB,EAClC,IAAc,IAAuB,EACrC,EAAE,kBAAe,cAAW,aAAU,GAAY,EAClD,IAAiB,EAAa,IAAI,iBAAiB,EACnD,IAAmB,EAAa,IAAI,mBAAmB,EACvD,EAAE,MAAM,GAAoB,SAAS,MACzC,EAAyC,EAAE,CAAC,EAExC,IAAmB,GAAoB,0BAA0B,IACjE,CAAC,GAAS,KAAc,EAAiC,KAAK,EAC9D,CAAC,GAAS,KAAc,EAA0B,EAAE,CAAC,EACrD,CAAC,GAAwB,KAC7B,EAAiD,KAAK,EAClD,CAAC,GAAc,KAAmB,EAA+B,MAAM,EACvE,CAAC,GAAS,KAAc,EAAS,GAAK,EACtC,CAAC,GAAO,KAAY,EAAuB,KAAK,EAEhD,IAAiB,SACd;EACL;EACA;EACA;EACD,GACD;EAAC;EAAe;EAAW;EAAM,CAClC,EAEK,IAAW,YAAY;AAE3B,EADA,EAAW,GAAK,EAChB,EAAS,KAAK;AACd,MAAI;AACF,OAAI,GAAgB;AAOlB,IAFA,EAJsB,MAAM,EAC1B,GACA,EACD,CACuC,EACxC,EAAW,KAAK,EAChB,EAAW,EAAE,CAAC;AACd;;AAGF,OAAI,CAAC,GAAkB;AAGrB,IAFA,EAAW,KAAK,EAChB,EAAW,EAAE,CAAC,EACd,EAA0B,KAAK;AAC/B;;GAGF,IAAM,CAAC,GAAe,KAAiB,MAAM,QAAQ,IAAI,CACvD,EAAqB,GAAkB,EAAe,EACtD,EAAqB,GAAkB,EAAe,CACvD,CAAC;AAGF,GAFA,EAAW,EAAc,EACzB,EAAW,EAAc,EACzB,EAA0B,KAAK;WACxB,GAAW;AAClB,KAAS,aAAqB,QAAQ,IAAY,gBAAI,MAAM,0BAA0B,CAAC;YAC/E;AACR,KAAW,GAAM;;;AAQrB,KAJA,QAAgB;AACT,KAAU;IACd;EAAC;EAAkB;EAAgB;EAAe,CAAC,EAElD,CAAC,EAAY,sBACf,QAAO,kBAAC,GAAD,EAAc,SAAQ,+CAAgD,CAAA;AAG/E,KAAI,CAAC,KAAkB,CAAC,KAAoB,CAAC,EAC3C,QACE,kBAAC,GAAD;EACE,cAAa;EACb,OAAM;EACN,aAAY;EACZ,CAAA;AAIN,KAAI,KAAS,EAAc,EAAM,CAC/B,QACE,kBAAC,IAAD;EACE,OAAM;EACN,SAAS,EAAM;EACf,eAAe,KAAK,GAAU;EAC9B,WAAA;EACA,CAAA;CAIN,IAAM,IAAQ,IACV;EACE;GACE,OAAO;GACP,OAAO,EAAe,EAAQ,iBAAiB,MAAM;GACrD,MAAM,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA;GACvC;EACD;GACE,OAAO;GACP,OAAO,EAAe,EAAQ,gBAAgB,MAAM;GACpD,MAAM,kBAAC,GAAD,EAAO,WAAU,UAAW,CAAA;GACnC;EACD;GACE,OAAO;GACP,OAAO,EAAe,EAAQ,YAAY,MAAM;GAChD,MAAM,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;GACpC;EACD;GACE,OAAO;GACP,OAAO,EAAe,EAAQ,qBAAqB,MAAM;GACzD,MAAM,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA;GACvC;EACF,GACD,EAAE,EAEA,IACJ,MAAiB,QACb,IACA,EAAQ,QAAQ,MAAU,EAAM,mBAAmB,EAAa,EAEhE,IACJ,GAAS,mBAAmB,KAAK,OAAU;EACzC,OAAO,GAAG,EAAK,SAAS;EACxB,OAAO,EAAe,EAAK,QAAQ,MAAM;EACzC,YAAY,GAAG,EAAK,MAAM;EAC3B,EAAE,IAAI,EAAE,EAEL,KAAuB,GAAwB,UACjD;EACE;GACE,OAAO;GACP,OAAO,EAAe,EAAuB,QAAQ,mBAAmB,MAAM;GAC9E,MAAM,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA;GACvC;EACD;GACE,OAAO;GACP,OAAO,EAAe,EAAuB,QAAQ,iBAAiB,MAAM;GAC5E,MAAM,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;GACpC;EACD;GACE,OAAO;GACP,OAAO,EAAe,EAAuB,QAAQ,gBAAgB,MAAM;GAC3E,MAAM,kBAAC,GAAD,EAAO,WAAU,UAAW,CAAA;GACnC;EACD;GACE,OAAO;GACP,OAAO,EAAe,EAAuB,QAAQ,mBAAmB,MAAM;GAC9E,MAAM,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA;GACvC;EACF,GACD,EAAE,EAEA,IAAwB,CAAC,CAAC;AAEhC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,IAAD;IACE,OAAO,IAAwB,yBAAyB;IACxD,aACE,IACI,+CAA+C,IAAmB,QAAQ,MAAqB,GAAG,KAClG;IAEN,CAAA;GAEF,kBAAC,GAAD,EAAA,UAAa,mOAIC,CAAA;GAEb,IACC,kBAAC,OAAD;IAAK,WAAU;cACZ;KAAC;KAAG;KAAG;KAAG;KAAE,CAAC,KAAK,MACjB,kBAAC,OAAD,EAEE,WAAU,2EACV,EAFK,EAEL,CACF;IACE,CAAA,GACJ,IACF,GAAwB,UACtB,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MAAK,WAAU;gBACZ,GAAqB,KAAK,MACzB,kBAAC,GAAD;OAA2B,OAAO,EAAK;OAAO,OAAO,EAAK;OAAO,MAAM,EAAK;OAAQ,EAArE,EAAK,MAAgE,CACpF;MACE,CAAA;KAEN,kBAAC,WAAD;MAAS,WAAU;gBAAnB,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;kBAA0C;QAAiB,CAAA,EACzE,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,KAAK,GAAU;QAC9B,WAAU;kBAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAAA,UAEzB;UACL;UAEL,EAAuB,MAAM,WAAW,IACvC,kBAAC,GAAD;OACE,cAAa;OACb,OAAM;OACN,aAAY;OACZ,CAAA,GAEF,kBAAC,GAAD;OACE,MAAM,EAAuB;OAC7B,SAAS,MAAS,EAAK;OACvB,SAAS;OACT,CAAA,CAEI;;KAEV,kBAAC,WAAD;MAAS,WAAU;gBAAnB,CACE,kBAAC,MAAD;OAAI,WAAU;iBAA+C;OAAY,CAAA,EAExE,EAAuB,QAAQ,WAAW,IACzC,kBAAC,GAAD;OACE,cAAa;OACb,OAAM;OACN,aAAY;OACZ,CAAA,GAEF,kBAAC,GAAD;OACE,MAAM,EAAuB;OAC7B,SAAS,MAAW,EAAO;OAC3B,SAAS;OACT,CAAA,CAEI;;KACN;QAEN,kBAAC,GAAD;IACE,cAAa;IACb,OAAM;IACN,aAAY;IACZ,CAAA,GAEF,IACF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAe,WAAU;eACvB,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAM,KAAK,MACV,kBAAC,GAAD;OAA2B,OAAO,EAAK;OAAO,OAAO,EAAK;OAAO,MAAM,EAAK;OAAQ,EAArE,EAAK,MAAgE,CACpF;MACE,CAAA;KACQ,CAAA,EACf,EAAc,SAAS,IACtB,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAc,KAAK,MAClB,kBAAC,OAAD;MAEE,WAAU;gBAFZ;OAIE,kBAAC,KAAD;QAAG,WAAU;kBAA+B,EAAK;QAAU,CAAA;OAC3D,kBAAC,KAAD;QAAG,WAAU;kBAAgD,EAAK;QAAU,CAAA;OAC5E,kBAAC,KAAD;QAAG,WAAU;kBAAoC,EAAK;QAAe,CAAA;OACjE;QANC,EAAK,MAMN,CACN;KACE,CAAA,GACJ,KACA;QACJ;GAEH,KAAS,CAAC,EAAc,EAAM,GAC7B,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM;IACH,CAAA,GACJ;GAEJ,kBAAC,WAAD;IAAS,WAAU;cAAnB,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAAW,CAAA,EACnE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,OAAO;OACP,WAAW,MAAU,EAAgB,EAAM,OAAO,MAA8B;OAChF,WAAU;iBAHZ;QAKE,kBAAC,UAAD;SAAQ,OAAM;mBAAM;SAAoB,CAAA;QACxC,kBAAC,UAAD;SAAQ,OAAM;mBAAY;SAAkB,CAAA;QAC5C,kBAAC,UAAD;SAAQ,OAAM;mBAAQ;SAAc,CAAA;QACpC,kBAAC,UAAD;SAAQ,OAAM;mBAAQ;SAAc,CAAA;QAC7B;UACT,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,KAAK,GAAU;OAC9B,WAAU;iBAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAAA,UAEzB;SACL;QACF;QAEL,EAAgB,WAAW,KAAK,CAAC,IAChC,kBAAC,GAAD;KACE,cAAa;KACb,OAAM;KACN,aAAY;KACZ,CAAA,GAEF,kBAAC,GAAD;KACE,MAAM;KACN,SAAS,MAAU,EAAM;KACzB,SAAS;KACT,CAAA,CAEI;;GACN"}

package/dist/billing/modules/plans/pages/PlanBrowseDetailPage.js

@@ -8,7 +8,7 @@ import { useBillingNavigate as o } from "../../../hooks/useBillingNavigate.js";
 import { usePlan as s } from "../hooks/usePlans.js";
 import "../hooks/index.js";
 import { useMemo as c } from "react";
-import { useParams as l } from "react-router-dom";
+import { useParams as l } from "react-router";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { EmphasisPanel as m, PagePurpose as h, ShowMore as g } from "@burdenoff/fe-libs/ui";

package/dist/billing/modules/plans/pages/PlanBrowseDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlanBrowseDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanBrowseDetailPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Browse Detail Page (User-facing)\n * View plan details and subscribe. No edit/toggle actions.\n */\n\nimport { type FC, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan } from '../hooks';\nimport { ServerError } from '../../../shared/components';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n  getPlanFeatureQuantity,\n  isServerError,\n} from '../../../shared/utils';\nimport type { PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { ShowMore, PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport type { ReactNode } from 'react';\n\n/** Wraps children in a ShowMore progressive-disclosure region only when `when` is true. */\nconst ShowMoreIf: FC<{ when: boolean; collapsedHeight?: number; children: ReactNode }> = ({\n  when,\n  collapsedHeight,\n  children,\n}) => (when ? <ShowMore collapsedHeight={collapsedHeight}>{children}</ShowMore> : <>{children}</>);\n\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  quotaType: string;\n  limitType: string;\n  totalValue: number;\n}\n\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n  for (const feature of features) {\n    if (!feature.quota) continue;\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { type?: string; value?: number } | null;\n    const limitType = limits?.type ?? 'unknown';\n    const limitValue = getPlanFeatureQuantity(feature);\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        quotaType: feature.quota.quotaType ?? '',\n        limitType,\n        totalValue: limitValue,\n      });\n    }\n  }\n  return Array.from(quotaMap.values());\n}\n\nexport const PlanBrowseDetailPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { planId } = useParams<{ planId: string }>();\n  const navigateTo = useBillingNavigate();\n  const { plan, isLoading, error, refetch } = usePlan(planId);\n\n  const combinedQuotas = useMemo(() => combineQuotas(plan?.features || []), [plan?.features]);\n\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n          <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n            <div className=\"h-10 w-full bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr('billing.plans.unableToLoadPlanDetails', 'Unable to load plan details.')}\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!plan) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {error?.message ||\n              tr(\n                'billing.plans.planNotFoundMessage',\n                'The plan you are looking for does not exist.'\n              )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n              {plan.name}\n            </h1>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {formatPlanDurationLabel(plan.duration)} billing plan\n            </p>\n            <PagePurpose className=\"mt-3\">\n              {tr(\n                'billing.plans.browseDetailPurpose',\n                'Everything this plan includes — its price, billing period and the full list of features and quotas — so you can confirm it fits before subscribing. Hit Subscribe when you are ready to check out.'\n              )}\n            </PagePurpose>\n          </div>\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={() => navigateTo(`/checkout/${plan.id}`)}\n          className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n        >\n          Subscribe to Plan\n        </button>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card — primary emphasis zone */}\n          <EmphasisPanel className=\"overflow-hidden p-0\">\n            <div className=\"p-6 border-b border-border-seam\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.pricing', 'Pricing')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-4xl font-bold text-text-primary\">\n                  {formatCurrency(plan.price, plan.currency)}\n                </span>\n                <span className=\"text-lg text-text-secondary\">\n                  / {formatPlanDuration(plan.duration)}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-secondary mt-2\">\n                {tr('billing.plans.billed', 'Billed')}{' '}\n                {plan.duration === 'monthly'\n                  ? tr('billing.plans.everyMonth', 'every month')\n                  : tr('billing.plans.annually', 'annually')}\n              </p>\n            </div>\n          </EmphasisPanel>\n\n          {/* Features Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <div className=\"p-6 border-b border-border-seam bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.featuresAndQuotas', 'Features & Quotas')} (\n                {combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.noFeatures', 'No features configured for this plan.')}\n                </p>\n              ) : (\n                <ShowMoreIf when={combinedQuotas.length > 4} collapsedHeight={280}>\n                  <ul className=\"space-y-3\">\n                    {combinedQuotas.map((quota) => (\n                      <li\n                        key={quota.quotaId}\n                        className=\"flex items-start gap-3 p-3 rounded-lg bg-bg-sunken\"\n                      >\n                        <div className=\"size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0\">\n                          <svg\n                            className=\"size-4 text-status-success-text\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M5 13l4 4L19 7\"\n                            />\n                          </svg>\n                        </div>\n                        <div className=\"flex-1\">\n                          <div className=\"flex items-center justify-between\">\n                            <p className=\"font-medium text-text-primary\">{quota.name}</p>\n                            <span className=\"font-semibold text-text-primary\">\n                              {quota.totalValue.toLocaleString()}\n                            </span>\n                          </div>\n                          <div className=\"flex items-center gap-2 mt-1\">\n                            <span className=\"text-sm text-text-secondary capitalize\">\n                              Type: {quota.limitType}\n                            </span>\n                            {quota.quotaType && (\n                              <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n                                {quota.quotaType}\n                              </span>\n                            )}\n                          </div>\n                        </div>\n                      </li>\n                    ))}\n                  </ul>\n                </ShowMoreIf>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6 lg:sticky lg:top-6 lg:self-start\">\n          {/* Subscribe Card — primary emphasis zone */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)] overflow-hidden\">\n            <div className=\"p-6 border-b border-border-seam bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.subscribeTitle', 'Subscribe')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">{tr('billing.plans.price', 'Price')}</p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {formatCurrency(plan.price, plan.currency)} / {formatPlanDuration(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.billingPeriod', 'Billing Period')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatPlanDurationLabel(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.quotasIncluded', 'Quotas Included')}\n                </p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {combinedQuotas.length}\n                </p>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo(`/checkout/${plan.id}`)}\n                className=\"w-full px-4 py-2.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n              >\n                Subscribe to Plan\n              </button>\n            </div>\n          </div>\n\n          {/* Back */}\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PlanBrowseDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanBrowseDetailPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Browse Detail Page (User-facing)\n * View plan details and subscribe. No edit/toggle actions.\n */\n\nimport { type FC, useMemo } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan } from '../hooks';\nimport { ServerError } from '../../../shared/components';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n  getPlanFeatureQuantity,\n  isServerError,\n} from '../../../shared/utils';\nimport type { PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { ShowMore, PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport type { ReactNode } from 'react';\n\n/** Wraps children in a ShowMore progressive-disclosure region only when `when` is true. */\nconst ShowMoreIf: FC<{ when: boolean; collapsedHeight?: number; children: ReactNode }> = ({\n  when,\n  collapsedHeight,\n  children,\n}) => (when ? <ShowMore collapsedHeight={collapsedHeight}>{children}</ShowMore> : <>{children}</>);\n\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  quotaType: string;\n  limitType: string;\n  totalValue: number;\n}\n\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n  for (const feature of features) {\n    if (!feature.quota) continue;\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { type?: string; value?: number } | null;\n    const limitType = limits?.type ?? 'unknown';\n    const limitValue = getPlanFeatureQuantity(feature);\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        quotaType: feature.quota.quotaType ?? '',\n        limitType,\n        totalValue: limitValue,\n      });\n    }\n  }\n  return Array.from(quotaMap.values());\n}\n\nexport const PlanBrowseDetailPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { planId } = useParams<{ planId: string }>();\n  const navigateTo = useBillingNavigate();\n  const { plan, isLoading, error, refetch } = usePlan(planId);\n\n  const combinedQuotas = useMemo(() => combineQuotas(plan?.features || []), [plan?.features]);\n\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n          <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n            <div className=\"h-10 w-full bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr('billing.plans.unableToLoadPlanDetails', 'Unable to load plan details.')}\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!plan) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {error?.message ||\n              tr(\n                'billing.plans.planNotFoundMessage',\n                'The plan you are looking for does not exist.'\n              )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n              {plan.name}\n            </h1>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {formatPlanDurationLabel(plan.duration)} billing plan\n            </p>\n            <PagePurpose className=\"mt-3\">\n              {tr(\n                'billing.plans.browseDetailPurpose',\n                'Everything this plan includes — its price, billing period and the full list of features and quotas — so you can confirm it fits before subscribing. Hit Subscribe when you are ready to check out.'\n              )}\n            </PagePurpose>\n          </div>\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={() => navigateTo(`/checkout/${plan.id}`)}\n          className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n        >\n          Subscribe to Plan\n        </button>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card — primary emphasis zone */}\n          <EmphasisPanel className=\"overflow-hidden p-0\">\n            <div className=\"p-6 border-b border-border-seam\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.pricing', 'Pricing')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-4xl font-bold text-text-primary\">\n                  {formatCurrency(plan.price, plan.currency)}\n                </span>\n                <span className=\"text-lg text-text-secondary\">\n                  / {formatPlanDuration(plan.duration)}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-secondary mt-2\">\n                {tr('billing.plans.billed', 'Billed')}{' '}\n                {plan.duration === 'monthly'\n                  ? tr('billing.plans.everyMonth', 'every month')\n                  : tr('billing.plans.annually', 'annually')}\n              </p>\n            </div>\n          </EmphasisPanel>\n\n          {/* Features Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <div className=\"p-6 border-b border-border-seam bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.featuresAndQuotas', 'Features & Quotas')} (\n                {combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.noFeatures', 'No features configured for this plan.')}\n                </p>\n              ) : (\n                <ShowMoreIf when={combinedQuotas.length > 4} collapsedHeight={280}>\n                  <ul className=\"space-y-3\">\n                    {combinedQuotas.map((quota) => (\n                      <li\n                        key={quota.quotaId}\n                        className=\"flex items-start gap-3 p-3 rounded-lg bg-bg-sunken\"\n                      >\n                        <div className=\"size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0\">\n                          <svg\n                            className=\"size-4 text-status-success-text\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M5 13l4 4L19 7\"\n                            />\n                          </svg>\n                        </div>\n                        <div className=\"flex-1\">\n                          <div className=\"flex items-center justify-between\">\n                            <p className=\"font-medium text-text-primary\">{quota.name}</p>\n                            <span className=\"font-semibold text-text-primary\">\n                              {quota.totalValue.toLocaleString()}\n                            </span>\n                          </div>\n                          <div className=\"flex items-center gap-2 mt-1\">\n                            <span className=\"text-sm text-text-secondary capitalize\">\n                              Type: {quota.limitType}\n                            </span>\n                            {quota.quotaType && (\n                              <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n                                {quota.quotaType}\n                              </span>\n                            )}\n                          </div>\n                        </div>\n                      </li>\n                    ))}\n                  </ul>\n                </ShowMoreIf>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6 lg:sticky lg:top-6 lg:self-start\">\n          {/* Subscribe Card — primary emphasis zone */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)] overflow-hidden\">\n            <div className=\"p-6 border-b border-border-seam bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.subscribeTitle', 'Subscribe')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">{tr('billing.plans.price', 'Price')}</p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {formatCurrency(plan.price, plan.currency)} / {formatPlanDuration(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.billingPeriod', 'Billing Period')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatPlanDurationLabel(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.quotasIncluded', 'Quotas Included')}\n                </p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {combinedQuotas.length}\n                </p>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo(`/checkout/${plan.id}`)}\n                className=\"w-full px-4 py-2.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n              >\n                Subscribe to Plan\n              </button>\n            </div>\n          </div>\n\n          {/* Back */}\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/plans/pages/PlanDetailPage.js

@@ -5,7 +5,7 @@ import { useBillingNavigate as a } from "../../../hooks/useBillingNavigate.js";
 import { usePlan as o, usePlanMutations as s } from "../hooks/usePlans.js";
 import "../hooks/index.js";
 import { useMemo as c } from "react";
-import { useParams as l } from "react-router-dom";
+import { useParams as l } from "react-router";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { EmphasisPanel as m, PagePurpose as h } from "@burdenoff/fe-libs/ui";

package/dist/billing/modules/plans/pages/PlanDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlanDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanDetailPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Detail Page\n * Displays detailed information about a single plan\n */\n\nimport { type FC, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan, usePlanMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n} from '../../../shared/utils/format';\nimport { getPlanFeatureQuantity } from '../../../shared/utils/planFeatureQuantity';\nimport type { PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  quotaType: string;\n  limitType: string;\n  totalValue: number;\n  count: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n */\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n\n  for (const feature of features) {\n    if (!feature.quota) continue;\n\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { type?: string; value?: number } | null;\n    const limitType = limits?.type ?? 'unknown';\n    const limitValue = getPlanFeatureQuantity(feature);\n\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n      existing.count += 1;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        quotaType: feature.quota.quotaType ?? '',\n        limitType,\n        totalValue: limitValue,\n        count: 1,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\nexport const PlanDetailPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { planId } = useParams<{ planId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { plan, isLoading, error, refetch } = usePlan(planId);\n  const { togglePlan, isToggling } = usePlanMutations();\n\n  // Combine duplicate quotas for cleaner display (must be before any returns)\n  const combinedQuotas = useMemo(() => combineQuotas(plan?.features || []), [plan?.features]);\n\n  // Permission check\n  if (!permissions.canViewPlans) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-text-muted\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.accessDenied.title', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-text-muted max-w-sm\">\n            {tr(\n              'billing.plans.noViewPlanPermission',\n              \"You don't have permission to view this plan.\"\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-3/4 bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n          <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n            <div className=\"h-10 w-full bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !plan) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">\n            {error?.message ||\n              tr(\n                'billing.plans.planNotFoundMessage',\n                'The plan you are looking for does not exist.'\n              )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleToggle = async () => {\n    if (!permissions.canManagePlans) return;\n    try {\n      await togglePlan(plan.id, !plan.isActive);\n      await refetch();\n    } catch (err) {\n      console.error('Failed to toggle plan:', err);\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"p-2 -ml-2 text-text-muted hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <div className=\"flex items-center gap-3\">\n              <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n                {plan.name}\n              </h1>\n              <span\n                className={`px-2 py-1 text-xs font-medium rounded ${\n                  plan.isActive\n                    ? 'bg-status-success-bg-subtle text-status-success-text'\n                    : 'bg-bg-sunken text-text-muted'\n                }`}\n              >\n                {plan.isActive ? 'Active' : 'Inactive'}\n              </span>\n            </div>\n            <p className=\"text-sm text-text-muted mt-1\">\n              {formatPlanDurationLabel(plan.duration)} billing plan\n            </p>\n            <PagePurpose className=\"mt-3\">\n              {tr(\n                'billing.plans.detailPurpose',\n                'A full breakdown of this plan — its price, billing period and every quota and feature it grants. Use it to decide whether the plan fits before subscribing, or (as an admin) to edit or activate it.'\n              )}\n            </PagePurpose>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {permissions.canCreateSubscription && plan.isActive && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/checkout/${plan.id}`)}\n              className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n            >\n              Subscribe to Plan\n            </button>\n          )}\n          {permissions.canManagePlans && (\n            <>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo(`/plans/${plan.id}/edit`)}\n                className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Edit Plan\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleToggle}\n                disabled={isToggling}\n                className={`px-4 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors ${\n                  plan.isActive\n                    ? 'text-status-error-text hover:bg-status-error-bg-subtle'\n                    : 'text-status-success-text hover:bg-status-success-bg-subtle'\n                }`}\n              >\n                {isToggling\n                  ? tr('billing.plans.processing', 'Processing...')\n                  : plan.isActive\n                    ? tr('billing.plans.deactivate', 'Deactivate')\n                    : tr('billing.plans.activate', 'Activate')}\n              </button>\n            </>\n          )}\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card — primary emphasis zone */}\n          <EmphasisPanel className=\"p-6\">\n            <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n              {tr('billing.plans.pricing', 'Pricing')}\n            </h2>\n            <div className=\"flex items-baseline gap-1\">\n              <span className=\"text-4xl font-bold text-text-primary\">\n                {formatCurrency(plan.price, plan.currency)}\n              </span>\n              <span className=\"text-lg text-text-muted\">/ {formatPlanDuration(plan.duration)}</span>\n            </div>\n            <p className=\"text-sm text-text-muted mt-2\">\n              {tr('billing.plans.billed', 'Billed')}{' '}\n              {plan.duration === 'monthly'\n                ? tr('billing.plans.everyMonth', 'every month')\n                : tr('billing.plans.annually', 'annually')}\n            </p>\n          </EmphasisPanel>\n\n          {/* Features Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.featuresAndQuotas', 'Features & Quotas')} (\n                {combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.noFeatures', 'No features configured for this plan.')}\n                </p>\n              ) : (\n                <ul className=\"space-y-3\">\n                  {combinedQuotas.map((quota) => (\n                    <li\n                      key={quota.quotaId}\n                      className=\"flex items-start gap-3 p-3 rounded-lg bg-bg-sunken/30\"\n                    >\n                      <div className=\"size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0\">\n                        <svg\n                          className=\"size-4 text-status-success-text\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"flex-1\">\n                        <div className=\"flex items-center justify-between\">\n                          <p className=\"font-medium text-text-primary\">{quota.name}</p>\n                          <span className=\"font-semibold text-text-primary\">\n                            {quota.totalValue.toLocaleString()}\n                          </span>\n                        </div>\n                        <div className=\"flex items-center gap-2 mt-1\">\n                          <span className=\"text-sm text-text-muted capitalize\">\n                            Type: {quota.limitType}\n                          </span>\n                          {quota.quotaType && (\n                            <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-muted rounded\">\n                              {quota.quotaType}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Plan Details Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.planDetails', 'Plan Details')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.planName', 'Plan Name')}\n                </p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">{plan.name}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">{tr('billing.plans.status', 'Status')}</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  <span\n                    className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded ${\n                      plan.isActive\n                        ? 'bg-status-success-bg-subtle text-status-success-text'\n                        : 'bg-bg-sunken text-text-muted'\n                    }`}\n                  >\n                    {plan.isActive ? 'Active' : 'Inactive'}\n                  </span>\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">{tr('billing.plans.price', 'Price')}</p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {formatCurrency(plan.price, plan.currency)} / {formatPlanDuration(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.currency', 'Currency')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">{plan.currency}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.billingPeriod', 'Billing Period')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatPlanDurationLabel(plan.duration)}\n                </p>\n              </div>\n            </div>\n          </div>\n\n          {/* Quick Stats Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.statistics', 'Statistics')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.uniqueQuotas', 'Unique Quotas')}\n                </p>\n                <p className=\"font-semibold text-text-primary\">{combinedQuotas.length}</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PlanDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanDetailPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Detail Page\n * Displays detailed information about a single plan\n */\n\nimport { type FC, useMemo } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan, usePlanMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n} from '../../../shared/utils/format';\nimport { getPlanFeatureQuantity } from '../../../shared/utils/planFeatureQuantity';\nimport type { PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  quotaType: string;\n  limitType: string;\n  totalValue: number;\n  count: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n */\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n\n  for (const feature of features) {\n    if (!feature.quota) continue;\n\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { type?: string; value?: number } | null;\n    const limitType = limits?.type ?? 'unknown';\n    const limitValue = getPlanFeatureQuantity(feature);\n\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n      existing.count += 1;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        quotaType: feature.quota.quotaType ?? '',\n        limitType,\n        totalValue: limitValue,\n        count: 1,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\nexport const PlanDetailPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { planId } = useParams<{ planId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { plan, isLoading, error, refetch } = usePlan(planId);\n  const { togglePlan, isToggling } = usePlanMutations();\n\n  // Combine duplicate quotas for cleaner display (must be before any returns)\n  const combinedQuotas = useMemo(() => combineQuotas(plan?.features || []), [plan?.features]);\n\n  // Permission check\n  if (!permissions.canViewPlans) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-text-muted\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.accessDenied.title', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-text-muted max-w-sm\">\n            {tr(\n              'billing.plans.noViewPlanPermission',\n              \"You don't have permission to view this plan.\"\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-3/4 bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n          <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n            <div className=\"h-10 w-full bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !plan) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">\n            {error?.message ||\n              tr(\n                'billing.plans.planNotFoundMessage',\n                'The plan you are looking for does not exist.'\n              )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleToggle = async () => {\n    if (!permissions.canManagePlans) return;\n    try {\n      await togglePlan(plan.id, !plan.isActive);\n      await refetch();\n    } catch (err) {\n      console.error('Failed to toggle plan:', err);\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"p-2 -ml-2 text-text-muted hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <div className=\"flex items-center gap-3\">\n              <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n                {plan.name}\n              </h1>\n              <span\n                className={`px-2 py-1 text-xs font-medium rounded ${\n                  plan.isActive\n                    ? 'bg-status-success-bg-subtle text-status-success-text'\n                    : 'bg-bg-sunken text-text-muted'\n                }`}\n              >\n                {plan.isActive ? 'Active' : 'Inactive'}\n              </span>\n            </div>\n            <p className=\"text-sm text-text-muted mt-1\">\n              {formatPlanDurationLabel(plan.duration)} billing plan\n            </p>\n            <PagePurpose className=\"mt-3\">\n              {tr(\n                'billing.plans.detailPurpose',\n                'A full breakdown of this plan — its price, billing period and every quota and feature it grants. Use it to decide whether the plan fits before subscribing, or (as an admin) to edit or activate it.'\n              )}\n            </PagePurpose>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {permissions.canCreateSubscription && plan.isActive && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/checkout/${plan.id}`)}\n              className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n            >\n              Subscribe to Plan\n            </button>\n          )}\n          {permissions.canManagePlans && (\n            <>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo(`/plans/${plan.id}/edit`)}\n                className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Edit Plan\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleToggle}\n                disabled={isToggling}\n                className={`px-4 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors ${\n                  plan.isActive\n                    ? 'text-status-error-text hover:bg-status-error-bg-subtle'\n                    : 'text-status-success-text hover:bg-status-success-bg-subtle'\n                }`}\n              >\n                {isToggling\n                  ? tr('billing.plans.processing', 'Processing...')\n                  : plan.isActive\n                    ? tr('billing.plans.deactivate', 'Deactivate')\n                    : tr('billing.plans.activate', 'Activate')}\n              </button>\n            </>\n          )}\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card — primary emphasis zone */}\n          <EmphasisPanel className=\"p-6\">\n            <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n              {tr('billing.plans.pricing', 'Pricing')}\n            </h2>\n            <div className=\"flex items-baseline gap-1\">\n              <span className=\"text-4xl font-bold text-text-primary\">\n                {formatCurrency(plan.price, plan.currency)}\n              </span>\n              <span className=\"text-lg text-text-muted\">/ {formatPlanDuration(plan.duration)}</span>\n            </div>\n            <p className=\"text-sm text-text-muted mt-2\">\n              {tr('billing.plans.billed', 'Billed')}{' '}\n              {plan.duration === 'monthly'\n                ? tr('billing.plans.everyMonth', 'every month')\n                : tr('billing.plans.annually', 'annually')}\n            </p>\n          </EmphasisPanel>\n\n          {/* Features Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.featuresAndQuotas', 'Features & Quotas')} (\n                {combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.noFeatures', 'No features configured for this plan.')}\n                </p>\n              ) : (\n                <ul className=\"space-y-3\">\n                  {combinedQuotas.map((quota) => (\n                    <li\n                      key={quota.quotaId}\n                      className=\"flex items-start gap-3 p-3 rounded-lg bg-bg-sunken/30\"\n                    >\n                      <div className=\"size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0\">\n                        <svg\n                          className=\"size-4 text-status-success-text\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"flex-1\">\n                        <div className=\"flex items-center justify-between\">\n                          <p className=\"font-medium text-text-primary\">{quota.name}</p>\n                          <span className=\"font-semibold text-text-primary\">\n                            {quota.totalValue.toLocaleString()}\n                          </span>\n                        </div>\n                        <div className=\"flex items-center gap-2 mt-1\">\n                          <span className=\"text-sm text-text-muted capitalize\">\n                            Type: {quota.limitType}\n                          </span>\n                          {quota.quotaType && (\n                            <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-muted rounded\">\n                              {quota.quotaType}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Plan Details Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.planDetails', 'Plan Details')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.planName', 'Plan Name')}\n                </p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">{plan.name}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">{tr('billing.plans.status', 'Status')}</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  <span\n                    className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded ${\n                      plan.isActive\n                        ? 'bg-status-success-bg-subtle text-status-success-text'\n                        : 'bg-bg-sunken text-text-muted'\n                    }`}\n                  >\n                    {plan.isActive ? 'Active' : 'Inactive'}\n                  </span>\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">{tr('billing.plans.price', 'Price')}</p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {formatCurrency(plan.price, plan.currency)} / {formatPlanDuration(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.currency', 'Currency')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">{plan.currency}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.billingPeriod', 'Billing Period')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatPlanDurationLabel(plan.duration)}\n                </p>\n              </div>\n            </div>\n          </div>\n\n          {/* Quick Stats Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.statistics', 'Statistics')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.uniqueQuotas', 'Unique Quotas')}\n                </p>\n                <p className=\"font-semibold text-text-primary\">{combinedQuotas.length}</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/plans/pages/PlanEditPage.js

@@ -13,7 +13,7 @@ import { usePlan as l, usePlanMutations as ee } from "../hooks/usePlans.js";
 import { useQuotas as u } from "../hooks/useQuotas.js";
 import "../hooks/index.js";
 import { useEffect as d, useState as f } from "react";
-import { useParams as p } from "react-router-dom";
+import { useParams as p } from "react-router";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { PagePurpose as v } from "@burdenoff/fe-libs/ui";