Integrated OSK

EFB/efb-html.patch

@@ -2,14 +2,13 @@ Index: EFB.html
 ===================================================================
 --- EFB.html
 +++ EFB.html
-@@ -4,7 +4,9 @@
+@@ -4,7 +4,8 @@
      </div>
  </script>
  
  
 -<script type="text/html" import-async="false" import-script="/Pages/VCockpit/Instruments/aircraft_efb/TFDi_MD11_efb/efb.index.js"></script>
 +<script type="text/html" import-async="false" import-script="/Pages/VCockpit/Instruments/aircraft_efb/KH_TFDi_MD11_efb/efb.index.js"></script>
-+<script type="text/html" import-async="false" import-script="/Pages/VCockpit/Instruments/aircraft_efb/KH_TFDi_MD11_efb/App.js" ></script>
  
 -<link rel="stylesheet" href="/Pages/VCockpit/Instruments/aircraft_efb/TFDi_MD11_efb/efb.css" />
 +<link rel="stylesheet" href="/Pages/VCockpit/Instruments/aircraft_efb/KH_TFDi_MD11_efb/efb.css" />

EFB/efb-js.patch

@@ -59,7 +59,8 @@ Index: EFB.js
                (_a = ref.current) == null ? void 0 : _a.select();
              }
            },
-           onBlur: (e) => {
+-          onBlur: (e) => {
++          onBlur: () => {
              var _a;
 -            if ((_a = keyboardRef.current) == null ? void 0 : _a.contains(e.relatedTarget)) {
 -              return;
@@ -101,28 +102,31 @@ Index: EFB.js
        ) }) })
      ] }) }) });
    }
-@@ -40562,8 +40555,13 @@
+@@ -40562,8 +40555,27 @@
        ] })
      ] }) }) });
    }
  
 +  // Exports for add. script
 +  window.reactExports = __toESM(require_react());
++  window.reactDomExports = __toESM(require_react_dom());
 +  window.jsxRuntimeExports = __toESM(require_jsx_runtime());
