feat(automatic): Introduce Flow Control Page with dynamic setpoint ma…

…nagement

* Added FlowmeterWidgets and InputConfirmed components
* Implemented setpoint state management with confirmation logging

issue #29

app/automatic/page.tsx

@@ -1,5 +1,43 @@
-export default function Page () {
-    return (
-        <div>Hello World!</div>
-    )
-}
+"use client";
+
+import { useState } from "react";
+import { FlowmeterWidgets } from "../sensors/ui/flowmeterWidgets";
+import { InputConfirmed } from "../actuators/ui/inputConfirmed";
+import { InputNumber } from "antd";
+
+export default function Page() {
+  let [setpoint, setSetpoint] = useState<number>(0);
+
+  const onSetpointChange = (newSetpoint: number) => {
+    setSetpoint(newSetpoint);
+  };
+
+  const onSetpointConfirm = () => {
+    console.log("Setpoint confirmed: ", setpoint);
+  };
+
+  return (
+    <div>
+      <div>
+        <h1>Flow Control Page</h1>
+        {/* Flowmeter Value */}
+        <h2>
+          <span className="material-symbols-outlined">gas_meter</span>{" "}
+          Flowmeters
+        </h2>
+        <FlowmeterWidgets />
+      </div>
+      <div>
+        <InputConfirmed
+          min={0.0}
+          max={25}
+          precision={2}
+          value={setpoint}
+          onValueChange={onSetpointChange}
+          onConfirm={onSetpointConfirm}
+        />
+        <InputNumber min={0} max={25} defaultValue={0}  precision={2} changeOnWheel/>
+      </div>
+    </div>
+  );
+}