feat (v1.0.0): initial refactor and redesign

app/ai/usage/components/RecentSessions.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { DailyData } from '@/lib/types'
+import { getModelLabel } from './utils'
+import type { ToolTheme } from '@/app/ai/theme'
+
+interface RecentSessionsProps {
+  daily: DailyData[]
+  theme: ToolTheme
+}
+
+export default function RecentSessions({ daily, theme }: RecentSessionsProps) {
+  const sessions = daily.filter(day => day.totalTokens > 0 || day.totalCost > 0)
+  const rows = sessions.slice(-5).reverse()
+
+  return (
+    <section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+      <h2 className="text-2xl font-semibold mb-4 text-gray-200">Recent Sessions</h2>
+      <div className="overflow-x-auto">
+        <table className="w-full text-left">
+          <thead>
+            <tr className="border-b border-gray-700">
+              <th className="py-2 px-4 text-gray-400">Date</th>
+              <th className="py-2 px-4 text-gray-400">Models Used</th>
+              <th className="py-2 px-4 text-gray-400">Total Tokens</th>
+              <th className="py-2 px-4 text-gray-400">Cost</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="py-4 px-4 text-center text-gray-500">
+                  No sessions in this range.
+                </td>
+              </tr>
+            ) : (
+              rows.map((day, index) => (
+                <tr key={index} className="border-b border-gray-800 hover:bg-gray-800/50">
+                  <td className="py-2 px-4 text-gray-300">{new Date(day.date + 'T00:00:00').toLocaleDateString()}</td>
+                  <td className="py-2 px-4 text-gray-300">
+                    {day.modelsUsed.map(getModelLabel).join(', ')}
+                  </td>
+                  <td className="py-2 px-4 text-gray-300">{(day.totalTokens / 1000000).toFixed(2)}M</td>
+                  <td className="py-2 px-4 font-semibold" style={{ color: theme.emphasis.cost }}>
+                    ${day.totalCost.toFixed(2)}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}