-+  window.useSelector = useSelector
++  window.useSelector = useSelector;
++  window.v4 = v4_default;
++  window.ArrowBigUp = ArrowBigUp;
++  window.Delete = Delete;
++  window.Space = Space;
++  window.X = X;
++  // Include 
++  var script = document.createElement('script');
++  script.onload = function () {
++    console.log("LM App injected");
++    routes["/payload"].page = window.KH_LM
++  };
++  script.src = "/Pages/VCockpit/Instruments/aircraft_efb/KH_TFDi_MD11_efb/App.js";
++  document.head.appendChild(script); //or something of the likes
 +
    // src/components/Router.tsx
    init_common();
    var import_jsx_runtime15 = __toESM(require_jsx_runtime());
    var routes = {
-@@ -40578,9 +40576,9 @@
-       button: {
-         title: "Payload",
-         icon: Weight
-       },
--      page: PayloadPage
-+      page: window.KH_LM
-     },
-     "/perf": {
-       button: {
-         title: "Perf",

PackageSources/js-bundle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tfdidesign-md11-load-manager",
-  "version": "0.1.164",
+  "version": "0.1.182",
   "description": "",
   "main": "index.js",
   "type": "module",

PackageSources/js-bundle/src/components/SBEntry/SBEntryF.tsx

@@ -5,6 +5,7 @@ import { ImportFlightPlanKH } from '../../utils/TFDISBImport';
 import { CoherentCallSBEntryF, inRangeOf, loadAircraft, unloadAircraft } from '../../utils/utils';
 import CGSelect from '../CGSelect/CGSelect';
 import ActionBar from '../actionbar/ActionBar';
+import Input from '../input/Input';
 
 interface SBEntryProps {
   WASMData: WASMDataF;
@@ -97,12 +98,12 @@ const SBEntryF: FC<SBEntryProps> = ({ WASMData, loadingState, gsxActive, setLoad
         <div className="relative flex w-full items-center justify-between rounded-md bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Fuel ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className={`w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right`}
               value={fuel}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.maxFuel, setFuel)}
+              onChange={(value) => handleInput(value, WASMData.limits.maxFuel, setFuel)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
             <button

PackageSources/js-bundle/src/components/SBEntry/SBEntryPax.tsx

@@ -5,6 +5,7 @@ import { ImportFlightPlanKH } from '../../utils/TFDISBImport';
 import { CoherentCallSBEntryPax, inRangeOf, loadAircraft, unloadAircraft } from '../../utils/utils';
 import CGSelect from '../CGSelect/CGSelect';
 import ActionBar from '../actionbar/ActionBar';
+import Input from '../input/Input';
 
 interface SBEntryProps {
   WASMData: WASMDataPax;
@@ -97,12 +98,12 @@ const SBEntryPax: FC<SBEntryProps> = ({ WASMData, loadingState, gsxActive, setLo
         <div className="flex w-full items-center justify-between rounded-md bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Fuel ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className={`w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right`}
               value={fuel}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.maxFuel, setFuel)}
+              onChange={(value) => handleInput(value, WASMData.limits.maxFuel, setFuel)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
             <button

PackageSources/js-bundle/src/components/input/Input.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from 'react';
+import { v4 } from 'uuid';
+import Keyboard from '../keyboard/Keyboard';
+
+export default function Input(props: {
+  type?: string;
+  value: any;
+  min?: number;
+  max?: number;
+  step?: number;
+  placeholder?: any;
+  className?: string;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+  onBlur?: (value: string) => void;
+}) {
+  const [guid] = useState(v4());
+  const ref = useRef<HTMLInputElement>(null);
+  const keyboardRef = useRef<HTMLDivElement>(null);
+  const blurRef = useRef<boolean>(false);
+  const [isFocused, setFocused] = useState(false);
+  const [showKeyboard, setShowKeyboard] = useState(false);
+
+  useEffect(() => {
+    if (isFocused) {
+      Coherent.trigger('FOCUS_INPUT_FIELD', guid, '', '', '', false);
+    } else {
+      console.log('UNFOCUS_INPUT_FIELD');
+      Coherent.trigger('UNFOCUS_INPUT_FIELD', guid);
+    }
+  }, [isFocused, guid]);
+
+  return (
+    <>
+      <input
+        ref={ref}
+        type={props.type ? props.type : 'text'}
+        min={props.min}
+        max={props.max}
+        step={props.step}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        onFocus={() => {
+          if (!isFocused) {
+            setFocused(true);
+            setShowKeyboard(true);
+            ref.current?.select();
+          }
+        }}
+        onBlur={(e) => {
+          if (blurRef.current && isFocused) ref.current?.focus();
+          else {
+            props.onBlur?.(e.target.value);
+            setShowKeyboard(false);
+            setFocused(false);
+            ref.current?.blur();
+          }
+          blurRef.current = false;
+        }}
+        onChange={(e) => {
+          if (props.onChange) props.onChange(e.target.value);
+        }}
+        value={props.value}
+        className={props.className}
+      />
+      {showKeyboard && (
+        <Keyboard
+          ref={keyboardRef}
+          value={String(props.value)}
+          blurRef={blurRef}
+          onInput={(value) => props.onChange && props.onChange(value)}
+          onClose={() => {
+            setShowKeyboard(false);
+            setFocused(false);
+            ref.current?.blur();
+          }}
+        />
+      )}
+    </>
+  );
+}

PackageSources/js-bundle/src/components/keyboard/Keyboard.tsx

@@ -64,7 +64,6 @@ const Keyboard = forwardRef<
     <div
       ref={ref}
       className="absolute bottom-0 left-0 z-50 box-border w-full touch-manipulation select-none overflow-hidden bg-zinc-800 p-2 text-white"
-      onClick={() => console.log('Parent click captured')}
     >
       {layout.map((row, rowIndex) => (
         <div key={`row-${rowIndex}`} className="mb-1 flex w-full justify-center gap-1">

PackageSources/js-bundle/src/components/stationEntry/StationEntryF.tsx

@@ -3,6 +3,7 @@ import { LoadingState } from '../../types/general';
 import { WASMDataF } from '../../types/WASMData';
 import { CoherentCallStationEntryF, inRangeOf, loadAircraft, unloadAircraft } from '../../utils/utils';
 import ActionBar from '../actionbar/ActionBar';
+import Input from '../input/Input';
 
 interface StationEntryProps {
   WASMData: WASMDataF;
@@ -73,12 +74,12 @@ const StationEntryF: FC<StationEntryProps> = ({ WASMData, loadingState, gsxActiv
         <div className="relative flex w-full items-center justify-between rounded-md bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Fuel ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className={`w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right`}
               value={fuel}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.maxFuel, setFuel)}
+              onChange={(value) => handleInput(value, WASMData.limits.maxFuel, setFuel)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
             <button
@@ -105,12 +106,12 @@ const StationEntryF: FC<StationEntryProps> = ({ WASMData, loadingState, gsxActiv
         <div className="relative flex w-full items-center justify-between rounded-t-md bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Upper 1</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={upper1}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.upper1, setUpper1)}
+              onChange={(value) => handleInput(value, WASMData.limits.upper1, setUpper1)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>
@@ -118,12 +119,12 @@ const StationEntryF: FC<StationEntryProps> = ({ WASMData, loadingState, gsxActiv
         <div className="relative flex w-full items-center justify-between bg-zinc-700 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Upper 2</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={upper2}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.upper2, setUpper2)}
+              onChange={(value) => handleInput(value, WASMData.limits.upper2, setUpper2)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>
@@ -131,12 +132,12 @@ const StationEntryF: FC<StationEntryProps> = ({ WASMData, loadingState, gsxActiv
         <div className="relative flex w-full items-center justify-between bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Upper 3</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={upper3}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.upper3, setUpper3)}
+              onChange={(value) => handleInput(value, WASMData.limits.upper3, setUpper3)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>
@@ -144,12 +145,12 @@ const StationEntryF: FC<StationEntryProps> = ({ WASMData, loadingState, gsxActiv
         <div className="relative flex w-full items-center justify-between bg-zinc-700 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Upper 4</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={upper4}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.upper4, setUpper4)}
+              onChange={(value) => handleInput(value, WASMData.limits.upper4, setUpper4)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>
@@ -157,12 +158,12 @@ const StationEntryF: FC<StationEntryProps> = ({ WASMData, loadingState, gsxActiv
         <div className="relative flex w-full items-center justify-between bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Forward Cargo ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={lowerForward}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.lowerForward, setLowerForward)}
+              onChange={(value) => handleInput(value, WASMData.limits.lowerForward, setLowerForward)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>
@@ -170,12 +171,12 @@ const StationEntryF: FC<StationEntryProps> = ({ WASMData, loadingState, gsxActiv
         <div className="relative flex w-full items-center justify-between rounded-b-md bg-zinc-700 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Aft Cargo ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={lowerRear}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.lowerRear, setLowerRear)}
+              onChange={(value) => handleInput(value, WASMData.limits.lowerRear, setLowerRear)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>

PackageSources/js-bundle/src/components/stationEntry/StationEntryPax.tsx

@@ -3,6 +3,7 @@ import { LoadingState } from '../../types/general';
 import { WASMDataPax } from '../../types/WASMData';
 import { CoherentCallStationEntryPax, inRangeOf, loadAircraft, unloadAircraft } from '../../utils/utils';
 import ActionBar from '../actionbar/ActionBar';
+import Input from '../input/Input';
 
 interface StationEntryProps {
   WASMData: WASMDataPax;
@@ -73,12 +74,12 @@ const StationEntryPax: FC<StationEntryProps> = ({ WASMData, loadingState, gsxAct
         <div className="relative flex w-full items-center justify-between rounded-md bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Fuel ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className={`w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right`}
               value={fuel}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.maxFuel, setFuel)}
+              onChange={(value) => handleInput(value, WASMData.limits.maxFuel, setFuel)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
             <button
@@ -105,12 +106,12 @@ const StationEntryPax: FC<StationEntryProps> = ({ WASMData, loadingState, gsxAct
         <div className="relative flex w-full items-center justify-between rounded-t-md bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Business</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={business1}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.business1, setBusiness1)}
+              onChange={(value) => handleInput(value, WASMData.limits.business1, setBusiness1)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>
@@ -118,12 +119,12 @@ const StationEntryPax: FC<StationEntryProps> = ({ WASMData, loadingState, gsxAct
         <div className="relative flex w-full items-center justify-between bg-zinc-700 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Premium Economy</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={business2}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.business2, setBusiness2)}
+              onChange={(value) => handleInput(value, WASMData.limits.business2, setBusiness2)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>
@@ -131,12 +132,12 @@ const StationEntryPax: FC<StationEntryProps> = ({ WASMData, loadingState, gsxAct
         <div className="relative flex w-full items-center justify-between bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Forward Economy</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={economy1}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.economy1, setEconomy1)}
+              onChange={(value) => handleInput(value, WASMData.limits.economy1, setEconomy1)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>
@@ -144,12 +145,12 @@ const StationEntryPax: FC<StationEntryProps> = ({ WASMData, loadingState, gsxAct
         <div className="relative flex w-full items-center justify-between bg-zinc-700 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Aft Economy</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={economy2}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.economy2, setEconomy2)}
+              onChange={(value) => handleInput(value, WASMData.limits.economy2, setEconomy2)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>
@@ -157,12 +158,12 @@ const StationEntryPax: FC<StationEntryProps> = ({ WASMData, loadingState, gsxAct
         <div className="relative flex w-full items-center justify-between bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Forward Cargo ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={forwardCargo}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.forwardCargo, setForwardCargo)}
+              onChange={(value) => handleInput(value, WASMData.limits.forwardCargo, setForwardCargo)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>
@@ -170,12 +171,12 @@ const StationEntryPax: FC<StationEntryProps> = ({ WASMData, loadingState, gsxAct
         <div className="relative flex w-full items-center justify-between rounded-b-md bg-zinc-700 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Aft Cargo ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={rearCargo}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.rearCargo, setRearCargo)}
+              onChange={(value) => handleInput(value, WASMData.limits.rearCargo, setRearCargo)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>

PackageSources/js-bundle/src/components/zfwEntry/ZFWEntryF.tsx

@@ -4,6 +4,7 @@ import { LoadingState } from '../../types/general';
 import { CoherentCallZFWEntry, inRangeOf, loadAircraft, unloadAircraft } from '../../utils/utils';
 import CGSelect from '../CGSelect/CGSelect';
 import ActionBar from '../actionbar/ActionBar';
+import Input from '../input/Input';
 
 interface ZFWEntryProps {
   WASMData: WASMDataF;
@@ -47,7 +48,10 @@ const ZFWEntryF: FC<ZFWEntryProps> = ({ WASMData, loadingState, gsxActive, setLo
     }
   };
   const handleInputZFW = (input: string) => {
-    if (!input) return;
+    if (!input) {
+      setZFWTarget(0);
+      return;
+    }
 
     const converted = parseInt(input);
     if (converted) {
@@ -96,12 +100,12 @@ const ZFWEntryF: FC<ZFWEntryProps> = ({ WASMData, loadingState, gsxActive, setLo
         <div className="relative flex w-full items-center justify-between rounded-md bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Fuel ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className={`w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right`}
               value={fuel}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.maxFuel, setFuel)}
+              onChange={(value) => handleInput(value, WASMData.limits.maxFuel, setFuel)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
             <button
@@ -128,13 +132,13 @@ const ZFWEntryF: FC<ZFWEntryProps> = ({ WASMData, loadingState, gsxActive, setLo
         <div className="relative flex w-full items-center justify-between rounded-t-md bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Target ZFW ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={ZFWTarget}
-              onChange={(e) => handleInputZFW(e.target.value)}
+              onChange={(value) => handleInputZFW(value)}
-              onBlur={(e) => handleBlur(e.target.value)}
+              onBlur={(value) => handleBlur(value)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>

PackageSources/js-bundle/src/components/zfwEntry/ZFWEntryPax.tsx

@@ -4,6 +4,7 @@ import { LoadingState } from '../../types/general';
 import { CoherentCallZFWEntry, inRangeOf, loadAircraft, unloadAircraft } from '../../utils/utils';
 import CGSelect from '../CGSelect/CGSelect';
 import ActionBar from '../actionbar/ActionBar';
+import Input from '../input/Input';
 
 interface ZFWEntryProps {
   WASMData: WASMDataPax;
@@ -47,7 +48,10 @@ const ZFWEntryPax: FC<ZFWEntryProps> = ({ WASMData, loadingState, gsxActive, set
     }
   };
   const handleInputZFW = (input: string) => {
-    if (!input) return;
+    if (!input) {
+      setZFWTarget(0);
+      return;
+    }
 
     const converted = parseInt(input);
     if (converted) {
@@ -96,12 +100,12 @@ const ZFWEntryPax: FC<ZFWEntryProps> = ({ WASMData, loadingState, gsxActive, set
         <div className="relative flex w-full items-center justify-between rounded-md bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Fuel ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className={`w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right`}
               value={fuel}
-              onChange={(e) => handleInput(e.target.value, WASMData.limits.maxFuel, setFuel)}
+              onChange={(value) => handleInput(value, WASMData.limits.maxFuel, setFuel)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
             <button
@@ -128,13 +132,13 @@ const ZFWEntryPax: FC<ZFWEntryProps> = ({ WASMData, loadingState, gsxActive, set
         <div className="relative flex w-full items-center justify-between rounded-t-md bg-zinc-600 p-2 px-4">
           <div className="flex w-full items-center justify-between text-xs">
             <label>Target ZFW ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
-            <input
+            <Input
               type="text"
               placeholder=""
               className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
               value={ZFWTarget}
-              onChange={(e) => handleInputZFW(e.target.value)}
+              onChange={(value) => handleInputZFW(value)}
-              onBlur={(e) => handleBlur(e.target.value)}
+              onBlur={(value) => handleBlur(value)}
               disabled={loadingState !== 'preview' || gsxActive}
             />
           </div>