Initial: saas template via tAI

2026-05-21 12:02:13 +01:00
commit 1cd690d7a3
24 changed files with 2401 additions and 0 deletions
@@ -0,0 +1,127 @@
+import Sidebar from "@/components/Sidebar";
+import DashboardHeader from "@/components/DashboardHeader";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+
+const growthData = [
+  { month: "Jul", users: 1200 }, { month: "Aug", users: 1800 },
+  { month: "Sep", users: 2400 }, { month: "Oct", users: 3100 },
+  { month: "Nov", users: 3900 }, { month: "Dec", users: 4800 },
+];
+
+const funnel = [
+  { label: "Visitors", value: 12450, pct: 100 },
+  { label: "Signups", value: 3200, pct: 25.7 },
+  { label: "Trials", value: 1840, pct: 14.8 },
+  { label: "Paid", value: 920, pct: 7.4 },
+];
+
+const engagement = [
+  { label: "DAU", value: "1,247" },
+  { label: "WAU", value: "4,832" },
+  { label: "MAU", value: "12,450" },
+  { label: "Avg Session", value: "4m 32s" },
+];
+
+const topPages = [
+  { page: "Dashboard", views: 8420, unique: 3210, bounce: "24%" },
+  { page: "Analytics", views: 5340, unique: 2180, bounce: "31%" },
+  { page: "Settings", views: 3120, unique: 1540, bounce: "18%" },
+  { page: "API Docs", views: 2890, unique: 1320, bounce: "42%" },
+  { page: "Billing", views: 2140, unique: 980, bounce: "15%" },
+];
+
+export default function AnalyticsPage() {
+  return (
+    <div className="flex min-h-screen bg-slate-50">
+      <Sidebar activePath="/analytics" />
+      <div className="flex-1 lg:ml-64">
+        <DashboardHeader />
+        <main className="p-6 space-y-6">
+          {/* User Growth Chart */}
+          <Card>
+            <CardHeader>
+              <CardTitle>User Growth</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="h-72">
+                <ResponsiveContainer width="100%" height="100%">
+                  <AreaChart data={growthData}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                    <XAxis dataKey="month" stroke="#94a3b8" fontSize={12} />
+                    <YAxis stroke="#94a3b8" fontSize={12} />
+                    <Tooltip />
+                    <Area type="monotone" dataKey="users" stroke="#6366f1" fill="#6366f1" fillOpacity={0.15} />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Conversion Funnel */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Conversion Funnel</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {funnel.map((step) => (
+                <div key={step.label} className="space-y-1">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="font-medium">{step.label}</span>
+                    <span className="text-slate-500">{step.value.toLocaleString()} ({step.pct}%)</span>
+                  </div>
+                  <div className="h-3 bg-slate-100 rounded-full overflow-hidden">
+                    <div className="h-full bg-indigo-500 rounded-full transition-all" style={{ width: `\${step.pct}%` }} />
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* Engagement Grid */}
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            {engagement.map((e) => (
+              <Card key={e.label}>
+                <CardContent className="p-6 text-center">
+                  <p className="text-sm text-slate-500">{e.label}</p>
+                  <p className="text-2xl font-bold mt-1">{e.value}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Top Pages Table */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Top Pages</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-slate-200">
+                      <th className="text-left py-3 px-4 font-medium text-slate-500">Page</th>
+                      <th className="text-left py-3 px-4 font-medium text-slate-500">Views</th>
+                      <th className="text-left py-3 px-4 font-medium text-slate-500">Unique Visitors</th>
+                      <th className="text-left py-3 px-4 font-medium text-slate-500">Bounce Rate</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {topPages.map((p) => (
+                      <tr key={p.page} className="border-b border-slate-100 last:border-0">
+                        <td className="py-3 px-4 font-medium">{p.page}</td>
+                        <td className="py-3 px-4 text-slate-600">{p.views.toLocaleString()}</td>
+                        <td className="py-3 px-4 text-slate-600">{p.unique.toLocaleString()}</td>
+                        <td className="py-3 px-4 text-slate-600">{p.bounce}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        </main>
+      </div>
+    </div>
+  );
+}