feat: add admin operations suite

2026-07-12 20:11:28 +02:00
1 parent 21a61068fb
commit 60278b9e71
@@ -0,0 +1,84 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+
+interface PeakHoursData {
+  /** [dayOfWeek (0=Mon..6=Sun)][hour (0..23)] = count */
+  grid: number[][]
+  max: number
+}
+
+const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+const HOURS = Array.from({ length: 24 }, (_, i) => i)
+
+function getColor(value: number, max: number) {
+  if (max === 0 || value === 0) return 'bg-muted'
+  const ratio = value / max
+  if (ratio < 0.25) return 'bg-[var(--admin-success)]/20'
+  if (ratio < 0.5) return 'bg-[var(--admin-success)]/55'
+  if (ratio < 0.75) return 'bg-[var(--admin-success)] dark:bg-[var(--admin-success)]'
+  return 'bg-[var(--admin-success-strong,var(--admin-success))]'
+}
+
+export function PeakHoursHeatmap({ data }: { data: PeakHoursData }) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium">Peak Hours</CardTitle>
+        <p className="text-xs text-muted-foreground">
+          User activity by day &amp; hour (last 7 days)
+        </p>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <div className="min-w-[500px]">
+            {/* Hour labels */}
+            <div className="flex gap-px ml-10 mb-1">
+              {HOURS.map((h) => (
+                <div key={h} className="flex-1 text-center text-[10px] text-muted-foreground">
+                  {h % 3 === 0 ? `${h}` : ''}
+                </div>
+              ))}
+            </div>
+            {/* Rows */}
+            {DAYS.map((day, dayIdx) => (
+              <div key={day} className="flex items-center gap-px mb-px">
+                <span className="w-10 text-xs text-muted-foreground text-right pr-2 shrink-0">
+                  {day}
+                </span>
+                <TooltipProvider delayDuration={0}>
+                  {HOURS.map((hour) => {
+                    const count = data.grid[dayIdx]?.[hour] ?? 0
+                    return (
+                      <Tooltip key={hour}>
+                        <TooltipTrigger asChild>
+                          <div
+                            className={`flex-1 aspect-square rounded-sm ${getColor(count, data.max)} transition-colors min-w-[14px]`}
+                          />
+                        </TooltipTrigger>
+                        <TooltipContent side="top" className="text-xs">
+                          {day} {hour}:00 — {count} users
+                        </TooltipContent>
+                      </Tooltip>
+                    )
+                  })}
+                </TooltipProvider>
+              </div>
+            ))}
+            {/* Legend */}
+            <div className="flex items-center gap-2 mt-3 ml-10">
+              <span className="text-[10px] text-muted-foreground">Less</span>
+              <div className="h-3 w-3 rounded-sm bg-muted" />
+              <div className="h-3 w-3 rounded-sm bg-[var(--admin-success)]/20" />
+              <div className="h-3 w-3 rounded-sm bg-[var(--admin-success)]/55" />
+              <div className="h-3 w-3 rounded-sm bg-[var(--admin-success)] dark:bg-[var(--admin-success)]" />
+              <div className="h-3 w-3 rounded-sm bg-[var(--admin-success-strong,var(--admin-success))]" />
+              <span className="text-[10px] text-muted-foreground">More</span>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}