Refactor Limits page

.gitignore

@@ -39,6 +39,7 @@ next-env.d.ts
 
 # AI agents and related files
 CLAUDE.md
+.cursor
 .agent
 
 

src/__test__/unit/currency.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import {
+  CurrencyInputSchema,
+  formatCurrencyValue,
+  sanitizeCurrencyInput,
+} from '@/lib/utils/currency'
+
+describe('sanitizeCurrencyInput', () => {
+  it.each([
+    ['$1,250', '1250'],
+    ['1250', '1250'],
+    ['abc', ''],
+    ['', ''],
+  ])('returns %p -> %p', (value: string, expected: string) => {
+    expect(sanitizeCurrencyInput(value)).toBe(expected)
+  })
+})
+
+describe('formatCurrencyValue', () => {
+  it.each([
+    [1250, '1,250'],
+    [100, '100'],
+    [0, '0'],
+    [1000000, '1,000,000'],
+  ])('returns %p -> %p', (value: number, expected: string) => {
+    expect(formatCurrencyValue(value)).toBe(expected)
+  })
+})
+
+describe('CurrencyInputSchema', () => {
+  it.each(['100', '1', ' 100 ', '999999'])('accepts %p', (value: string) => {
+    expect(CurrencyInputSchema.safeParse(value).success).toBe(true)
+  })
+
+  it.each([
+    '',
+    '   ',
+    '12.50',
+    '1,250',
+    'abc',
+    '0',
+  ])('rejects %p', (value: string) => {
+    expect(CurrencyInputSchema.safeParse(value).success).toBe(false)
+  })
+})

src/app/dashboard/[teamSlug]/limits/page.tsx

@@ -1,6 +1,6 @@
-import UsageLimits from '@/features/dashboard/limits/usage-limits'
+import { Page } from '@/features/dashboard/layouts/page'
+import { UsageLimits } from '@/features/dashboard/limits/usage-limits'
 import { HydrateClient, prefetch, trpc } from '@/trpc/server'
-import Frame from '@/ui/frame'
 
 interface LimitsPageProps {
   params: Promise<{ teamSlug: string }>
@@ -13,14 +13,9 @@ export default async function LimitsPage({ params }: LimitsPageProps) {
 
   return (
     <HydrateClient>
-      <Frame
-        classNames={{
-          frame: 'flex flex-col gap-4 max-md:border-none',
-          wrapper: 'w-full max-md:p-0',
-        }}
-      >
+      <Page>
         <UsageLimits />
-      </Frame>
+      </Page>
     </HydrateClient>
   )
 }

src/features/dashboard/layouts/page.tsx

@@ -7,7 +7,7 @@ interface PageProps {
 }
 
 export const Page = ({ children, className }: PageProps) => (
-  <div className={cn('mx-auto w-full max-w-[900px]', className)}>
+  <div className={cn('mx-auto w-full max-w-[900px] px-3 md:px-0', className)}>
     {children}
   </div>
 )

src/features/dashboard/limits/alert-ascii-icon.tsx

@@ -0,0 +1,45 @@
+import type React from 'react'
+import { cn } from '@/lib/utils/index'
+
+const LINES = [
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '           -********-           ',
+  '          -*--     -*-          ',
+  '         -*-        -*-         ',
+  '         **-        -**         ',
+  '        -*-          -*-        ',
+  '        -**----------**-        ',
+  '        ----**----**----        ',
+  '            -******-            ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+]
+
+const TEXT_STYLE: React.CSSProperties = {
+  fontSize: '3.802px',
+  fontFamily: 'var(--font-mono)',
+  fontWeight: 600,
+  letterSpacing: '-0.038px',
+  lineHeight: '4px',
+  fontFeatureSettings: "'ss03' 1",
+}
+
+export const AlertAsciiIcon = ({ className }: { className?: string }) => (
+  <div className={cn('relative size-[72px]', className)}>
+    <div
+      className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap text-fg uppercase"
+      style={TEXT_STYLE}
+    >
+      {LINES.map((line, i) => (
+        <p key={i} className="m-0 whitespace-pre">
+          {line}
+        </p>
+      ))}
+    </div>
+  </div>
+)

src/features/dashboard/limits/limit-ascii-icon.tsx

@@ -0,0 +1,45 @@
+import type React from 'react'
+import { cn } from '@/lib/utils/index'
+
+const LINES = [
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '            ---**---            ',
+  '          -**------**-          ',
+  '        -**- -      -**-        ',
+  '        **  -**-      **        ',
+  '        *-    ---     -*        ',
+  '        **            **        ',
+  '        -**-        -**-        ',
+  '          --        --          ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+]
+
+const TEXT_STYLE: React.CSSProperties = {
+  fontSize: '3.802px',
+  fontFamily: 'var(--font-mono)',
+  fontWeight: 600,
+  letterSpacing: '-0.038px',
+  lineHeight: '4px',
+  fontFeatureSettings: "'ss03' 1",
+}
+
+export const LimitAsciiIcon = ({ className }: { className?: string }) => (
+  <div className={cn('relative size-[72px]', className)}>
+    <div
+      className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap text-fg uppercase"
+      style={TEXT_STYLE}
+    >
+      {LINES.map((line, i) => (
+        <p key={i} className="m-0 whitespace-pre">
+          {line}
+        </p>
+      ))}
+    </div>
+  </div>
+)