initial commit

apps/Frontend/src/components/claims/claims-ui.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+
+export function RemarksField({
+  value,
+  onChange,
+  debounceMs = 250, // tweak (150–300) if you like
+}: {
+  value: string;
+  onChange: (next: string) => void;
+  debounceMs?: number;
+}) {
+  const [local, setLocal] = React.useState(() => value);
+
+  // Track last prop we saw to detect true external changes
+  const lastPropRef = React.useRef(value);
+  React.useEffect(() => {
+    if (value !== lastPropRef.current && value !== local) {
+      // Only sync when parent changed from elsewhere
+      setLocal(value);
+    }
+    lastPropRef.current = value;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]); // (intentionally ignoring `local` in deps)
+
+  // Debounce: call parent onChange after user pauses typing
+  const timerRef = React.useRef<number | null>(null);
+  const schedulePush = React.useCallback(
+    (next: string) => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      timerRef.current = window.setTimeout(() => {
+        timerRef.current = null;
+        onChange(next);
+        // update lastPropRef so the next parent echo won't resync over local
+        lastPropRef.current = next;
+      }, debounceMs);
+    },
+    [onChange, debounceMs]
+  );
+
+  // Flush on unmount to avoid losing the last input
+  React.useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+        onChange(local);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="space-y-2">
+      <Input
+        id="remarks"
+        placeholder="Paste clinical notes here"
+        autoComplete="off"
+        spellCheck={false}
+        value={local}
+        onChange={(e) => {
+          const next = e.target.value;
+          setLocal(next); // instant local update (no lag)
+          schedulePush(next); // debounced parent update
+        }}
+        onBlur={() => {
+          // ensure latest text is pushed when the field loses focus
+          if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+          }
+          if (local !== lastPropRef.current) {
+            onChange(local);
+            lastPropRef.current = local;
+          }
+        }}
+      />
+    </div>
+  );
+}