Add components for Act management and integrate Electron setup

components/form/NumberInput.tsx

@@ -0,0 +1,44 @@
+import React, {ChangeEvent, Dispatch} from "react";
+
+interface NumberInputProps {
+    value: number;
+    setValue: Dispatch<React.SetStateAction<number>>;
+    placeholder?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+
+export default function NumberInput(
+    {
+        value,
+        setValue,
+        placeholder,
+        readOnly = false,
+        disabled = false
+    }: NumberInputProps
+) {
+    function handleChange(e: ChangeEvent<HTMLInputElement>) {
+        const newValue: number = parseInt(e.target.value);
+        if (!isNaN(newValue)) {
+            setValue(newValue);
+        }
+    }
+
+    return (
+        <input
+            type="number"
+            value={value}
+            onChange={handleChange}
+            className={`w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50
+                focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary
+                hover:bg-secondary hover:border-secondary
+                placeholder:text-muted/60
+                outline-none transition-all duration-200
+                ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+                ${readOnly ? 'cursor-default' : ''}`}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            disabled={disabled}
+        />
+    )
+}