front

app/components/analytics/DeviceAnalytics.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { DeviceAnalytics as DeviceAnalyticsType } from '../../api/types';
+
+interface DeviceAnalyticsProps {
+  data: DeviceAnalyticsType;
+}
+
+function StatCard({ title, items }: { title: string; items: { name: string; count: number; percentage: number }[] }) {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{title}</h3>
+      <div className="space-y-4">
+        {items.map((item, index) => (
+          <div key={index}>
+            <div className="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-1">
+              <span>{item.name}</span>
+              <span>{item.count.toLocaleString()} ({item.percentage.toFixed(1)}%)</span>
+            </div>
+            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+              <div
+                className="bg-blue-500 h-2 rounded-full"
+                style={{ width: `${item.percentage}%` }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function DeviceAnalytics({ data }: DeviceAnalyticsProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <StatCard
+        title="Device Types"
+        items={data.deviceTypes.map(item => ({
+          name: item.type.charAt(0).toUpperCase() + item.type.slice(1),
+          count: item.count,
+          percentage: item.percentage
+        }))}
+      />
+      <StatCard
+        title="Browsers"
+        items={data.browsers}
+      />
+      <StatCard
+        title="Operating Systems"
+        items={data.operatingSystems}
+      />
+    </div>
+  );
+}