Initial commit

frontend/src/components/tracker/TimeAdjuster.tsx

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+
+interface TimeAdjusterProps {
+  onTimeChange: (time: string) => void;
+  defaultValue?: string;
+}
+
+function toLocalDatetimeInputValue(date: Date): string {
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function toUTCFromLocalInput(inputValue: string): string {
+  const [datePart, timePart] = inputValue.split('T');
+  const [year, month, day] = datePart.split('-').map(Number);
+  const [hours, minutes] = timePart.split(':').map(Number);
+  const localDate = new Date(year, month - 1, day, hours, minutes);
+  return localDate.toISOString();
+}
+
+const TimeAdjuster: React.FC<TimeAdjusterProps> = ({ onTimeChange, defaultValue }) => {
+  const [value, setValue] = useState(() => {
+    if (defaultValue) {
+      const d = new Date(defaultValue);
+      return toLocalDatetimeInputValue(d);
+    }
+    return toLocalDatetimeInputValue(new Date());
+  });
+
+  useEffect(() => {
+    onTimeChange(toUTCFromLocalInput(value));
+  }, [value, onTimeChange]);
+
+  const resetToNow = () => {
+    const now = toLocalDatetimeInputValue(new Date());
+    setValue(now);
+    onTimeChange(toUTCFromLocalInput(now));
+  };
+
+  return (
+    <div className="flex flex-col items-center space-y-2">
+      <input
+        type="datetime-local"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        className="p-3 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-lg"
+      />
+      <button
+        onClick={resetToNow}
+        className="text-sm text-blue-600 hover:underline"
+      >
+        Reset to now
+      </button>
+    </div>
+  );
+};
+
+export default TimeAdjuster;