Index: frontend/src/components/graphs/TimeRangeToggle.jsx
===================================================================
--- frontend/src/components/graphs/TimeRangeToggle.jsx	(revision b3d5fed65cdab945e6c84835e2e04bc1814d9699)
+++ frontend/src/components/graphs/TimeRangeToggle.jsx	(revision b3d5fed65cdab945e6c84835e2e04bc1814d9699)
@@ -0,0 +1,30 @@
+import React from "react";
+
+export default function TimeRangeToggle({ value, onChange }) {
+  const TIME_RANGES = [
+    { key: "daily", label: "Daily" },
+    { key: "weekly", label: "Weekly" },
+    { key: "monthly", label: "Monthly" },
+    { key: "yearly", label: "Yearly" },
+  ];
+
+  return (
+    <div className="join">
+      {TIME_RANGES.map((r) => (
+        <button
+          key={r.key}
+          type="button"
+          className={
+            "btn btn-xs join-item " +
+            (value === r.key ? "btn-success" : "btn-ghost")
+          }
+          onClick={() => onChange?.(r.key)}
+        >
+          {r.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+