fixed type errors

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -1,9 +1,12 @@
 import { Field, useFormikContext } from "formik";
 import FormGroup from "../components/FormGroup";
+import { useState } from "react";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const ChannelFields = () => {
   useFormikContext();
-
+  const [showPwd, setShowPwd] = useState(false);
   return (
     <div className="flex flex-col space-y-2">
       <FormGroup>
@@ -32,11 +35,17 @@ const ChannelFields = () => {
         <label htmlFor="password">Password</label>
         <Field
           name={"password"}
-          type="password"
+          type={showPwd ? "text" : "password"}
           id="password"
           placeholder="Back office password"
           className="p-1.5 border border-gray-400 rounded-lg"
         />
+        <FontAwesomeIcon
+          type="button"
+          className="absolute right-5 end-0"
+          onClick={() => setShowPwd((s) => !s)}
+          icon={showPwd ? faEyeSlash : faEye}
+        />
       </FormGroup>
       <FormGroup>
         <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -3,14 +3,18 @@ import FormGroup from "../components/FormGroup";
 import type { NPEDErrorValues, NPEDFieldType } from "../../../types/types";
 import { useNPEDAuth } from "../../../hooks/useNPEDAuth";
 import { toast } from "sonner";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
 
 const NPEDFields = () => {
+  const [showPwd, setShowPwd] = useState(false);
   const { signIn, user, signOut } = useNPEDAuth();
 
   const initialValues = user
     ? {
         username: user.propUsername.value,
-        password: "",
+        password: user.propPassword.value,
         clientId: user.propClientID.value,
         frontId: "NPED",
         rearId: "NPED",
@@ -49,6 +53,7 @@ const NPEDFields = () => {
       initialValues={initialValues}
       onSubmit={handleSubmit}
       validate={validateValues}
+      enableReinitialize
     >
       {({ errors, touched }) => (
         <Form className="flex flex-col space-y-5">
@@ -76,11 +81,17 @@ const NPEDFields = () => {
             )}
             <Field
               name="password"
-              type="password"
+              type={showPwd ? "text" : "password"}
               id="password"
               placeholder="NPED Password"
               className="p-1.5 border border-gray-400 rounded-lg"
             />
+            <FontAwesomeIcon
+              type="button"
+              className="absolute right-5 end-0"
+              onClick={() => setShowPwd((s) => !s)}
+              icon={showPwd ? faEyeSlash : faEye}
+            />
           </FormGroup>
           <FormGroup>
             <label htmlFor="clientId">Client ID</label>

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}
           >

src/components/SettingForms/System/timezones.ts

@@ -1,5 +1,4 @@
 export const timezones = [
-  { value: "Europe/London (UTC+00)", label: "Select Time Zone" },
   { value: "Europe/London (UTC+00)", label: "UTC (UTC+00)" },
   { value: "Africa/Cairo (UTC+02)", label: "Africa/Cairo (UTC+02)" },
   {