fixed type errors

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -7,13 +7,13 @@ import type { SystemValues, SystemValuesErrors } from "../../../types/types";
 import { useSystemConfig } from "../../../hooks/useSystemConfig";
 
 const SystemConfigFields = () => {
-  const { saveSystemSettings, getSystemSettingsData } = useSystemConfig();
-  console.log(getSystemSettingsData);
+  const { saveSystemSettings, systemSettingsData } = useSystemConfig();
+
   const initialvalues: SystemValues = {
-    deviceName: "",
-    timeZone: "",
-    sntpServer: "",
-    sntpInterval: 60,
+    deviceName: systemSettingsData?.deviceName ?? "",
+    timeZone: systemSettingsData?.timeZone ?? "",
+    sntpServer: systemSettingsData?.sntpServer ?? "",
+    sntpInterval: systemSettingsData?.sntpInterval ?? 60,
     softwareUpdate: null,
   };
 
@@ -34,6 +34,9 @@ const SystemConfigFields = () => {
       initialValues={initialvalues}
       onSubmit={handleSubmit}
       validate={validateValues}
+      enableReinitialize
+      validateOnChange
+      validateOnBlur
     >
       {({ values, errors, touched }) => (
         <Form className="flex flex-col space-y-5">
@@ -55,6 +58,7 @@ const SystemConfigFields = () => {
               type="text"
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
               placeholder="Enter device name"
+              autoComplete="off"
             />
           </FormGroup>
           <FormGroup>
@@ -75,6 +79,7 @@ const SystemConfigFields = () => {
               as="select"
               className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full max-w-xs"
             >
+              <option value="">Select a timezone…</option>
               {timezones.map((timezone) => (
                 <option value={timezone.value} key={timezone.label}>
                   {timezone.label}
@@ -100,6 +105,7 @@ const SystemConfigFields = () => {
               type="text"
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
               placeholder="Enter SNTP server address"
+              autoComplete="off"
             />
           </FormGroup>
           <FormGroup>
@@ -119,6 +125,7 @@ const SystemConfigFields = () => {
               name="sntpInterval"
               type="number"
               min={1}
+              inputMode="numeric"
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
             />
           </FormGroup>
@@ -133,12 +140,14 @@ const SystemConfigFields = () => {
             selectedFile={values.softwareUpdate}
           />
           <button
+            type="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
+            type="button"
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
             onClick={handleHardReboot}
           >