@burdenoff/microfe-admin 2026.625.1 → 2026.626.1

package/dist/admin/components/ui.js

@@ -48,9 +48,9 @@ u.displayName = "CardFooter";
 var d = {
 	default: "bg-action-primary-bg text-action-primary-text",
 	secondary: "bg-secondary text-secondary-foreground",
-	success: "bg-success/10 text-success border-success/20",
-	warning: "bg-warning/10 text-warning border-warning/20",
-	destructive: "bg-status-error-bg/10 text-status-error-text border-status-error-border/20",
+	success: "bg-status-success-bg text-status-success-text border-status-success-border",
+	warning: "bg-status-warning-bg text-status-warning-text border-status-warning-border",
+	destructive: "bg-status-error-bg text-status-error-text border-status-error-border",
 	outline: "border-border-subtle bg-transparent text-text-primary"
 }, f = t(({ className: t, variant: r = "default", children: i, ...a }, o) => /* @__PURE__ */ n("span", {
 	ref: o,

package/dist/admin/components/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","names":[],"sources":["../../../src/admin/components/ui.tsx"],"sourcesContent":["/**\n * Shared UI Components for Admin Console\n * Using semantic tokens for consistent theming\n */\n\nimport type { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/cn';\n\n// ============================================================================\n// Card Components\n// ============================================================================\n\ninterface CardProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'rounded-card border border-border-seam bg-bg-surface text-text-primary shadow-elevation-1 transition-[box-shadow,border-color] duration-200 hover:border-border-strong',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\nCard.displayName = 'Card';\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardProps>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nCardHeader.displayName = 'CardHeader';\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, children, ...props }, ref) => (\n    <h3\n      ref={ref}\n      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n);\nCardTitle.displayName = 'CardTitle';\n\nexport const CardDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => (\n  <p ref={ref} className={cn('text-sm text-text-secondary', className)} {...props}>\n    {children}\n  </p>\n));\nCardDescription.displayName = 'CardDescription';\n\nexport const CardContent = forwardRef<HTMLDivElement, CardProps>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn('p-6 pt-0', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nCardContent.displayName = 'CardContent';\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardProps>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nCardFooter.displayName = 'CardFooter';\n\n// ============================================================================\n// Badge Component\n// ============================================================================\n\ninterface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  variant?: 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline';\n}\n\nconst badgeVariants = {\n  default: 'bg-action-primary-bg text-action-primary-text',\n  secondary: 'bg-secondary text-secondary-foreground',\n  success: 'bg-success/10 text-success border-success/20',\n  warning: 'bg-warning/10 text-warning border-warning/20',\n  destructive: 'bg-status-error-bg/10 text-status-error-text border-status-error-border/20',\n  outline: 'border-border-subtle bg-transparent text-text-primary',\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant = 'default', children, ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(\n        'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors',\n        badgeVariants[variant],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n);\nBadge.displayName = 'Badge';\n\n// ============================================================================\n// Button Component\n// ============================================================================\n\ninterface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';\n  size?: 'default' | 'sm' | 'lg' | 'icon';\n}\n\nconst buttonVariants = {\n  default: 'bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n  outline: 'border border-border-default bg-bg-surface hover:bg-accent hover:text-text-primary',\n  ghost: 'hover:bg-accent hover:text-text-primary',\n  destructive: 'bg-status-error-bg text-status-error-text hover:bg-status-error-bg/90',\n  link: 'text-primary underline-offset-4 hover:underline',\n};\n\nconst buttonSizes = {\n  default: 'h-10 px-4 py-2',\n  sm: 'h-9 rounded-md px-3',\n  lg: 'h-11 rounded-md px-8',\n  icon: 'h-10 w-10',\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant = 'default', size = 'default', children, ...props }, ref) => (\n    <button\n      ref={ref}\n      className={cn(\n        'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-2',\n        'disabled:pointer-events-none disabled:opacity-50',\n        buttonVariants[variant],\n        buttonSizes[size],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\nButton.displayName = 'Button';\n\n// ============================================================================\n// Input Component\n// ============================================================================\n\ntype InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => (\n    <input\n      type={type}\n      className={cn(\n        'flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm ring-offset-background',\n        'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-text-primary',\n        'placeholder:text-text-secondary',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n);\nInput.displayName = 'Input';\n\n// ============================================================================\n// Skeleton Component\n// ============================================================================\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement>;\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('animate-pulse rounded-md bg-bg-sunken', className)} {...props} />\n  )\n);\nSkeleton.displayName = 'Skeleton';\n\n// ============================================================================\n// Separator Component\n// ============================================================================\n\ninterface SeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Separator = forwardRef<HTMLDivElement, SeparatorProps>(\n  ({ className, orientation = 'horizontal', ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'shrink-0 bg-border',\n        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nSeparator.displayName = 'Separator';\n\n// ============================================================================\n// Avatar Component\n// ============================================================================\n\ninterface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  fallback: string;\n  size?: 'sm' | 'default' | 'lg';\n}\n\nconst avatarSizes = {\n  sm: 'h-8 w-8 text-xs',\n  default: 'h-10 w-10 text-sm',\n  lg: 'h-12 w-12 text-base',\n};\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n  ({ className, src, alt, fallback, size = 'default', ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex shrink-0 overflow-hidden rounded-full bg-bg-sunken',\n        avatarSizes[size],\n        className\n      )}\n      {...props}\n    >\n      {src ? (\n        <img src={src} alt={alt} className=\"aspect-square h-full w-full object-cover\" />\n      ) : (\n        <span className=\"flex h-full w-full items-center justify-center font-medium text-text-secondary\">\n          {fallback}\n        </span>\n      )}\n    </div>\n  )\n);\nAvatar.displayName = 'Avatar';\n\n// ============================================================================\n// Empty State Component\n// ============================================================================\n\ninterface EmptyStateProps {\n  icon?: ReactNode;\n  title: string;\n  description?: string;\n  action?: ReactNode;\n  /**\n   * On-brand illustration name (Boff UI 2.0). When provided, renders the\n   * IllustratedEmptyState (host serves /illustrations/<name>.webp). Standard\n   * names: empty-data, empty-search, empty-files, empty-people,\n   * empty-notifications, onboarding, empty-generic. Falls back to the icon\n   * variant when omitted.\n   */\n  illustration?: string;\n}\n\nexport function EmptyState({ icon, title, description, action, illustration }: EmptyStateProps) {\n  if (illustration) {\n    return (\n      <IllustratedEmptyState\n        illustration={illustration}\n        title={title}\n        description={description}\n        action={action}\n        className=\"py-12\"\n      />\n    );\n  }\n  return (\n    <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n      {icon && <div className=\"mb-4 rounded-full bg-bg-sunken p-4 text-text-secondary\">{icon}</div>}\n      <h3 className=\"mb-2 text-lg font-semibold\">{title}</h3>\n      {description && <p className=\"mb-4 max-w-sm text-sm text-text-secondary\">{description}</p>}\n      {action}\n    </div>\n  );\n}\n\n// ============================================================================\n// Loading Spinner Component\n// ============================================================================\n\ninterface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'default' | 'lg';\n}\n\nconst spinnerSizes = {\n  sm: 'h-4 w-4',\n  default: 'h-6 w-6',\n  lg: 'h-8 w-8',\n};\n\nexport function Spinner({ className, size = 'default', ...props }: SpinnerProps) {\n  return (\n    <div\n      className={cn(\n        'animate-spin rounded-full border-2 border-current border-t-transparent text-primary',\n        spinnerSizes[size],\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// Page Loading Fallback\n// ============================================================================\n\ninterface PageLoadingFallbackProps {\n  message?: string;\n}\n\nexport function PageLoadingFallback({ message = 'Loading...' }: PageLoadingFallbackProps) {\n  return (\n    <div className=\"flex h-full min-h-[400px] flex-col items-center justify-center gap-4\">\n      <Spinner size=\"lg\" />\n      <p className=\"text-sm text-text-secondary\">{message}</p>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ui.js","names":[],"sources":["../../../src/admin/components/ui.tsx"],"sourcesContent":["/**\n * Shared UI Components for Admin Console\n * Using semantic tokens for consistent theming\n */\n\nimport type { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/cn';\n\n// ============================================================================\n// Card Components\n// ============================================================================\n\ninterface CardProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'rounded-card border border-border-seam bg-bg-surface text-text-primary shadow-elevation-1 transition-[box-shadow,border-color] duration-200 hover:border-border-strong',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\nCard.displayName = 'Card';\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardProps>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nCardHeader.displayName = 'CardHeader';\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, children, ...props }, ref) => (\n    <h3\n      ref={ref}\n      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n);\nCardTitle.displayName = 'CardTitle';\n\nexport const CardDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => (\n  <p ref={ref} className={cn('text-sm text-text-secondary', className)} {...props}>\n    {children}\n  </p>\n));\nCardDescription.displayName = 'CardDescription';\n\nexport const CardContent = forwardRef<HTMLDivElement, CardProps>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn('p-6 pt-0', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nCardContent.displayName = 'CardContent';\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardProps>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nCardFooter.displayName = 'CardFooter';\n\n// ============================================================================\n// Badge Component\n// ============================================================================\n\ninterface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  variant?: 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline';\n}\n\nconst badgeVariants = {\n  default: 'bg-action-primary-bg text-action-primary-text',\n  secondary: 'bg-secondary text-secondary-foreground',\n  success: 'bg-status-success-bg text-status-success-text border-status-success-border',\n  warning: 'bg-status-warning-bg text-status-warning-text border-status-warning-border',\n  destructive: 'bg-status-error-bg text-status-error-text border-status-error-border',\n  outline: 'border-border-subtle bg-transparent text-text-primary',\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant = 'default', children, ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(\n        'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors',\n        badgeVariants[variant],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n);\nBadge.displayName = 'Badge';\n\n// ============================================================================\n// Button Component\n// ============================================================================\n\ninterface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';\n  size?: 'default' | 'sm' | 'lg' | 'icon';\n}\n\nconst buttonVariants = {\n  default: 'bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n  outline: 'border border-border-default bg-bg-surface hover:bg-accent hover:text-text-primary',\n  ghost: 'hover:bg-accent hover:text-text-primary',\n  destructive: 'bg-status-error-bg text-status-error-text hover:bg-status-error-bg/90',\n  link: 'text-primary underline-offset-4 hover:underline',\n};\n\nconst buttonSizes = {\n  default: 'h-10 px-4 py-2',\n  sm: 'h-9 rounded-md px-3',\n  lg: 'h-11 rounded-md px-8',\n  icon: 'h-10 w-10',\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant = 'default', size = 'default', children, ...props }, ref) => (\n    <button\n      ref={ref}\n      className={cn(\n        'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-2',\n        'disabled:pointer-events-none disabled:opacity-50',\n        buttonVariants[variant],\n        buttonSizes[size],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\nButton.displayName = 'Button';\n\n// ============================================================================\n// Input Component\n// ============================================================================\n\ntype InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => (\n    <input\n      type={type}\n      className={cn(\n        'flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm ring-offset-background',\n        'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-text-primary',\n        'placeholder:text-text-secondary',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n);\nInput.displayName = 'Input';\n\n// ============================================================================\n// Skeleton Component\n// ============================================================================\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement>;\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('animate-pulse rounded-md bg-bg-sunken', className)} {...props} />\n  )\n);\nSkeleton.displayName = 'Skeleton';\n\n// ============================================================================\n// Separator Component\n// ============================================================================\n\ninterface SeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Separator = forwardRef<HTMLDivElement, SeparatorProps>(\n  ({ className, orientation = 'horizontal', ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'shrink-0 bg-border',\n        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nSeparator.displayName = 'Separator';\n\n// ============================================================================\n// Avatar Component\n// ============================================================================\n\ninterface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  fallback: string;\n  size?: 'sm' | 'default' | 'lg';\n}\n\nconst avatarSizes = {\n  sm: 'h-8 w-8 text-xs',\n  default: 'h-10 w-10 text-sm',\n  lg: 'h-12 w-12 text-base',\n};\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n  ({ className, src, alt, fallback, size = 'default', ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex shrink-0 overflow-hidden rounded-full bg-bg-sunken',\n        avatarSizes[size],\n        className\n      )}\n      {...props}\n    >\n      {src ? (\n        <img src={src} alt={alt} className=\"aspect-square h-full w-full object-cover\" />\n      ) : (\n        <span className=\"flex h-full w-full items-center justify-center font-medium text-text-secondary\">\n          {fallback}\n        </span>\n      )}\n    </div>\n  )\n);\nAvatar.displayName = 'Avatar';\n\n// ============================================================================\n// Empty State Component\n// ============================================================================\n\ninterface EmptyStateProps {\n  icon?: ReactNode;\n  title: string;\n  description?: string;\n  action?: ReactNode;\n  /**\n   * On-brand illustration name (Boff UI 2.0). When provided, renders the\n   * IllustratedEmptyState (host serves /illustrations/<name>.webp). Standard\n   * names: empty-data, empty-search, empty-files, empty-people,\n   * empty-notifications, onboarding, empty-generic. Falls back to the icon\n   * variant when omitted.\n   */\n  illustration?: string;\n}\n\nexport function EmptyState({ icon, title, description, action, illustration }: EmptyStateProps) {\n  if (illustration) {\n    return (\n      <IllustratedEmptyState\n        illustration={illustration}\n        title={title}\n        description={description}\n        action={action}\n        className=\"py-12\"\n      />\n    );\n  }\n  return (\n    <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n      {icon && <div className=\"mb-4 rounded-full bg-bg-sunken p-4 text-text-secondary\">{icon}</div>}\n      <h3 className=\"mb-2 text-lg font-semibold\">{title}</h3>\n      {description && <p className=\"mb-4 max-w-sm text-sm text-text-secondary\">{description}</p>}\n      {action}\n    </div>\n  );\n}\n\n// ============================================================================\n// Loading Spinner Component\n// ============================================================================\n\ninterface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'default' | 'lg';\n}\n\nconst spinnerSizes = {\n  sm: 'h-4 w-4',\n  default: 'h-6 w-6',\n  lg: 'h-8 w-8',\n};\n\nexport function Spinner({ className, size = 'default', ...props }: SpinnerProps) {\n  return (\n    <div\n      className={cn(\n        'animate-spin rounded-full border-2 border-current border-t-transparent text-primary',\n        spinnerSizes[size],\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// Page Loading Fallback\n// ============================================================================\n\ninterface PageLoadingFallbackProps {\n  message?: string;\n}\n\nexport function PageLoadingFallback({ message = 'Loading...' }: PageLoadingFallbackProps) {\n  return (\n    <div className=\"flex h-full min-h-[400px] flex-col items-center justify-center gap-4\">\n      <Spinner size=\"lg\" />\n      <p className=\"text-sm text-text-secondary\">{message}</p>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/admin/constants/index.js

@@ -1,90 +1,99 @@
 //#region src/admin/constants/index.ts
 var e = {
+	success: "bg-status-success-bg text-status-success-text border-status-success-border",
+	warning: "bg-status-warning-bg text-status-warning-text border-status-warning-border",
+	error: "bg-status-error-bg text-status-error-text border-status-error-border",
+	info: "bg-status-info-bg text-status-info-text border-status-info-border",
+	neutral: "bg-status-neutral-bg text-status-neutral-text border-status-neutral-border"
+}, t = {
 	active: {
 		label: "Active",
-		color: "bg-success/10 text-success border-success/20"
+		color: e.success
 	},
 	suspended: {
 		label: "Suspended",
-		color: "bg-status-error-bg/10 text-status-error-text border-status-error-border/20"
+		color: e.error
 	},
 	trial: {
 		label: "Trial",
-		color: "bg-warning/10 text-warning border-warning/20"
+		color: e.warning
 	},
 	deleted: {
 		label: "Deleted",
-		color: "bg-bg-sunken text-text-secondary border-muted"
+		color: e.neutral
 	},
 	pending: {
 		label: "Pending",
-		color: "bg-info/10 text-info border-info/20"
+		color: e.info
 	},
 	provisioning: {
 		label: "Provisioning",
-		color: "bg-amber-100 text-amber-700 border-amber-200"
+		color: e.warning
 	}
-}, t = {
+}, n = {
 	active: {
 		label: "Active",
-		color: "bg-success/10 text-success border-success/20"
+		color: e.success
 	},
 	inactive: {
 		label: "Inactive",
-		color: "bg-bg-sunken text-text-secondary border-muted"
+		color: e.neutral
 	},
 	blocked: {
 		label: "Blocked",
-		color: "bg-status-error-bg/10 text-status-error-text border-status-error-border/20"
+		color: e.error
 	},
 	pending: {
 		label: "Pending",
-		color: "bg-warning/10 text-warning border-warning/20"
+		color: e.warning
 	}
-}, n = {
+};
+e.success, e.neutral, e.error, e.info, e.warning, e.info, e.warning, e.success, e.neutral, e.neutral, e.info, e.warning, e.error;
+var r = {
 	healthy: {
 		label: "Healthy",
-		color: "bg-success/10 text-success border-success/20"
+		color: e.success
 	},
 	degraded: {
 		label: "Degraded",
-		color: "bg-warning/10 text-warning border-warning/20"
+		color: e.warning
 	},
 	down: {
 		label: "Down",
-		color: "bg-status-error-bg/10 text-status-error-text border-status-error-border/20"
+		color: e.error
 	},
 	unknown: {
 		label: "Unknown",
-		color: "bg-bg-sunken text-text-secondary border-muted"
+		color: e.neutral
 	}
-}, r = {
+}, i = {
 	pending: {
 		label: "Pending",
-		color: "bg-bg-sunken text-text-secondary border-muted"
+		color: e.neutral
 	},
 	running: {
 		label: "Running",
-		color: "bg-info/10 text-info border-info/20"
+		color: e.info
 	},
 	in_progress: {
 		label: "In Progress",
-		color: "bg-info/10 text-info border-info/20"
+		color: e.info
 	},
 	success: {
 		label: "Success",
-		color: "bg-success/10 text-success border-success/20"
+		color: e.success
 	},
 	failed: {
 		label: "Failed",
-		color: "bg-status-error-bg/10 text-status-error-text border-status-error-border/20"
+		color: e.error
 	},
 	rolled_back: {
 		label: "Rolled Back",
-		color: "bg-warning/10 text-warning border-warning/20"
+		color: e.warning
 	}
 };
+e.warning, e.info, e.error, e.info;
 //#endregion
-export { r as DEPLOYMENT_STATUS_CONFIG, n as HEALTH_STATUS_CONFIG, e as TENANT_STATUS_CONFIG, t as USER_STATUS_CONFIG };
+export { i as DEPLOYMENT_STATUS_CONFIG, r as HEALTH_STATUS_CONFIG, t as TENANT_STATUS_CONFIG, n as USER_STATUS_CONFIG };
 
 //# sourceMappingURL=index.js.map

package/dist/admin/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/admin/constants/index.ts"],"sourcesContent":["import type {\n  TenantStatus,\n  UserStatus,\n  SubscriptionStatus,\n  TicketStatus,\n  TicketPriority,\n  HealthStatus,\n  DeploymentStatus,\n  CloudProvider,\n} from '../types';\n\n/**\n * Tenant status labels and colors\n */\nexport const TENANT_STATUS_CONFIG: Record<TenantStatus, { label: string; color: string }> = {\n  active: { label: 'Active', color: 'bg-success/10 text-success border-success/20' },\n  suspended: {\n    label: 'Suspended',\n    color: 'bg-status-error-bg/10 text-status-error-text border-status-error-border/20',\n  },\n  trial: { label: 'Trial', color: 'bg-warning/10 text-warning border-warning/20' },\n  deleted: { label: 'Deleted', color: 'bg-bg-sunken text-text-secondary border-muted' },\n  pending: { label: 'Pending', color: 'bg-info/10 text-info border-info/20' },\n  provisioning: { label: 'Provisioning', color: 'bg-amber-100 text-amber-700 border-amber-200' },\n};\n\n/**\n * User status labels and colors\n */\nexport const USER_STATUS_CONFIG: Record<UserStatus, { label: string; color: string }> = {\n  active: { label: 'Active', color: 'bg-success/10 text-success border-success/20' },\n  inactive: { label: 'Inactive', color: 'bg-bg-sunken text-text-secondary border-muted' },\n  blocked: { label: 'Blocked', color: 'bg-status-error-bg/10 text-status-error-text border-status-error-border/20' },\n  pending: { label: 'Pending', color: 'bg-warning/10 text-warning border-warning/20' },\n};\n\n/**\n * Subscription status labels and colors\n */\nexport const SUBSCRIPTION_STATUS_CONFIG: Record<\n  SubscriptionStatus,\n  { label: string; color: string }\n> = {\n  active: { label: 'Active', color: 'bg-success/10 text-success border-success/20' },\n  canceled: { label: 'Canceled', color: 'bg-bg-sunken text-text-secondary border-muted' },\n  past_due: {\n    label: 'Past Due',\n    color: 'bg-status-error-bg/10 text-status-error-text border-status-error-border/20',\n  },\n  trialing: { label: 'Trialing', color: 'bg-info/10 text-info border-info/20' },\n  paused: { label: 'Paused', color: 'bg-warning/10 text-warning border-warning/20' },\n};\n\n/**\n * Ticket status labels and colors\n */\nexport const TICKET_STATUS_CONFIG: Record<TicketStatus, { label: string; color: string }> = {\n  open: { label: 'Open', color: 'bg-info/10 text-info border-info/20' },\n  in_progress: { label: 'In Progress', color: 'bg-warning/10 text-warning border-warning/20' },\n  resolved: { label: 'Resolved', color: 'bg-success/10 text-success border-success/20' },\n  closed: { label: 'Closed', color: 'bg-bg-sunken text-text-secondary border-muted' },\n};\n\n/**\n * Ticket priority labels and colors\n */\nexport const TICKET_PRIORITY_CONFIG: Record<TicketPriority, { label: string; color: string }> = {\n  low: { label: 'Low', color: 'bg-bg-sunken text-text-secondary border-muted' },\n  medium: { label: 'Medium', color: 'bg-info/10 text-info border-info/20' },\n  high: { label: 'High', color: 'bg-warning/10 text-warning border-warning/20' },\n  critical: {\n    label: 'Critical',\n    color: 'bg-status-error-bg/10 text-status-error-text border-status-error-border/20',\n  },\n};\n\n/**\n * Health status labels and colors\n */\nexport const HEALTH_STATUS_CONFIG: Record<HealthStatus, { label: string; color: string }> = {\n  healthy: { label: 'Healthy', color: 'bg-success/10 text-success border-success/20' },\n  degraded: { label: 'Degraded', color: 'bg-warning/10 text-warning border-warning/20' },\n  down: { label: 'Down', color: 'bg-status-error-bg/10 text-status-error-text border-status-error-border/20' },\n  unknown: { label: 'Unknown', color: 'bg-bg-sunken text-text-secondary border-muted' },\n};\n\n/**\n * Deployment status labels and colors\n */\nexport const DEPLOYMENT_STATUS_CONFIG: Record<DeploymentStatus, { label: string; color: string }> =\n  {\n    pending: { label: 'Pending', color: 'bg-bg-sunken text-text-secondary border-muted' },\n    running: { label: 'Running', color: 'bg-info/10 text-info border-info/20' },\n    in_progress: { label: 'In Progress', color: 'bg-info/10 text-info border-info/20' },\n    success: { label: 'Success', color: 'bg-success/10 text-success border-success/20' },\n    failed: { label: 'Failed', color: 'bg-status-error-bg/10 text-status-error-text border-status-error-border/20' },\n    rolled_back: { label: 'Rolled Back', color: 'bg-warning/10 text-warning border-warning/20' },\n  };\n\n/**\n * Cloud provider labels and colors\n */\nexport const CLOUD_PROVIDER_CONFIG: Record<\n  CloudProvider,\n  { label: string; color: string; icon: string }\n> = {\n  aws: {\n    label: 'AWS',\n    color: 'bg-orange-500/10 text-orange-500 border-orange-500/20',\n    icon: 'aws',\n  },\n  azure: {\n    label: 'Azure',\n    color: 'bg-blue-500/10 text-blue-500 border-blue-500/20',\n    icon: 'azure',\n  },\n  gcp: { label: 'GCP', color: 'bg-red-500/10 text-red-500 border-red-500/20', icon: 'gcp' },\n  digitalocean: {\n    label: 'DigitalOcean',\n    color: 'bg-cyan-500/10 text-cyan-500 border-cyan-500/20',\n    icon: 'do',\n  },\n};\n\n/**\n * Chart colors using semantic tokens\n */\nexport const CHART_COLORS = {\n  primary: 'hsl(var(--chart-1))',\n  secondary: 'hsl(var(--chart-2))',\n  tertiary: 'hsl(var(--chart-3))',\n  quaternary: 'hsl(var(--chart-4))',\n  quinary: 'hsl(var(--chart-5))',\n};\n\n/**\n * Default pagination\n */\nexport const DEFAULT_PAGE_SIZE = 20;\nexport const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];\n"],"mappings":";AAcA,IAAa,IAA+E;CAC1F,QAAQ;EAAE,OAAO;EAAU,OAAO;EAAgD;CAClF,WAAW;EACT,OAAO;EACP,OAAO;EACR;CACD,OAAO;EAAE,OAAO;EAAS,OAAO;EAAgD;CAChF,SAAS;EAAE,OAAO;EAAW,OAAO;EAAiD;CACrF,SAAS;EAAE,OAAO;EAAW,OAAO;EAAuC;CAC3E,cAAc;EAAE,OAAO;EAAgB,OAAO;EAAgD;CAC/F,EAKY,IAA2E;CACtF,QAAQ;EAAE,OAAO;EAAU,OAAO;EAAgD;CAClF,UAAU;EAAE,OAAO;EAAY,OAAO;EAAiD;CACvF,SAAS;EAAE,OAAO;EAAW,OAAO;EAA8E;CAClH,SAAS;EAAE,OAAO;EAAW,OAAO;EAAgD;CACrF,EA6CY,IAA+E;CAC1F,SAAS;EAAE,OAAO;EAAW,OAAO;EAAgD;CACpF,UAAU;EAAE,OAAO;EAAY,OAAO;EAAgD;CACtF,MAAM;EAAE,OAAO;EAAQ,OAAO;EAA8E;CAC5G,SAAS;EAAE,OAAO;EAAW,OAAO;EAAiD;CACtF,EAKY,IACX;CACE,SAAS;EAAE,OAAO;EAAW,OAAO;EAAiD;CACrF,SAAS;EAAE,OAAO;EAAW,OAAO;EAAuC;CAC3E,aAAa;EAAE,OAAO;EAAe,OAAO;EAAuC;CACnF,SAAS;EAAE,OAAO;EAAW,OAAO;EAAgD;CACpF,QAAQ;EAAE,OAAO;EAAU,OAAO;EAA8E;CAChH,aAAa;EAAE,OAAO;EAAe,OAAO;EAAgD;CAC7F"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/admin/constants/index.ts"],"sourcesContent":["import type {\n  TenantStatus,\n  UserStatus,\n  SubscriptionStatus,\n  TicketStatus,\n  TicketPriority,\n  HealthStatus,\n  DeploymentStatus,\n  CloudProvider,\n} from '../types';\n\n/**\n * Semantic status-badge token bundles. These map to the platform status tokens\n * (bg/text/border) which are defined for EVERY theme + dark mode, so badges and\n * pills stay legible with strong contrast everywhere. Using these instead of\n * raw `bg-success/10`/`text-info` (whose base color tokens are undefined and\n * render invisible in dark mode).\n */\nconst STATUS_TOKENS = {\n  success: 'bg-status-success-bg text-status-success-text border-status-success-border',\n  warning: 'bg-status-warning-bg text-status-warning-text border-status-warning-border',\n  error: 'bg-status-error-bg text-status-error-text border-status-error-border',\n  info: 'bg-status-info-bg text-status-info-text border-status-info-border',\n  neutral: 'bg-status-neutral-bg text-status-neutral-text border-status-neutral-border',\n} as const;\n\n/**\n * Tenant status labels and colors\n */\nexport const TENANT_STATUS_CONFIG: Record<TenantStatus, { label: string; color: string }> = {\n  active: { label: 'Active', color: STATUS_TOKENS.success },\n  suspended: { label: 'Suspended', color: STATUS_TOKENS.error },\n  trial: { label: 'Trial', color: STATUS_TOKENS.warning },\n  deleted: { label: 'Deleted', color: STATUS_TOKENS.neutral },\n  pending: { label: 'Pending', color: STATUS_TOKENS.info },\n  provisioning: { label: 'Provisioning', color: STATUS_TOKENS.warning },\n};\n\n/**\n * User status labels and colors\n */\nexport const USER_STATUS_CONFIG: Record<UserStatus, { label: string; color: string }> = {\n  active: { label: 'Active', color: STATUS_TOKENS.success },\n  inactive: { label: 'Inactive', color: STATUS_TOKENS.neutral },\n  blocked: { label: 'Blocked', color: STATUS_TOKENS.error },\n  pending: { label: 'Pending', color: STATUS_TOKENS.warning },\n};\n\n/**\n * Subscription status labels and colors\n */\nexport const SUBSCRIPTION_STATUS_CONFIG: Record<\n  SubscriptionStatus,\n  { label: string; color: string }\n> = {\n  active: { label: 'Active', color: STATUS_TOKENS.success },\n  canceled: { label: 'Canceled', color: STATUS_TOKENS.neutral },\n  past_due: { label: 'Past Due', color: STATUS_TOKENS.error },\n  trialing: { label: 'Trialing', color: STATUS_TOKENS.info },\n  paused: { label: 'Paused', color: STATUS_TOKENS.warning },\n};\n\n/**\n * Ticket status labels and colors\n */\nexport const TICKET_STATUS_CONFIG: Record<TicketStatus, { label: string; color: string }> = {\n  open: { label: 'Open', color: STATUS_TOKENS.info },\n  in_progress: { label: 'In Progress', color: STATUS_TOKENS.warning },\n  resolved: { label: 'Resolved', color: STATUS_TOKENS.success },\n  closed: { label: 'Closed', color: STATUS_TOKENS.neutral },\n};\n\n/**\n * Ticket priority labels and colors\n */\nexport const TICKET_PRIORITY_CONFIG: Record<TicketPriority, { label: string; color: string }> = {\n  low: { label: 'Low', color: STATUS_TOKENS.neutral },\n  medium: { label: 'Medium', color: STATUS_TOKENS.info },\n  high: { label: 'High', color: STATUS_TOKENS.warning },\n  critical: { label: 'Critical', color: STATUS_TOKENS.error },\n};\n\n/**\n * Health status labels and colors\n */\nexport const HEALTH_STATUS_CONFIG: Record<HealthStatus, { label: string; color: string }> = {\n  healthy: { label: 'Healthy', color: STATUS_TOKENS.success },\n  degraded: { label: 'Degraded', color: STATUS_TOKENS.warning },\n  down: { label: 'Down', color: STATUS_TOKENS.error },\n  unknown: { label: 'Unknown', color: STATUS_TOKENS.neutral },\n};\n\n/**\n * Deployment status labels and colors\n */\nexport const DEPLOYMENT_STATUS_CONFIG: Record<DeploymentStatus, { label: string; color: string }> =\n  {\n    pending: { label: 'Pending', color: STATUS_TOKENS.neutral },\n    running: { label: 'Running', color: STATUS_TOKENS.info },\n    in_progress: { label: 'In Progress', color: STATUS_TOKENS.info },\n    success: { label: 'Success', color: STATUS_TOKENS.success },\n    failed: { label: 'Failed', color: STATUS_TOKENS.error },\n    rolled_back: { label: 'Rolled Back', color: STATUS_TOKENS.warning },\n  };\n\n/**\n * Cloud provider labels and colors. Each provider maps to a semantic status\n * tint so the pills stay theme-aware + dark-mode legible (no raw brand hexes).\n */\nexport const CLOUD_PROVIDER_CONFIG: Record<\n  CloudProvider,\n  { label: string; color: string; icon: string }\n> = {\n  aws: { label: 'AWS', color: STATUS_TOKENS.warning, icon: 'aws' },\n  azure: { label: 'Azure', color: STATUS_TOKENS.info, icon: 'azure' },\n  gcp: { label: 'GCP', color: STATUS_TOKENS.error, icon: 'gcp' },\n  digitalocean: { label: 'DigitalOcean', color: STATUS_TOKENS.info, icon: 'do' },\n};\n\n/**\n * Chart colors using semantic chart tokens (theme-aware full colors — not\n * `hsl(var(...))`, which would be invalid now that the chart vars are colors).\n */\nexport const CHART_COLORS = {\n  primary: 'var(--color-chart-1)',\n  secondary: 'var(--color-chart-2)',\n  tertiary: 'var(--color-chart-3)',\n  quaternary: 'var(--color-chart-4)',\n  quinary: 'var(--color-chart-5)',\n};\n\n/**\n * Default pagination\n */\nexport const DEFAULT_PAGE_SIZE = 20;\nexport const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];\n"],"mappings":";AAkBA,IAAM,IAAgB;CACpB,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV,EAKY,IAA+E;CAC1F,QAAQ;EAAE,OAAO;EAAU,OAAO,EAAc;EAAS;CACzD,WAAW;EAAE,OAAO;EAAa,OAAO,EAAc;EAAO;CAC7D,OAAO;EAAE,OAAO;EAAS,OAAO,EAAc;EAAS;CACvD,SAAS;EAAE,OAAO;EAAW,OAAO,EAAc;EAAS;CAC3D,SAAS;EAAE,OAAO;EAAW,OAAO,EAAc;EAAM;CACxD,cAAc;EAAE,OAAO;EAAgB,OAAO,EAAc;EAAS;CACtE,EAKY,IAA2E;CACtF,QAAQ;EAAE,OAAO;EAAU,OAAO,EAAc;EAAS;CACzD,UAAU;EAAE,OAAO;EAAY,OAAO,EAAc;EAAS;CAC7D,SAAS;EAAE,OAAO;EAAW,OAAO,EAAc;EAAO;CACzD,SAAS;EAAE,OAAO;EAAW,OAAO,EAAc;EAAS;CAC5D;AASmC,EAAc,SACV,EAAc,SACd,EAAc,OACd,EAAc,MAClB,EAAc,SAOlB,EAAc,MACA,EAAc,SACpB,EAAc,SAClB,EAAc,SAOpB,EAAc,SACR,EAAc,MAClB,EAAc,SACN,EAAc;AAMtD,IAAa,IAA+E;CAC1F,SAAS;EAAE,OAAO;EAAW,OAAO,EAAc;EAAS;CAC3D,UAAU;EAAE,OAAO;EAAY,OAAO,EAAc;EAAS;CAC7D,MAAM;EAAE,OAAO;EAAQ,OAAO,EAAc;EAAO;CACnD,SAAS;EAAE,OAAO;EAAW,OAAO,EAAc;EAAS;CAC5D,EAKY,IACX;CACE,SAAS;EAAE,OAAO;EAAW,OAAO,EAAc;EAAS;CAC3D,SAAS;EAAE,OAAO;EAAW,OAAO,EAAc;EAAM;CACxD,aAAa;EAAE,OAAO;EAAe,OAAO,EAAc;EAAM;CAChE,SAAS;EAAE,OAAO;EAAW,OAAO,EAAc;EAAS;CAC3D,QAAQ;EAAE,OAAO;EAAU,OAAO,EAAc;EAAO;CACvD,aAAa;EAAE,OAAO;EAAe,OAAO,EAAc;EAAS;CACpE;AAU2B,EAAc,SACV,EAAc,MAClB,EAAc,OACI,EAAc"}

package/dist/admin/pages/AuditLogsPage.js

@@ -1,42 +1,43 @@
 import { useAdminPermissions as e } from "../hooks/useAdminPermissions.js";
 import { EmptyState as t, Input as n } from "../components/ui.js";
 import { PageLayout as r } from "../components/PageLayout.js";
-import { formatRelativeTime as i } from "../utils/formatters.js";
-import { DataTable as a, Pagination as o } from "../components/DataTable.js";
-import { PermissionGuard as s } from "../components/PermissionGuard.js";
+import { formatNumber as i, formatRelativeTime as a } from "../utils/formatters.js";
+import { DataTable as o, Pagination as s } from "../components/DataTable.js";
+import { PermissionGuard as c } from "../components/PermissionGuard.js";
 import "../components/index.js";
-import { useListAuditLogsQuery as c } from "../../generated/global-operations.js";
-import { useCallback as l, useMemo as u, useState as d } from "react";
-import { Database as f, FileText as p, Key as m, Search as h, Settings as g, Shield as _, User as v } from "lucide-react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import { SaveToFilesButton as x } from "@burdenoff/fe-libs/storage";
+import { useListAuditLogsQuery as l } from "../../generated/global-operations.js";
+import { useCallback as u, useMemo as d, useState as f } from "react";
+import { Database as p, FileText as m, Key as h, Search as g, Settings as _, Shield as v, User as y } from "lucide-react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { EmphasisPanel as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
+import { SaveToFilesButton as w } from "@burdenoff/fe-libs/storage";
 //#region src/admin/pages/AuditLogsPage.tsx
-var S = 20, C = {
-	auth: /* @__PURE__ */ y(v, { className: "h-3 w-3" }),
-	user: /* @__PURE__ */ y(v, { className: "h-3 w-3" }),
-	settings: /* @__PURE__ */ y(g, { className: "h-3 w-3" }),
-	rbac: /* @__PURE__ */ y(_, { className: "h-3 w-3" }),
-	data: /* @__PURE__ */ y(f, { className: "h-3 w-3" }),
-	api: /* @__PURE__ */ y(m, { className: "h-3 w-3" })
+var T = 20, E = {
+	auth: /* @__PURE__ */ b(y, { className: "h-3 w-3" }),
+	user: /* @__PURE__ */ b(y, { className: "h-3 w-3" }),
+	settings: /* @__PURE__ */ b(_, { className: "h-3 w-3" }),
+	rbac: /* @__PURE__ */ b(v, { className: "h-3 w-3" }),
+	data: /* @__PURE__ */ b(p, { className: "h-3 w-3" }),
+	api: /* @__PURE__ */ b(h, { className: "h-3 w-3" })
 };
-function w(e) {
-	return C[e.split(".")[0]] ?? /* @__PURE__ */ y(p, { className: "h-3 w-3" });
+function D(e) {
+	return E[e.split(".")[0]] ?? /* @__PURE__ */ b(m, { className: "h-3 w-3" });
 }
-function T() {
-	let { canViewAuditLogs: f, isLoading: m } = e(), [g, _] = d(1), [v, C] = d(""), [T, E] = d(""), D = m || !f, { data: O, loading: k, error: A } = c({
+function O() {
+	let { canViewAuditLogs: p, isLoading: h } = e(), [_, v] = f(1), [y, E] = f(""), [O, k] = f(""), A = h || !p, { data: j, loading: M, error: N } = l({
 		variables: {
-			resource: T || void 0,
-			limit: S,
-			offset: (g - 1) * S
+			resource: O || void 0,
+			limit: T,
+			offset: (_ - 1) * T
 		},
 		fetchPolicy: "cache-and-network",
-		skip: D
-	}), j = u(() => (O?.auditLogs?.edges ?? []).map((e) => e.node), [O]), M = u(() => {
-		if (!v) return j;
-		let e = v.toLowerCase();
-		return j.filter((t) => t.action.toLowerCase().includes(e) || t.actorId.toLowerCase().includes(e) || t.resource.toLowerCase().includes(e) || t.tenantId.toLowerCase().includes(e));
-	}, [j, v]), N = O?.auditLogs?.totalCount ?? 0, P = Math.ceil(N / S), F = l(() => {
-		let e = M;
+		skip: A
+	}), P = d(() => (j?.auditLogs?.edges ?? []).map((e) => e.node), [j]), F = d(() => {
+		if (!y) return P;
+		let e = y.toLowerCase();
+		return P.filter((t) => t.action.toLowerCase().includes(e) || t.actorId.toLowerCase().includes(e) || t.resource.toLowerCase().includes(e) || t.tenantId.toLowerCase().includes(e));
+	}, [P, y]), I = j?.auditLogs?.totalCount ?? 0, L = Math.ceil(I / T), R = u(() => {
+		let e = F;
 		if (e.length === 0) return null;
 		let t = [
 			"id",
@@ -70,24 +71,24 @@ function T() {
 			n(e.createdAt)
 		].join(","))];
 		return new Blob([r.join("\n")], { type: "text/csv;charset=utf-8;" });
-	}, [M]), I = l(() => {
-		let e = F();
+	}, [F]), z = u(() => {
+		let e = R();
 		if (!e) return;
 		let t = URL.createObjectURL(e), n = document.createElement("a"), r = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
 		n.href = t, n.setAttribute("download", `audit-logs-${r}.csv`), document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(t);
-	}, [F]);
-	return /* @__PURE__ */ y(s, {
-		allowed: f,
-		isLoading: m,
+	}, [R]);
+	return /* @__PURE__ */ b(c, {
+		allowed: p,
+		isLoading: h,
 		pageTitle: "Audit Logs",
 		denyMessage: "You don't have permission to view audit logs.",
-		children: /* @__PURE__ */ y(r, {
+		children: /* @__PURE__ */ b(r, {
 			title: "Audit Logs",
 			gradientWord: "Logs",
-			description: `Security and compliance audit trail${N ? ` · ${N} total` : ""}`,
-			actions: /* @__PURE__ */ y(x, {
+			description: `Security and compliance audit trail${I ? ` · ${I} total` : ""}`,
+			actions: /* @__PURE__ */ b(w, {
 				label: "Export CSV",
-				disabled: k || M.length === 0,
+				disabled: M || F.length === 0,
 				testId: "audit-logs-export",
 				defaultFolderPath: "/Admin/Audit Logs",
 				source: {
@@ -95,49 +96,63 @@ function T() {
 					filename: `audit-logs-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.csv`,
 					mimeType: "text/csv",
 					getBlob: async () => {
-						let e = F();
+						let e = R();
 						return e ? { blob: e } : null;
 					}
 				},
-				onDownload: I
+				onDownload: z
 			}),
-			children: /* @__PURE__ */ b("div", {
+			children: /* @__PURE__ */ x("div", {
 				className: "space-y-4",
 				children: [
-					/* @__PURE__ */ b("div", {
-						className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+					/* @__PURE__ */ b(C, { children: "A tamper-evident record of who did what across the platform — every sign-in, permission change, and data action. Use this page to investigate a security incident, answer a compliance question, or export the trail as CSV for an auditor." }),
+					/* @__PURE__ */ x(S, {
+						className: "flex items-center gap-4 p-5",
 						children: [/* @__PURE__ */ b("div", {
+							className: "flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/15 text-action-primary-bg",
+							children: /* @__PURE__ */ b(m, { className: "h-6 w-6" })
+						}), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("div", {
+							className: "text-3xl font-bold tabular-nums text-text-primary",
+							children: i(I)
+						}), /* @__PURE__ */ b("p", {
+							className: "text-sm text-text-secondary",
+							children: "recorded audit events"
+						})] })]
+					}),
+					/* @__PURE__ */ x("div", {
+						className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+						children: [/* @__PURE__ */ x("div", {
 							className: "relative max-w-sm flex-1",
-							children: [/* @__PURE__ */ y(h, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ y(n, {
+							children: [/* @__PURE__ */ b(g, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ b(n, {
 								placeholder: "Search by action, actor, or resource...",
-								value: v,
-								onChange: (e) => C(e.target.value),
+								value: y,
+								onChange: (e) => E(e.target.value),
 								className: "pl-9"
 							})]
-						}), /* @__PURE__ */ y(n, {
+						}), /* @__PURE__ */ b(n, {
 							placeholder: "Filter by resource (e.g. tenant, user)...",
-							value: T,
+							value: O,
 							onChange: (e) => {
-								_(1), E(e.target.value);
+								v(1), k(e.target.value);
 							},
 							className: "max-w-xs"
 						})]
 					}),
-					A && /* @__PURE__ */ b("div", {
+					N && /* @__PURE__ */ x("div", {
 						className: "rounded-md border border-status-error-border/50 bg-status-error-bg/10 p-4 text-sm text-status-error-text",
-						children: ["Failed to load audit logs: ", A.message]
+						children: ["Failed to load audit logs: ", N.message]
 					}),
-					/* @__PURE__ */ y(a, {
+					/* @__PURE__ */ b(o, {
 						columns: [
 							{
 								key: "action",
 								header: "Action",
-								render: (e) => /* @__PURE__ */ b("div", {
+								render: (e) => /* @__PURE__ */ x("div", {
 									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ y("span", {
+									children: [/* @__PURE__ */ b("span", {
 										className: "text-text-secondary",
-										children: w(e.action)
-									}), /* @__PURE__ */ y("span", {
+										children: D(e.action)
+									}), /* @__PURE__ */ b("span", {
 										className: "font-mono text-sm font-medium text-text-primary",
 										children: e.action
 									})]
@@ -147,12 +162,12 @@ function T() {
 								key: "actorId",
 								header: "Actor",
 								width: "180px",
-								render: (e) => /* @__PURE__ */ b("div", {
+								render: (e) => /* @__PURE__ */ x("div", {
 									className: "min-w-0",
-									children: [/* @__PURE__ */ y("div", {
+									children: [/* @__PURE__ */ b("div", {
 										className: "truncate text-sm",
 										children: e.actorId
-									}), /* @__PURE__ */ y("div", {
+									}), /* @__PURE__ */ b("div", {
 										className: "text-xs text-text-secondary capitalize",
 										children: e.actorType
 									})]
@@ -162,12 +177,12 @@ function T() {
 								key: "resource",
 								header: "Resource",
 								width: "150px",
-								render: (e) => /* @__PURE__ */ b("div", {
+								render: (e) => /* @__PURE__ */ x("div", {
 									className: "min-w-0",
-									children: [/* @__PURE__ */ y("div", {
+									children: [/* @__PURE__ */ b("div", {
 										className: "truncate text-sm",
 										children: e.resource
-									}), e.resourceId && /* @__PURE__ */ b("div", {
+									}), e.resourceId && /* @__PURE__ */ x("div", {
 										className: "truncate text-xs text-text-secondary",
 										children: ["#", String(e.resourceId).slice(-8)]
 									})]
@@ -177,7 +192,7 @@ function T() {
 								key: "tenantId",
 								header: "Tenant",
 								width: "130px",
-								render: (e) => /* @__PURE__ */ y("span", {
+								render: (e) => /* @__PURE__ */ b("span", {
 									className: "text-xs text-text-secondary",
 									children: e.tenantId ? `#${e.tenantId.slice(-8)}` : "—"
 								})
@@ -186,7 +201,7 @@ function T() {
 								key: "ipAddress",
 								header: "IP",
 								width: "120px",
-								render: (e) => /* @__PURE__ */ y("span", {
+								render: (e) => /* @__PURE__ */ b("span", {
 									className: "font-mono text-xs text-text-secondary",
 									children: e.ipAddress ?? "—"
 								})
@@ -195,25 +210,25 @@ function T() {
 								key: "createdAt",
 								header: "Time",
 								width: "110px",
-								render: (e) => i(e.createdAt)
+								render: (e) => a(e.createdAt)
 							}
 						],
-						data: M,
+						data: F,
 						keyExtractor: (e) => e.id,
-						loading: k,
-						emptyState: /* @__PURE__ */ y(t, {
+						loading: M,
+						emptyState: /* @__PURE__ */ b(t, {
 							illustration: "empty-files",
-							icon: /* @__PURE__ */ y(p, { className: "h-8 w-8" }),
+							icon: /* @__PURE__ */ b(m, { className: "h-8 w-8" }),
 							title: "No audit logs found",
 							description: "Audit events will appear here when actions are performed"
 						})
 					}),
-					N > S && /* @__PURE__ */ y(o, {
-						page: g,
-						totalPages: P,
-						totalItems: N,
-						pageSize: S,
-						onPageChange: _
+					I > T && /* @__PURE__ */ b(s, {
+						page: _,
+						totalPages: L,
+						totalItems: I,
+						pageSize: T,
+						onPageChange: v
 					})
 				]
 			})
@@ -221,6 +236,6 @@ function T() {
 	});
 }
 //#endregion
-export { T as AuditLogsPage };
+export { O as AuditLogsPage };
 
 //# sourceMappingURL=AuditLogsPage.js.map

package/dist/admin/pages/AuditLogsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuditLogsPage.js","names":[],"sources":["../../../src/admin/pages/AuditLogsPage.tsx"],"sourcesContent":["import { useState, useMemo, useCallback } from 'react';\nimport { FileText, Search, Download, User, Settings, Shield, Database, Key } from 'lucide-react';\nimport { SaveToFilesButton } from '@burdenoff/fe-libs/storage';\nimport {\n  PageLayout,\n  Input,\n  DataTable,\n  Pagination,\n  EmptyState,\n  Button,\n  PermissionGuard,\n} from '../components';\nimport { useAdminPermissions } from '../hooks/useAdminPermissions';\nimport { formatRelativeTime } from '../utils/formatters';\nimport { useListAuditLogsQuery } from '../../generated/global-operations';\n\nconst PAGE_SIZE = 20;\n\nconst ACTION_ICONS: Record<string, React.ReactNode> = {\n  auth: <User className=\"h-3 w-3\" />,\n  user: <User className=\"h-3 w-3\" />,\n  settings: <Settings className=\"h-3 w-3\" />,\n  rbac: <Shield className=\"h-3 w-3\" />,\n  data: <Database className=\"h-3 w-3\" />,\n  api: <Key className=\"h-3 w-3\" />,\n};\n\nfunction getActionIcon(action: string) {\n  const prefix = action.split('.')[0];\n  return ACTION_ICONS[prefix] ?? <FileText className=\"h-3 w-3\" />;\n}\n\n/**\n * Audit logs page — connected to real backend\n */\nexport function AuditLogsPage() {\n  const { canViewAuditLogs, isLoading: permissionsLoading } = useAdminPermissions();\n\n  const [page, setPage] = useState(1);\n  const [search, setSearch] = useState('');\n  const [resourceFilter, setResourceFilter] = useState('');\n\n  const skipQueries = permissionsLoading || !canViewAuditLogs;\n\n  const { data, loading, error } = useListAuditLogsQuery({\n    variables: {\n      resource: resourceFilter || undefined,\n      limit: PAGE_SIZE,\n      offset: (page - 1) * PAGE_SIZE,\n    },\n    fetchPolicy: 'cache-and-network',\n    skip: skipQueries,\n  });\n\n  const auditLogs = useMemo(() => {\n    const edges = data?.auditLogs?.edges ?? [];\n    return edges.map((e: (typeof edges)[number]) => e.node);\n  }, [data]);\n\n  type AuditLogNode = (typeof auditLogs)[number];\n\n  const filteredLogs = useMemo(() => {\n    if (!search) return auditLogs;\n    const q = search.toLowerCase();\n    return auditLogs.filter(\n      (log: AuditLogNode) =>\n        log.action.toLowerCase().includes(q) ||\n        log.actorId.toLowerCase().includes(q) ||\n        log.resource.toLowerCase().includes(q) ||\n        log.tenantId.toLowerCase().includes(q)\n    );\n  }, [auditLogs, search]);\n\n  const total = data?.auditLogs?.totalCount ?? 0;\n  const totalPages = Math.ceil(total / PAGE_SIZE);\n\n  const buildAuditCsvBlob = useCallback((): Blob | null => {\n    const rows = filteredLogs;\n    if (rows.length === 0) return null;\n\n    const headers = [\n      'id',\n      'action',\n      'actorId',\n      'actorType',\n      'resource',\n      'resourceId',\n      'tenantId',\n      'ipAddress',\n      'userAgent',\n      'changes',\n      'metadata',\n      'createdAt',\n    ];\n\n    const escape = (value: unknown): string => {\n      if (value === null || value === undefined) return '';\n      const str = typeof value === 'object' ? JSON.stringify(value) : String(value);\n      // RFC 4180: wrap in quotes if it contains quote, comma, or newline; double internal quotes\n      if (/[\",\\n\\r]/.test(str)) {\n        return `\"${str.replace(/\"/g, '\"\"')}\"`;\n      }\n      return str;\n    };\n\n    const csvLines = [\n      headers.join(','),\n      ...rows.map((log: AuditLogNode) =>\n        [\n          escape(log.id),\n          escape(log.action),\n          escape(log.actorId),\n          escape(log.actorType),\n          escape(log.resource),\n          escape(log.resourceId),\n          escape(log.tenantId),\n          escape(log.ipAddress),\n          escape((log as { userAgent?: unknown }).userAgent),\n          escape((log as { changes?: unknown }).changes),\n          escape((log as { metadata?: unknown }).metadata),\n          escape(log.createdAt),\n        ].join(',')\n      ),\n    ];\n\n    return new Blob([csvLines.join('\\n')], { type: 'text/csv;charset=utf-8;' });\n  }, [filteredLogs]);\n\n  const exportToCsv = useCallback(() => {\n    const blob = buildAuditCsvBlob();\n    if (!blob) return;\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement('a');\n    const stamp = new Date().toISOString().replace(/[:.]/g, '-');\n    link.href = url;\n    link.setAttribute('download', `audit-logs-${stamp}.csv`);\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n    URL.revokeObjectURL(url);\n  }, [buildAuditCsvBlob]);\n\n  const columns = [\n    {\n      key: 'action',\n      header: 'Action',\n      render: (log: (typeof auditLogs)[number]) => (\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-text-secondary\">{getActionIcon(log.action)}</span>\n          <span className=\"font-mono text-sm font-medium text-text-primary\">{log.action}</span>\n        </div>\n      ),\n    },\n    {\n      key: 'actorId',\n      header: 'Actor',\n      width: '180px',\n      render: (log: (typeof auditLogs)[number]) => (\n        <div className=\"min-w-0\">\n          <div className=\"truncate text-sm\">{log.actorId}</div>\n          <div className=\"text-xs text-text-secondary capitalize\">{log.actorType}</div>\n        </div>\n      ),\n    },\n    {\n      key: 'resource',\n      header: 'Resource',\n      width: '150px',\n      render: (log: (typeof auditLogs)[number]) => (\n        <div className=\"min-w-0\">\n          <div className=\"truncate text-sm\">{log.resource}</div>\n          {log.resourceId && (\n            <div className=\"truncate text-xs text-text-secondary\">\n              #{String(log.resourceId).slice(-8)}\n            </div>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: 'tenantId',\n      header: 'Tenant',\n      width: '130px',\n      render: (log: (typeof auditLogs)[number]) => (\n        <span className=\"text-xs text-text-secondary\">\n          {log.tenantId ? `#${log.tenantId.slice(-8)}` : '—'}\n        </span>\n      ),\n    },\n    {\n      key: 'ipAddress',\n      header: 'IP',\n      width: '120px',\n      render: (log: (typeof auditLogs)[number]) => (\n        <span className=\"font-mono text-xs text-text-secondary\">{log.ipAddress ?? '—'}</span>\n      ),\n    },\n    {\n      key: 'createdAt',\n      header: 'Time',\n      width: '110px',\n      render: (log: (typeof auditLogs)[number]) => formatRelativeTime(log.createdAt),\n    },\n  ];\n\n  return (\n    <PermissionGuard\n      allowed={canViewAuditLogs}\n      isLoading={permissionsLoading}\n      pageTitle=\"Audit Logs\"\n      denyMessage=\"You don't have permission to view audit logs.\"\n    >\n      <PageLayout\n        title=\"Audit Logs\"\n        gradientWord=\"Logs\"\n        description={`Security and compliance audit trail${total ? ` · ${total} total` : ''}`}\n        actions={\n          <SaveToFilesButton\n            label=\"Export CSV\"\n            disabled={loading || filteredLogs.length === 0}\n            testId=\"audit-logs-export\"\n            defaultFolderPath=\"/Admin/Audit Logs\"\n            source={{\n              kind: 'blob',\n              filename: `audit-logs-${new Date().toISOString().replace(/[:.]/g, '-')}.csv`,\n              mimeType: 'text/csv',\n              getBlob: async () => {\n                const blob = buildAuditCsvBlob();\n                return blob ? { blob } : null;\n              },\n            }}\n            onDownload={exportToCsv}\n          />\n        }\n      >\n        <div className=\"space-y-4\">\n          <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"relative max-w-sm flex-1\">\n              <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n              <Input\n                placeholder=\"Search by action, actor, or resource...\"\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                className=\"pl-9\"\n              />\n            </div>\n            <Input\n              placeholder=\"Filter by resource (e.g. tenant, user)...\"\n              value={resourceFilter}\n              onChange={(e) => {\n                setPage(1);\n                setResourceFilter(e.target.value);\n              }}\n              className=\"max-w-xs\"\n            />\n          </div>\n\n          {error && (\n            <div className=\"rounded-md border border-status-error-border/50 bg-status-error-bg/10 p-4 text-sm text-status-error-text\">\n              Failed to load audit logs: {error.message}\n            </div>\n          )}\n\n          <DataTable\n            columns={columns}\n            data={filteredLogs}\n            keyExtractor={(l) => l.id}\n            loading={loading}\n            emptyState={\n              <EmptyState\n                illustration=\"empty-files\"\n                icon={<FileText className=\"h-8 w-8\" />}\n                title=\"No audit logs found\"\n                description=\"Audit events will appear here when actions are performed\"\n              />\n            }\n          />\n\n          {total > PAGE_SIZE && (\n            <Pagination\n              page={page}\n              totalPages={totalPages}\n              totalItems={total}\n              pageSize={PAGE_SIZE}\n              onPageChange={setPage}\n            />\n          )}\n        </div>\n      </PageLayout>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AuditLogsPage.js","names":[],"sources":["../../../src/admin/pages/AuditLogsPage.tsx"],"sourcesContent":["import { useState, useMemo, useCallback } from 'react';\nimport { FileText, Search, Download, User, Settings, Shield, Database, Key } from 'lucide-react';\nimport { SaveToFilesButton } from '@burdenoff/fe-libs/storage';\nimport {\n  PageLayout,\n  Input,\n  DataTable,\n  Pagination,\n  EmptyState,\n  Button,\n  PermissionGuard,\n} from '../components';\nimport { useAdminPermissions } from '../hooks/useAdminPermissions';\nimport { formatRelativeTime, formatNumber } from '../utils/formatters';\nimport { useListAuditLogsQuery } from '../../generated/global-operations';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\n\nconst PAGE_SIZE = 20;\n\nconst ACTION_ICONS: Record<string, React.ReactNode> = {\n  auth: <User className=\"h-3 w-3\" />,\n  user: <User className=\"h-3 w-3\" />,\n  settings: <Settings className=\"h-3 w-3\" />,\n  rbac: <Shield className=\"h-3 w-3\" />,\n  data: <Database className=\"h-3 w-3\" />,\n  api: <Key className=\"h-3 w-3\" />,\n};\n\nfunction getActionIcon(action: string) {\n  const prefix = action.split('.')[0];\n  return ACTION_ICONS[prefix] ?? <FileText className=\"h-3 w-3\" />;\n}\n\n/**\n * Audit logs page — connected to real backend\n */\nexport function AuditLogsPage() {\n  const { canViewAuditLogs, isLoading: permissionsLoading } = useAdminPermissions();\n\n  const [page, setPage] = useState(1);\n  const [search, setSearch] = useState('');\n  const [resourceFilter, setResourceFilter] = useState('');\n\n  const skipQueries = permissionsLoading || !canViewAuditLogs;\n\n  const { data, loading, error } = useListAuditLogsQuery({\n    variables: {\n      resource: resourceFilter || undefined,\n      limit: PAGE_SIZE,\n      offset: (page - 1) * PAGE_SIZE,\n    },\n    fetchPolicy: 'cache-and-network',\n    skip: skipQueries,\n  });\n\n  const auditLogs = useMemo(() => {\n    const edges = data?.auditLogs?.edges ?? [];\n    return edges.map((e: (typeof edges)[number]) => e.node);\n  }, [data]);\n\n  type AuditLogNode = (typeof auditLogs)[number];\n\n  const filteredLogs = useMemo(() => {\n    if (!search) return auditLogs;\n    const q = search.toLowerCase();\n    return auditLogs.filter(\n      (log: AuditLogNode) =>\n        log.action.toLowerCase().includes(q) ||\n        log.actorId.toLowerCase().includes(q) ||\n        log.resource.toLowerCase().includes(q) ||\n        log.tenantId.toLowerCase().includes(q)\n    );\n  }, [auditLogs, search]);\n\n  const total = data?.auditLogs?.totalCount ?? 0;\n  const totalPages = Math.ceil(total / PAGE_SIZE);\n\n  const buildAuditCsvBlob = useCallback((): Blob | null => {\n    const rows = filteredLogs;\n    if (rows.length === 0) return null;\n\n    const headers = [\n      'id',\n      'action',\n      'actorId',\n      'actorType',\n      'resource',\n      'resourceId',\n      'tenantId',\n      'ipAddress',\n      'userAgent',\n      'changes',\n      'metadata',\n      'createdAt',\n    ];\n\n    const escape = (value: unknown): string => {\n      if (value === null || value === undefined) return '';\n      const str = typeof value === 'object' ? JSON.stringify(value) : String(value);\n      // RFC 4180: wrap in quotes if it contains quote, comma, or newline; double internal quotes\n      if (/[\",\\n\\r]/.test(str)) {\n        return `\"${str.replace(/\"/g, '\"\"')}\"`;\n      }\n      return str;\n    };\n\n    const csvLines = [\n      headers.join(','),\n      ...rows.map((log: AuditLogNode) =>\n        [\n          escape(log.id),\n          escape(log.action),\n          escape(log.actorId),\n          escape(log.actorType),\n          escape(log.resource),\n          escape(log.resourceId),\n          escape(log.tenantId),\n          escape(log.ipAddress),\n          escape((log as { userAgent?: unknown }).userAgent),\n          escape((log as { changes?: unknown }).changes),\n          escape((log as { metadata?: unknown }).metadata),\n          escape(log.createdAt),\n        ].join(',')\n      ),\n    ];\n\n    return new Blob([csvLines.join('\\n')], { type: 'text/csv;charset=utf-8;' });\n  }, [filteredLogs]);\n\n  const exportToCsv = useCallback(() => {\n    const blob = buildAuditCsvBlob();\n    if (!blob) return;\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement('a');\n    const stamp = new Date().toISOString().replace(/[:.]/g, '-');\n    link.href = url;\n    link.setAttribute('download', `audit-logs-${stamp}.csv`);\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n    URL.revokeObjectURL(url);\n  }, [buildAuditCsvBlob]);\n\n  const columns = [\n    {\n      key: 'action',\n      header: 'Action',\n      render: (log: (typeof auditLogs)[number]) => (\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-text-secondary\">{getActionIcon(log.action)}</span>\n          <span className=\"font-mono text-sm font-medium text-text-primary\">{log.action}</span>\n        </div>\n      ),\n    },\n    {\n      key: 'actorId',\n      header: 'Actor',\n      width: '180px',\n      render: (log: (typeof auditLogs)[number]) => (\n        <div className=\"min-w-0\">\n          <div className=\"truncate text-sm\">{log.actorId}</div>\n          <div className=\"text-xs text-text-secondary capitalize\">{log.actorType}</div>\n        </div>\n      ),\n    },\n    {\n      key: 'resource',\n      header: 'Resource',\n      width: '150px',\n      render: (log: (typeof auditLogs)[number]) => (\n        <div className=\"min-w-0\">\n          <div className=\"truncate text-sm\">{log.resource}</div>\n          {log.resourceId && (\n            <div className=\"truncate text-xs text-text-secondary\">\n              #{String(log.resourceId).slice(-8)}\n            </div>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: 'tenantId',\n      header: 'Tenant',\n      width: '130px',\n      render: (log: (typeof auditLogs)[number]) => (\n        <span className=\"text-xs text-text-secondary\">\n          {log.tenantId ? `#${log.tenantId.slice(-8)}` : '—'}\n        </span>\n      ),\n    },\n    {\n      key: 'ipAddress',\n      header: 'IP',\n      width: '120px',\n      render: (log: (typeof auditLogs)[number]) => (\n        <span className=\"font-mono text-xs text-text-secondary\">{log.ipAddress ?? '—'}</span>\n      ),\n    },\n    {\n      key: 'createdAt',\n      header: 'Time',\n      width: '110px',\n      render: (log: (typeof auditLogs)[number]) => formatRelativeTime(log.createdAt),\n    },\n  ];\n\n  return (\n    <PermissionGuard\n      allowed={canViewAuditLogs}\n      isLoading={permissionsLoading}\n      pageTitle=\"Audit Logs\"\n      denyMessage=\"You don't have permission to view audit logs.\"\n    >\n      <PageLayout\n        title=\"Audit Logs\"\n        gradientWord=\"Logs\"\n        description={`Security and compliance audit trail${total ? ` · ${total} total` : ''}`}\n        actions={\n          <SaveToFilesButton\n            label=\"Export CSV\"\n            disabled={loading || filteredLogs.length === 0}\n            testId=\"audit-logs-export\"\n            defaultFolderPath=\"/Admin/Audit Logs\"\n            source={{\n              kind: 'blob',\n              filename: `audit-logs-${new Date().toISOString().replace(/[:.]/g, '-')}.csv`,\n              mimeType: 'text/csv',\n              getBlob: async () => {\n                const blob = buildAuditCsvBlob();\n                return blob ? { blob } : null;\n              },\n            }}\n            onDownload={exportToCsv}\n          />\n        }\n      >\n        <div className=\"space-y-4\">\n          <PagePurpose>\n            A tamper-evident record of who did what across the platform — every sign-in,\n            permission change, and data action. Use this page to investigate a security incident,\n            answer a compliance question, or export the trail as CSV for an auditor.\n          </PagePurpose>\n\n          {/* Emphasis: total recorded audit events. */}\n          <EmphasisPanel className=\"flex items-center gap-4 p-5\">\n            <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/15 text-action-primary-bg\">\n              <FileText className=\"h-6 w-6\" />\n            </div>\n            <div>\n              <div className=\"text-3xl font-bold tabular-nums text-text-primary\">\n                {formatNumber(total)}\n              </div>\n              <p className=\"text-sm text-text-secondary\">recorded audit events</p>\n            </div>\n          </EmphasisPanel>\n\n          <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"relative max-w-sm flex-1\">\n              <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n              <Input\n                placeholder=\"Search by action, actor, or resource...\"\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                className=\"pl-9\"\n              />\n            </div>\n            <Input\n              placeholder=\"Filter by resource (e.g. tenant, user)...\"\n              value={resourceFilter}\n              onChange={(e) => {\n                setPage(1);\n                setResourceFilter(e.target.value);\n              }}\n              className=\"max-w-xs\"\n            />\n          </div>\n\n          {error && (\n            <div className=\"rounded-md border border-status-error-border/50 bg-status-error-bg/10 p-4 text-sm text-status-error-text\">\n              Failed to load audit logs: {error.message}\n            </div>\n          )}\n\n          <DataTable\n            columns={columns}\n            data={filteredLogs}\n            keyExtractor={(l) => l.id}\n            loading={loading}\n            emptyState={\n              <EmptyState\n                illustration=\"empty-files\"\n                icon={<FileText className=\"h-8 w-8\" />}\n                title=\"No audit logs found\"\n                description=\"Audit events will appear here when actions are performed\"\n              />\n            }\n          />\n\n          {total > PAGE_SIZE && (\n            <Pagination\n              page={page}\n              totalPages={totalPages}\n              totalItems={total}\n              pageSize={PAGE_SIZE}\n              onPageChange={setPage}\n            />\n          )}\n        </div>\n      </PageLayout>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}