Implement inline editing and image upload/delete/edit

web/app/ui/input/hour-input.tsx

@@ -0,0 +1,71 @@
+import { CloseButton, NumberInput } from "@mantine/core";
+import { Dispatch, SetStateAction } from "react";
+
+function HourInput({
+  label,
+  value,
+  setValue,
+}: {
+  label: string;
+  value: number | string | null;
+  setValue: Dispatch<SetStateAction<string | number | null>>;
+}) {
+  return (
+    <NumberInput
+      label={label}
+      decimalScale={1}
+      step={0.1}
+      min={0}
+      fixedDecimalScale
+      leftSection={
+        <CloseButton
+          aria-label="Clear input"
+          onClick={() => setValue("")}
+          style={{
+            display: Number.isFinite(value) ? undefined : undefined,
+          }}
+        />
+      }
+      onChange={(value) =>
+        setValue(Number.isFinite(value) ? (value as number) : 0)
+      }
+    />
+  );
+}
+
+function ZeroHourInput({
+  label,
+  value,
+  setValue,
+  error = null,
+}: {
+  label: string;
+  value: number | null;
+  setValue: Dispatch<SetStateAction<number | null>>;
+  error?: string | null;
+}) {
+  return (
+    <NumberInput
+      label={label}
+      decimalScale={1}
+      step={0.1}
+      min={0}
+      fixedDecimalScale
+      error={error}
+      leftSection={
+        <CloseButton
+          aria-label="Clear input"
+          onClick={() => setValue(0)}
+          style={{
+            display: !value || value === 0 ? "none" : undefined,
+          }}
+        />
+      }
+      onChange={(value) =>
+        setValue(Number.isFinite(value) ? (value as number) : 0)
+      }
+    />
+  );
+}
+
+export { HourInput, ZeroHourInput };