Updated Linkfield.tsx

Merge remote-tracking branch 'origin/main' into dundu
Added Linkfield.tsx
2025-11-13 17:30:15 +05:30 · 2025-11-13 16:58:28 +05:30 · 2025-11-13 16:33:24 +05:30 · 2025-11-12 12:45:49 +05:30 · 2025-11-03 20:27:18 +05:30 · 2025-11-03 19:36:09 +05:30
7 changed files with 324 additions and 411 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "@types/react-router-dom": "^5.3.3",
        "axios": "^1.12.2",
+        "lucide-react": "^0.553.0",
        "react": "^19.1.1",
        "react-dom": "^19.1.1",
        "react-icons": "^5.5.0",
@ -77,6 +78,7 @@
      "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.3",
@ -1482,6 +1484,7 @@
      "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "undici-types": "~7.16.0"
      }
@ -1491,6 +1494,7 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "csstype": "^3.0.2"
      }
@ -1572,6 +1576,7 @@
      "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.46.2",
        "@typescript-eslint/types": "8.46.2",
@ -1824,6 +1829,7 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@ -2051,6 +2057,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.8.9",
        "caniuse-lite": "^1.0.30001746",
@ -2307,18 +2314,6 @@
        "node": ">=0.4.0"
      }
    },
-    "node_modules/detect-libc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
-      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@ -2484,6 +2479,7 @@
      "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@ -3191,18 +3187,6 @@
        "@pkgjs/parseargs": "^0.11.0"
      }
    },
-    "node_modules/jiti": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
-      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "jiti": "lib/jiti-cli.mjs"
-      }
-    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -3294,280 +3278,6 @@
        "node": ">= 0.8.0"
      }
    },
-    "node_modules/lightningcss": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
-      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "detect-libc": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "lightningcss-android-arm64": "1.30.2",
-        "lightningcss-darwin-arm64": "1.30.2",
-        "lightningcss-darwin-x64": "1.30.2",
-        "lightningcss-freebsd-x64": "1.30.2",
-        "lightningcss-linux-arm-gnueabihf": "1.30.2",
-        "lightningcss-linux-arm64-gnu": "1.30.2",
-        "lightningcss-linux-arm64-musl": "1.30.2",
-        "lightningcss-linux-x64-gnu": "1.30.2",
-        "lightningcss-linux-x64-musl": "1.30.2",
-        "lightningcss-win32-arm64-msvc": "1.30.2",
-        "lightningcss-win32-x64-msvc": "1.30.2"
-      }
-    },
-    "node_modules/lightningcss-android-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
-      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
-      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
-      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
-      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
-      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
-      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
-      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
-      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
-      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
-      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
-      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
    "node_modules/lilconfig": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@ -3621,6 +3331,15 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "0.553.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.553.0.tgz",
+      "integrity": "sha512-BRgX5zrWmNy/lkVAe0dXBgd7XQdZ3HTf+Hwe3c9WK6dqgnj9h+hxV+MDncM88xDWlCq27+TKvHGE70ViODNILw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@ -3971,6 +3690,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@ -4166,6 +3886,7 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -4175,6 +3896,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@ -4716,6 +4438,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@ -4775,6 +4498,7 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@ -4868,6 +4592,7 @@
      "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.25.0",
        "fdir": "^6.5.0",
