@burdenoff/microfe-billing 2026.625.4 → 2026.625.5

package/dist/billing/modules/quota/pages/QuotaTemplateDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuotaTemplateDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateDetailPage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Template Detail Page\n * Displays detailed information about a specific quota template\n */\n\nimport { type FC } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplate, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { formatDate } from '../../../shared/utils/format';\nimport { isServerError } from '../../../shared/utils';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateDetailPage: 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 { quotaId } = useParams<{ quotaId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quota, isLoading, error, refetch } = useQuotaTemplate(quotaId);\n  const { toggleQuota, isToggling } = useQuotaTemplateMutations();\n\n  // Permission check\n  if (!permissions.canViewQuotas) {\n    return <AccessDenied message=\"You don't have permission to view quota details.\" />;\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-4\">\n            {[1, 2, 3].map((i) => (\n              <div key={i} className=\"h-24 bg-bg-sunken animate-pulse rounded\" />\n            ))}\n          </div>\n          <div className=\"h-64 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load quota details. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  // Not found state\n  if (!quota) {\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-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=\"M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.quota.quotaNotFound', 'Quota not found')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">\n            The quota you&apos;re looking for doesn&apos;t exist or has been removed.\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas')}\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 Quotas\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleToggle = async () => {\n    try {\n      await toggleQuota(quota.id, !quota.isActive);\n      refetch();\n    } catch (err) {\n      console.error('Failed to toggle quota:', err);\n    }\n  };\n\n  const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n  const limitType = limits?.type ?? 'unknown';\n  const limitValue = limits?.value ?? 0;\n  const limitUnit = limits?.unit ?? '';\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={quota.name}\n        description={`${quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'} quota template`}\n      />\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          {/* Limits Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.quota.limitsConfig', 'Limits Configuration')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"grid grid-cols-3 gap-6\">\n                <div>\n                  <p className=\"text-sm text-text-muted\">Limit Type</p>\n                  <p className=\"text-lg font-semibold text-text-primary capitalize mt-1\">\n                    {limitType}\n                  </p>\n                </div>\n                <div>\n                  <p className=\"text-sm text-text-muted\">Limit Value</p>\n                  <p className=\"text-lg font-semibold text-text-primary mt-1\">\n                    {limitValue.toLocaleString()}\n                  </p>\n                </div>\n                <div>\n                  <p className=\"text-sm text-text-muted\">Unit</p>\n                  <p className=\"text-lg font-semibold text-text-primary mt-1\">{limitUnit || '-'}</p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Properties Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.quota.properties', 'Properties')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div className=\"flex items-center justify-between p-3 border border-border-subtle rounded-lg\">\n                <div>\n                  <p className=\"font-medium text-text-primary\">Quota Type</p>\n                  <p className=\"text-sm text-text-muted\">\n                    {quota.quotaType === 'POOLED'\n                      ? 'Shared across all products'\n                      : 'Specific to individual products'}\n                  </p>\n                </div>\n                <span\n                  className={`px-3 py-1 text-sm font-medium rounded ${\n                    quota.quotaType === 'POOLED'\n                      ? 'bg-status-info-bg-subtle text-status-info-text'\n                      : 'bg-accent-purple-subtle text-text-primary'\n                  }`}\n                >\n                  {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n                </span>\n              </div>\n\n              <div className=\"flex items-center justify-between p-3 border border-border-subtle rounded-lg\">\n                <div>\n                  <p className=\"font-medium text-text-primary\">Reusable</p>\n                  <p className=\"text-sm text-text-muted\">\n                    {quota.reusable\n                      ? 'Quota can be freed up and reused (e.g., seats, bots)'\n                      : 'Quota is consumed permanently (e.g., API calls, storage)'}\n                  </p>\n                </div>\n                <span\n                  className={`px-3 py-1 text-sm font-medium rounded ${\n                    quota.reusable\n                      ? 'bg-status-success-bg-subtle text-status-success-text'\n                      : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {quota.reusable ? 'Yes' : 'No'}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Raw Limits JSON */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">Limits (Raw JSON)</h2>\n            </div>\n            <div className=\"p-4\">\n              <pre className=\"text-sm text-text-primary bg-bg-sunken/50 p-4 rounded-lg overflow-auto\">\n                {JSON.stringify(quota.limits, null, 2)}\n              </pre>\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Status Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">Status</h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Status</span>\n                <span\n                  className={`px-2 py-1 text-xs font-medium rounded ${\n                    quota.isActive\n                      ? 'bg-status-success-bg-subtle text-status-success-text'\n                      : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {quota.isActive ? 'Active' : 'Inactive'}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Created</span>\n                <span className=\"text-sm font-medium text-text-primary\">\n                  {formatDate(quota.createdAt, 'short')}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Updated</span>\n                <span className=\"text-sm font-medium text-text-primary\">\n                  {formatDate(quota.updatedAt, 'short')}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Actions Card */}\n          {permissions.canManageQuotas && (\n            <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n              <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n                <h2 className=\"font-semibold text-text-primary\">Actions</h2>\n              </div>\n              <div className=\"p-4 space-y-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo(`/quotas/${quota.id}/edit`)}\n                  className=\"w-full 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                  Edit Quota\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={handleToggle}\n                  disabled={isToggling}\n                  className={`w-full px-4 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors disabled:opacity-50 ${\n                    quota.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                    ? 'Processing...'\n                    : quota.isActive\n                      ? 'Deactivate Quota'\n                      : 'Activate Quota'}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Back Button */}\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas')}\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 Quotas\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"QuotaTemplateDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateDetailPage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Template Detail Page\n * Displays detailed information about a specific quota template\n */\n\nimport { type FC } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplate, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport { formatDate } from '../../../shared/utils/format';\nimport { isServerError } from '../../../shared/utils';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateDetailPage: 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 { quotaId } = useParams<{ quotaId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quota, isLoading, error, refetch } = useQuotaTemplate(quotaId);\n  const { toggleQuota, isToggling } = useQuotaTemplateMutations();\n\n  // Permission check\n  if (!permissions.canViewQuotas) {\n    return <AccessDenied message=\"You don't have permission to view quota details.\" />;\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-4\">\n            {[1, 2, 3].map((i) => (\n              <div key={i} className=\"h-24 bg-bg-sunken animate-pulse rounded\" />\n            ))}\n          </div>\n          <div className=\"h-64 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load quota details. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  // Not found state\n  if (!quota) {\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-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=\"M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.quota.quotaNotFound', 'Quota not found')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">\n            The quota you&apos;re looking for doesn&apos;t exist or has been removed.\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas')}\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 Quotas\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleToggle = async () => {\n    try {\n      await toggleQuota(quota.id, !quota.isActive);\n      refetch();\n    } catch (err) {\n      console.error('Failed to toggle quota:', err);\n    }\n  };\n\n  const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n  const limitType = limits?.type ?? 'unknown';\n  const limitValue = limits?.value ?? 0;\n  const limitUnit = limits?.unit ?? '';\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={quota.name}\n        description={`${quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'} quota template`}\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.quota.detailPurpose',\n          'Everything about this quota template — its limit configuration, type and where it is used. Review it here to understand what plans and add-ons referencing it will grant, before editing or attaching it elsewhere.'\n        )}\n      </PagePurpose>\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          {/* Limits Card — primary emphasis zone */}\n          <EmphasisPanel className=\"overflow-hidden p-0\">\n            <div className=\"p-4 border-b border-border-subtle\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.quota.limitsConfig', 'Limits Configuration')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"grid grid-cols-3 gap-6\">\n                <div>\n                  <p className=\"text-sm text-text-muted\">Limit Type</p>\n                  <p className=\"text-lg font-semibold text-text-primary capitalize mt-1\">\n                    {limitType}\n                  </p>\n                </div>\n                <div>\n                  <p className=\"text-sm text-text-muted\">Limit Value</p>\n                  <p className=\"text-lg font-semibold text-text-primary mt-1\">\n                    {limitValue.toLocaleString()}\n                  </p>\n                </div>\n                <div>\n                  <p className=\"text-sm text-text-muted\">Unit</p>\n                  <p className=\"text-lg font-semibold text-text-primary mt-1\">{limitUnit || '-'}</p>\n                </div>\n              </div>\n            </div>\n          </EmphasisPanel>\n\n          {/* Properties Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.quota.properties', 'Properties')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div className=\"flex items-center justify-between p-3 border border-border-subtle rounded-lg\">\n                <div>\n                  <p className=\"font-medium text-text-primary\">Quota Type</p>\n                  <p className=\"text-sm text-text-muted\">\n                    {quota.quotaType === 'POOLED'\n                      ? 'Shared across all products'\n                      : 'Specific to individual products'}\n                  </p>\n                </div>\n                <span\n                  className={`px-3 py-1 text-sm font-medium rounded ${\n                    quota.quotaType === 'POOLED'\n                      ? 'bg-status-info-bg-subtle text-status-info-text'\n                      : 'bg-accent-purple-subtle text-text-primary'\n                  }`}\n                >\n                  {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n                </span>\n              </div>\n\n              <div className=\"flex items-center justify-between p-3 border border-border-subtle rounded-lg\">\n                <div>\n                  <p className=\"font-medium text-text-primary\">Reusable</p>\n                  <p className=\"text-sm text-text-muted\">\n                    {quota.reusable\n                      ? 'Quota can be freed up and reused (e.g., seats, bots)'\n                      : 'Quota is consumed permanently (e.g., API calls, storage)'}\n                  </p>\n                </div>\n                <span\n                  className={`px-3 py-1 text-sm font-medium rounded ${\n                    quota.reusable\n                      ? 'bg-status-success-bg-subtle text-status-success-text'\n                      : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {quota.reusable ? 'Yes' : 'No'}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Raw Limits JSON */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">Limits (Raw JSON)</h2>\n            </div>\n            <div className=\"p-4\">\n              <pre className=\"text-sm text-text-primary bg-bg-sunken/50 p-4 rounded-lg overflow-auto\">\n                {JSON.stringify(quota.limits, null, 2)}\n              </pre>\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Status Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">Status</h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Status</span>\n                <span\n                  className={`px-2 py-1 text-xs font-medium rounded ${\n                    quota.isActive\n                      ? 'bg-status-success-bg-subtle text-status-success-text'\n                      : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {quota.isActive ? 'Active' : 'Inactive'}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Created</span>\n                <span className=\"text-sm font-medium text-text-primary\">\n                  {formatDate(quota.createdAt, 'short')}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Updated</span>\n                <span className=\"text-sm font-medium text-text-primary\">\n                  {formatDate(quota.updatedAt, 'short')}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Actions Card */}\n          {permissions.canManageQuotas && (\n            <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n              <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n                <h2 className=\"font-semibold text-text-primary\">Actions</h2>\n              </div>\n              <div className=\"p-4 space-y-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo(`/quotas/${quota.id}/edit`)}\n                  className=\"w-full 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                  Edit Quota\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={handleToggle}\n                  disabled={isToggling}\n                  className={`w-full px-4 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors disabled:opacity-50 ${\n                    quota.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                    ? 'Processing...'\n                    : quota.isActive\n                      ? 'Deactivate Quota'\n                      : 'Activate Quota'}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Back Button */}\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas')}\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 Quotas\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}