feat: add TTS statistics to DashboardPage and StatisticsGrid components

src/components/dashboard/StatisticsGrid.tsx

@@ -2,7 +2,7 @@ import { StatisticCard } from '@/components/dashboard/StatisticCard'
 import { NumberFlowDuration } from '@/components/ui/number-flow-duration'
 import { NumberFlowSize } from '@/components/ui/number-flow-size'
 import NumberFlow from '@number-flow/react'
-import { Clock, HardDrive, Music, Play, Volume2 } from 'lucide-react'
+import { Clock, HardDrive, Music, Play, Volume2, MessageSquare } from 'lucide-react'
 
 interface SoundboardStatistics {
   sound_count: number
@@ -18,12 +18,20 @@ interface TrackStatistics {
   total_size: number
 }
 
+interface TTSStatistics {
+  sound_count: number
+  total_play_count: number
+  total_duration: number
+  total_size: number
+}
+
 interface StatisticsGridProps {
   soundboardStatistics: SoundboardStatistics
   trackStatistics: TrackStatistics
+  ttsStatistics: TTSStatistics
 }
 
-export function StatisticsGrid({ soundboardStatistics, trackStatistics }: StatisticsGridProps) {
+export function StatisticsGrid({ soundboardStatistics, trackStatistics, ttsStatistics }: StatisticsGridProps) {
   return (
     <div className="space-y-6">
       <div>
@@ -109,6 +117,48 @@ export function StatisticsGrid({ soundboardStatistics, trackStatistics }: Statis
           />
         </div>
       </div>
+
+      <div>
+        <h2 className="text-lg font-semibold mb-3 text-muted-foreground">
+          TTS Statistics
+        </h2>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <StatisticCard
+            title="Total TTS"
+            icon={MessageSquare}
+            value={<NumberFlow value={ttsStatistics.sound_count} />}
+            description="Text-to-speech audio files"
+          />
+          <StatisticCard
+            title="Total Plays"
+            icon={Play}
+            value={<NumberFlow value={ttsStatistics.total_play_count} />}
+            description="All-time play count"
+          />
+          <StatisticCard
+            title="Total Duration"
+            icon={Clock}
+            value={
+              <NumberFlowDuration
+                duration={ttsStatistics.total_duration}
+                variant="wordy"
+              />
+            }
+            description="Combined TTS duration"
+          />
+          <StatisticCard
+            title="Total Size"
+            icon={HardDrive}
+            value={
+              <NumberFlowSize
+                size={ttsStatistics.total_size}
+                binary={true}
+              />
+            }
+            description="Original + normalized files"
+          />
+        </div>
+      </div>
     </div>
   )
 }