@ -4961,6 +4686,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
--- a/package.json
+++ b/package.json
@ -12,6 +12,7 @@
  "dependencies": {
    "@types/react-router-dom": "^5.3.3",
    "axios": "^1.12.2",
+    "lucide-react": "^0.553.0",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-icons": "^5.5.0",
--- a/src/components/LinkField.tsx
+++ b/src/components/LinkField.tsx
@ -0,0 +1,149 @@
+import React, { useState, useEffect, useRef } from 'react';
+import apiService from '../services/apiService'; // ✅ your ApiService
+
+interface LinkFieldProps {
+  label: string;
+  doctype: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+const LinkField: React.FC<LinkFieldProps> = ({
+  label,
+  doctype,
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+}) => {
+  const [searchResults, setSearchResults] = useState<{ value: string; description?: string }[]>([]);
+  const [searchText, setSearchText] = useState('');
+  const [isDropdownOpen, setDropdownOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Fetch link options from ERPNext
+  const searchLink = async (text: string = '') => {
+    try {
+      const params = new URLSearchParams({ doctype, txt: text });
+      const response = await apiService.apiCall<{ value: string; description?: string }[]>(
+        `/api/method/frappe.desk.search.search_link?${params.toString()}`
+      );
+      setSearchResults(response || []);
+    } catch (error) {
+      console.error(`Error fetching ${doctype} links:`, error);
+    }
+  };
+
+  // Fetch default options when dropdown opens
+  useEffect(() => {
+    if (isDropdownOpen) searchLink('');
+  }, [isDropdownOpen]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setDropdownOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={containerRef} className="relative w-full mb-4">
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{label}</label>
+
+      <input
+        type="text"
+        value={value}
+        placeholder={placeholder || `Select ${label}`}
+        disabled={disabled}
+        className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md 
+            focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 
+            bg-white dark:bg-gray-700 text-gray-900 dark:text-white`}
+        onFocus={() => !disabled && setDropdownOpen(true)}
+        onChange={(e) => {
+            const text = e.target.value;
+            setSearchText(text);
+            searchLink(text);
+            onChange(text);
+        }}
+        />
+
+        {isDropdownOpen && searchResults.length > 0 && !disabled && (
+        <ul className="absolute z-50 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 
+            rounded-md mt-1 max-h-48 overflow-auto w-full shadow-lg">
+            {searchResults.map((item, idx) => (
+            <li
+                key={idx}
+                onClick={() => {
+                onChange(item.value);
+                setDropdownOpen(false);
+                }}
+                className={`px-3 py-2 cursor-pointer 
+                text-gray-900 dark:text-gray-100 
+                hover:bg-blue-500 dark:hover:bg-blue-600 
+                ${value === item.value ? 'bg-blue-50 dark:bg-blue-700 font-semibold' : ''}`}
+            >
+                {item.value}
+                {item.description && (
+                <span className="text-gray-600 dark:text-gray-300 text-xs ml-2">{item.description}</span>
+                )}
+            </li>
+            ))}
+        </ul>
+        )}
+
+
+      {/* <input
+        type="text"
+        value={value}
+        placeholder={placeholder || `Select ${label}`}
+        disabled={disabled}
+        onFocus={() => !disabled && setDropdownOpen(true)}
+        onChange={(e) => {
+          const text = e.target.value;
+          setSearchText(text);
+          searchLink(text);
+          onChange(text);
+        }}
+        className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 
+          disabled:bg-gray-100 dark:disabled:bg-gray-700 
+          border-gray-300 dark:border-gray-600 
+          bg-white dark:bg-gray-700 text-gray-900 dark:text-white`}
+      />
+
+      {isDropdownOpen && searchResults.length > 0 && (
+        <ul
+          className="absolute z-50 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 
+                     rounded-md mt-1 max-h-48 overflow-auto w-full shadow-lg"
+        >
+          {searchResults.map((item, idx) => (
+            <li
+              key={idx}
+              onClick={() => {
+                onChange(item.value);
+                setDropdownOpen(false);
+              }}
+              className={`px-3 py-2 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer 
+                ${value === item.value ? 'bg-blue-50 dark:bg-gray-600 font-semibold' : ''}`}
+            >
+              <div>{item.value}</div>
+              {item.description && (
+                <div className="text-gray-500 dark:text-gray-400 text-xs">{item.description}</div>
+              )}
+            </li>
+          ))}
+        </ul>
+      )} */}
+
+
+
+    </div>
+  );
+};
+
+export default LinkField;
--- a/src/pages/AssetDetail.tsx
+++ b/src/pages/AssetDetail.tsx
@ -4,6 +4,9 @@ import { useAssetDetails, useAssetMutations } from '../hooks/useAsset';
 import { FaArrowLeft, FaSave, FaEdit, FaQrcode } from 'react-icons/fa';
 import type { CreateAssetData } from '../services/assetService';

+import LinkField from '../components/LinkField';
+
+
 const AssetDetail: React.FC = () => {
  const { assetName } = useParams<{ assetName: string }>();
  const navigate = useNavigate();
@ -233,71 +236,85 @@ const AssetDetail: React.FC = () => {
        </div>
      </div>

-      <form onSubmit={handleSubmit}>
-        {/* 4-Column Grid Layout */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          
-          {/* COLUMN 1: Asset Information */}
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
-            <h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
-              Asset Information
-            </h2>
-            <div className="space-y-4">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Asset Name <span className="text-red-500">*</span>
-                </label>
-                <input
-                  type="text"
-                  name="asset_name"
-                  value={formData.asset_name}
-                  onChange={handleChange}
-                  placeholder="e.g. Laptop Model X"
-                  required
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left Column - Asset Information & Technical Specs & Location */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Asset Information */}
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Asset Information</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Asset Name <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    name="asset_name"
+                    value={formData.asset_name}
+                    onChange={handleChange}
+                    placeholder="e.g. Laptop Model X"
+                    required
+                    disabled={!isEditing}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                  />
+                </div>
+                
+                {/* <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Category <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    name="custom_asset_type"
+                    value={formData.custom_asset_type}
+                    onChange={handleChange}
+                    required
+                    disabled={!isEditing}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                  >
+                    <option value="">Select category</option>
+                    <option value="Medical Equipment">Medical Equipment</option>
+                    <option value="Office Equipment">Office Equipment</option>
+                    <option value="IT Equipment">IT Equipment</option>
+                    <option value="Furniture">Furniture</option>
+                  </select>
+                </div> */}
+
+                <LinkField
+                  label="Category"
+                  doctype="Asset Type"
+                  value={formData.custom_asset_type || ''}
+                  onChange={(val) => setFormData({ ...formData, custom_asset_type: val })}
                  disabled={!isEditing}
-                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                />
-              </div>

-              <div>
-                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Category <span className="text-red-500">*</span>
-                </label>
-                <select
-                  name="custom_asset_type"
-                  value={formData.custom_asset_type}
-                  onChange={handleChange}
-                  required
-                  disabled={!isEditing}
-                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                >
-                  <option value="">Select category</option>
-                  <option value="Medical Equipment">Medical Equipment</option>
-                  <option value="Office Equipment">Office Equipment</option>
-                  <option value="IT Equipment">IT Equipment</option>
-                  <option value="Furniture">Furniture</option>
-                </select>
-              </div>

-              <div>
-                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Modality
-                </label>
-                <select
-                  name="custom_modality"
-                  value={formData.custom_modality}
-                  onChange={handleChange}
-                  disabled={!isEditing}
-                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                >
-                  <option value="">Select modality</option>
-                  <option value="X-Ray">X-Ray</option>
-                  <option value="CT">CT Scan</option>
-                  <option value="MRI">MRI</option>
-                  <option value="Ultrasound">Ultrasound</option>
-                  <option value="Other">Other</option>
-                </select>
-              </div>
+                {/* <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Modality <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    name="custom_modality"
+                    value={formData.custom_modality}
+                    onChange={handleChange}
+                    disabled={!isEditing}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                  >
+                    <option value="">Select modality</option>
+                    <option value="X-Ray">X-Ray</option>
+                    <option value="CT">CT Scan</option>
+                    <option value="MRI">MRI</option>
+                    <option value="Ultrasound">Ultrasound</option>
+                    <option value="Other">Other</option>
+                  </select>
+                </div> */}
+                <LinkField
+                  label="Modality"
+                  doctype="Modality"
+                  value={formData.custom_modality || ''}
+                  onChange={(val) => setFormData({ ...formData, custom_modality: val })}
+                />
+

              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
@ -381,20 +398,27 @@ const AssetDetail: React.FC = () => {
                />
              </div>

-              <div>
-                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Manufacturer
-                </label>
-                <input
-                  type="text"
-                  name="custom_manufacturer"
-                  value={formData.custom_manufacturer}
-                  onChange={handleChange}
-                  placeholder="Manufacturer name"
-                  disabled={!isEditing}
-                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                {/* <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Manufacturer
+                  </label>
+                  <input
+                    type="text"
+                    name="custom_manufacturer"
+                    value={formData.custom_manufacturer}
+                    onChange={handleChange}
+                    placeholder="Manufacturer name"
+                    disabled={!isEditing}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                  />
+                </div> */}
+
+                <LinkField
+                  label="Manufacturer"
+                  doctype="Manufacturer"
+                  value={formData.manufacturer || ''}
+                  onChange={(val) => setFormData({ ...formData, manufacturer: val })}
                />
-              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
@ -425,46 +449,58 @@ const AssetDetail: React.FC = () => {
            </div>
          </div>

-          {/* COLUMN 3: Location */}
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
-            <h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
-              Location
-            </h2>
-            <div className="space-y-4">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Site
-                </label>
-                <select
-                  name="company"
-                  value={formData.company}
-                  onChange={handleChange}
-                  disabled={!isEditing}
-                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                >
-                  <option value="">Select site</option>
-                  <option value="ABC Hospital">ABC Hospital</option>
-                  <option value="XYZ Clinic">XYZ Clinic</option>
-                </select>
-              </div>
+            {/* Location */}
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Location</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {/* <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Company
+                  </label>
+                  <select
+                    name="company"
+                    value={formData.company}
+                    onChange={handleChange}
+                    disabled={!isEditing}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                  >
+                    <option value="">Select company</option>
+                    <option value="ABC Hospital">ABC Hospital</option>
+                    <option value="XYZ Clinic">XYZ Clinic</option>
+                  </select>
+                </div> */}

-              <div>
-                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Department
-                </label>
-                <select
-                  name="department"
-                  value={formData.department}
-                  onChange={handleChange}
-                  disabled={!isEditing}
-                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                >
-                  <option value="">Select department</option>
-                  <option value="Radiology">Radiology</option>
-                  <option value="Cardiology">Cardiology</option>
-                  <option value="IT">IT</option>
-                </select>
-              </div>
+                <LinkField
+                  label="Hospital"
+                  doctype="Company"
+                  value={formData.company || ''}
+                  onChange={(val) => setFormData({ ...formData, company: val })}
+                />
+
+                {/* <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Department
+                  </label>
+                  <select
+                    name="department"
+                    value={formData.department}
+                    onChange={handleChange}
+                    disabled={!isEditing}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                  >
+                    <option value="">Select department</option>
+                    <option value="Radiology">Radiology</option>
+                    <option value="Cardiology">Cardiology</option>
+                    <option value="IT">IT</option>
+                  </select>
+                </div> */}
+
+                <LinkField
+                  label="Department"
+                  doctype="Department"
+                  value={formData.department || ''}
+                  onChange={(val) => setFormData({ ...formData, department: val })}
+                />

              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
@ -826,6 +862,7 @@ const AssetDetail: React.FC = () => {
            </div>
          </div>
        </div>
+        </div>
      </form>
    </div>
  );
--- a/src/pages/AssetMaintenanceLog.tsx
+++ b/src/pages/AssetMaintenanceLog.tsx
--- a/src/pages/PPM.tsx
+++ b/src/pages/PPM.tsx
--- a/src/pages/WorkOrder.tsx
+++ b/src/pages/WorkOrder.tsx
Author	SHA1	Message	Date
Duradundi Hadimani	ee33235a99	Updated Linkfield.tsx	2025-11-13 17:30:15 +05:30
Duradundi Hadimani	e5ba9ebd0f	Merge remote-tracking branch 'origin/main' into dundu	2025-11-13 16:58:28 +05:30
Duradundi Hadimani	225d63e384	Added Linkfield.tsx	2025-11-13 16:33:24 +05:30
Duradundi Hadimani	b60096686b	Added new PPM Page	2025-11-12 12:45:49 +05:30
Duradundi Hadimani	7747e144d8	Added new Asset Maintenance Log Page	2025-11-03 20:27:18 +05:30
Duradundi Hadimani	30f893a3c7	Added new Work Order Page	2025-11-03 19:36:09 +05:30