refactored system settings

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -0,0 +1,151 @@
+import { Formik, Field, Form } from "formik";
+import FormGroup from "../components/FormGroup";
+import { handleSoftReboot, handleHardReboot } from "./Reboots";
+import { handleSystemSave } from "./SettingSaveRecall";
+import { timezones } from "./timezones";
+import SystemFileUpload from "./SystemFileUpload";
+import type { SystemValues, SystemValuesErrors } from "../../../types/types";
+
+const SystemConfigFields = () => {
+  const initialvalues: SystemValues = {
+    deviceName: "",
+    timeZone: "",
+    sntpServer: "",
+    sntpInterval: 60,
+    softwareUpdate: null,
+  };
+
+  const handleSubmit = (values: SystemValues) => handleSystemSave(values);
+  const validateValues = (values: SystemValues) => {
+    const errors: SystemValuesErrors = {};
+    const interval = Number(values.sntpInterval);
+    if (!values.deviceName) errors.deviceName = "Required";
+    if (!values.timeZone) errors.timeZone = "Required";
+    if (isNaN(interval) || interval <= 0)
+      errors.sntpInterval = "Cannot be less than 0";
+    if (!values.sntpServer) errors.sntpServer = "Required";
+    return errors;
+  };
+
+  return (
+    <Formik
+      initialValues={initialvalues}
+      onSubmit={handleSubmit}
+      validate={validateValues}
+    >
+      {({ values, errors, touched }) => (
+        <Form className="flex flex-col space-y-5">
+          <FormGroup>
+            <label
+              htmlFor="deviceName"
+              className="font-medium whitespace-nowrap md:w-1/2 text-left"
+            >
+              Device Name
+            </label>
+            {touched.deviceName && errors.deviceName && (
+              <small className="absolute right-0 -top-5 text-red-500">
+                {errors.deviceName}
+              </small>
+            )}
+            <Field
+              id="deviceName"
+              name="deviceName"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter device name"
+            />
+          </FormGroup>
+          <FormGroup>
+            <label
+              htmlFor="timeZone"
+              className="font-medium whitespace-nowrap md:w-1/2 text-left"
+            >
+              Local Time Zone
+            </label>
+            {touched.timeZone && errors.timeZone && (
+              <small className="absolute right-0 -top-5 text-red-500">
+                {errors.timeZone}
+              </small>
+            )}
+            <Field
+              id="timeZone"
+              name="timeZone"
+              as="select"
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full max-w-xs"
+            >
+              {timezones.map((timezone) => (
+                <option value={timezone.value} key={timezone.label}>
+                  {timezone.label}
+                </option>
+              ))}
+            </Field>
+          </FormGroup>
+          <FormGroup>
+            <label
+              htmlFor="sntpServer"
+              className="font-medium whitespace-nowrap md:w-1/2 text-left"
+            >
+              SNTP Server
+            </label>
+            {touched.sntpServer && errors.sntpServer && (
+              <small className="absolute right-0 -top-5 text-red-500">
+                {errors.sntpServer}
+              </small>
+            )}
+            <Field
+              id="sntpServer"
+              name="sntpServer"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter SNTP server address"
+            />
+          </FormGroup>
+          <FormGroup>
+            <label
+              htmlFor="sntpInterval"
+              className="font-medium whitespace-nowrap md:w-1/2 text-left"
+            >
+              SNTP Interval minutes
+            </label>
+            {touched.sntpInterval && errors.sntpInterval && (
+              <small className="absolute right-0 -top-5 text-red-500">
+                {errors.sntpInterval}
+              </small>
+            )}
+            <Field
+              id="sntpInterval"
+              name="sntpInterval"
+              type="number"
+              min={1}
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+            />
+          </FormGroup>
+          <button
+            type="submit"
+            className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
+          >
+            Save System Settings
+          </button>
+          <SystemFileUpload
+            name={"softwareUpdate"}
+            selectedFile={values.softwareUpdate}
+          />
+          <button
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
+            onClick={handleSoftReboot}
+          >
+            Software Reboot
+          </button>
+          <button
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
+            onClick={handleHardReboot}
+          >
+            Hardware Reboot
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SystemConfigFields;