Added user Permissions logic and Updated filters

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

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",

src/components/LinkField.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect, useRef } from 'react';
+import apiService from '../services/apiService';
+
+interface LinkFieldProps {
+  label: string;
+  doctype: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  filters?: Record<string, any>;
+  compact?: boolean; // ✅ Add this prop
+}
+
+const LinkField: React.FC<LinkFieldProps> = ({
+  label,
+  doctype,
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  filters = {},
+  compact = false, // ✅ Default to 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 with filters
+  const searchLink = async (text: string = '') => {
+    try {
+      const params = new URLSearchParams({ 
+        doctype, 
+        txt: text,
+      });
+
+      // Add filters if provided
+      if (filters && Object.keys(filters).length > 0) {
+        params.append('filters', JSON.stringify(filters));
+      }
+
+      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);
+      setSearchResults([]);
+    }
+  };
+
+  // Fetch default options when dropdown opens or filters change
+  useEffect(() => {
+    if (isDropdownOpen) {
+      searchLink(searchText || '');
+    }
+  }, [isDropdownOpen, filters]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setDropdownOpen(false);
+        setSearchText('');
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Handle selecting an item from dropdown
+  const handleSelect = (selectedValue: string) => {
+    onChange(selectedValue);
+    setSearchText('');
+    setDropdownOpen(false);
+  };
+
+  // Handle clearing the field
+  const handleClear = () => {
+    onChange('');
+    setSearchText('');
+    setDropdownOpen(false);
+  };
+
+  return (
+    <div ref={containerRef} className={`relative w-full ${compact ? 'mb-2' : 'mb-4'}`}>
+      <label className={`block font-medium text-gray-700 dark:text-gray-300 ${compact ? 'text-[10px] mb-0.5' : 'text-sm mb-1'}`}>
+        {label}
+      </label>
+
+      <div className="relative">
+        <input
+          type="text"
+          value={isDropdownOpen ? searchText : value}
+          placeholder={placeholder || `Select ${label}`}
+          disabled={disabled}
+          className={`w-full border border-gray-300 dark:border-gray-600 rounded-md 
+            focus:outline-none disabled:bg-gray-100 dark:disabled:bg-gray-700 
+            bg-white dark:bg-gray-700 text-gray-900 dark:text-white
+            ${compact 
+              ? 'px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 rounded' 
+              : 'px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500'
+            }
+            ${value ? (compact ? 'pr-5' : 'pr-8') : ''}`}
+          onFocus={() => {
+            if (!disabled) {
+              setDropdownOpen(true);
+              setSearchText('');
+            }
+          }}
+          onChange={(e) => {
+            const text = e.target.value;
+            setSearchText(text);
+            searchLink(text);
+          }}
+        />
+        
+        {/* Clear button */}
+        {value && !disabled && !isDropdownOpen && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className={`absolute top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300
+              ${compact ? 'right-1 text-xs' : 'right-2 text-sm'}`}
+          >
+            ✕
+          </button>
+        )}
+      </div>
+
+      {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 overflow-auto w-full shadow-lg
+          ${compact ? 'mt-0.5 max-h-36' : 'mt-1 max-h-48'}`}>
+          {searchResults.map((item, idx) => (
+            <li
+              key={idx}
+              onClick={() => handleSelect(item.value)}
+              className={`cursor-pointer text-gray-900 dark:text-gray-100 
+                hover:bg-blue-500 dark:hover:bg-blue-600 hover:text-white
+                ${compact ? 'px-2 py-1 text-xs' : 'px-3 py-2 text-sm'}
+                ${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 ml-2
+                  ${compact ? 'text-[9px] ml-1' : 'text-xs ml-2'}`}>
+                  {item.description}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {/* Show message when no results found */}
+      {isDropdownOpen && searchResults.length === 0 && !disabled && (
+        <div className={`absolute z-50 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 
+          rounded-md w-full shadow-lg text-center text-gray-500 dark:text-gray-400
+          ${compact ? 'mt-0.5 p-1.5 text-[10px]' : 'mt-1 p-3 text-sm'}`}>
+          No results found
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LinkField;

src/config/api.ts

@@ -75,7 +75,16 @@ const API_CONFIG: ApiConfig = {
     CSRF_TOKEN: '/api/method/frappe.sessions.get_csrf_token',
     
     // File Upload
-    UPLOAD_FILE: '/api/method/upload_file'
+    UPLOAD_FILE: '/api/method/upload_file',
+
+    // User Permission Management - Generic (only these are needed!)
+    GET_USER_PERMISSIONS: '/api/method/asset_lite.api.userperm_api.get_user_permissions',
+    GET_PERMISSION_FILTERS: '/api/method/asset_lite.api.userperm_api.get_permission_filters',
+    GET_ALLOWED_VALUES: '/api/method/asset_lite.api.userperm_api.get_allowed_values',
+    CHECK_DOCUMENT_ACCESS: '/api/method/asset_lite.api.userperm_api.check_document_access',
+    GET_CONFIGURED_DOCTYPES: '/api/method/asset_lite.api.userperm_api.get_configured_doctypes',
+    GET_USER_DEFAULTS: '/api/method/asset_lite.api.userperm_api.get_user_defaults',
+
   },
   
   // Request Configuration

src/hooks/useAsset.ts

@@ -3,13 +3,57 @@ import assetService from '../services/assetService';
 import type { Asset, AssetFilters, AssetFilterOptions, AssetStats, CreateAssetData } from '../services/assetService';
 
 /**
- * Hook to fetch list of assets with filters and pagination
+ * Merge user filters with permission filters
+ * Permission filters take precedence for security
+ */
+const mergeFilters = (
+  userFilters: AssetFilters | undefined,
+  permissionFilters: Record<string, any>
+): AssetFilters => {
+  const merged: AssetFilters = { ...(userFilters || {}) };
+
+  // Apply permission filters (they take precedence for security)
+  for (const [field, value] of Object.entries(permissionFilters)) {
+    if (!merged[field as keyof AssetFilters]) {
+      // No user filter on this field, apply permission filter directly
+      (merged as any)[field] = value;
+    } else if (Array.isArray(value) && value[0] === 'in') {
+      // Permission filter is ["in", [...values]]
+      const permittedValues = value[1] as string[];
+      const userValue = merged[field as keyof AssetFilters];
+
+      if (typeof userValue === 'string') {
+        // User selected a specific value, check if it's permitted
+        if (!permittedValues.includes(userValue)) {
+          // User selected a value they don't have permission for
+          // Set to empty array to return no results
+          (merged as any)[field] = ['in', []];
+        }
+        // If permitted, keep the user's specific selection
+      } else if (Array.isArray(userValue) && userValue[0] === 'in') {
+        // Both are ["in", [...]] format, intersect them
+        const userValues = userValue[1] as string[];
+        const intersection = userValues.filter(v => permittedValues.includes(v));
+        (merged as any)[field] = ['in', intersection];
+      } else {
+        // Other filter types, apply permission filter
+        (merged as any)[field] = value;
+      }
+    }
+  }
+
+  return merged;
+};
+
+/**
+ * Hook to fetch list of assets with filters, pagination, and permission-based filtering
  */
 export function useAssets(
   filters?: AssetFilters,
   limit: number = 20,
   offset: number = 0,
-  orderBy?: string
+  orderBy?: string,
+  permissionFilters: Record<string, any> = {} // ← NEW: Permission filters parameter
 ) {
   const [assets, setAssets] = useState<Asset[]>([]);
   const [totalCount, setTotalCount] = useState(0);
@@ -21,6 +65,7 @@ export function useAssets(
 
   // Stringify filters to prevent object reference changes from causing re-renders
   const filtersJson = JSON.stringify(filters);
+  const permissionFiltersJson = JSON.stringify(permissionFilters); // ← NEW
 
   useEffect(() => {
     // Prevent fetching if already attempted and has error
@@ -35,7 +80,14 @@ export function useAssets(
       try {
         setLoading(true);
         
-        const response = await assetService.getAssets(filters, undefined, limit, offset, orderBy);
+        // ✅ NEW: Merge user filters with permission filters
+        const mergedFilters = mergeFilters(filters, permissionFilters);
+        
+        console.log('[useAssets] User filters:', filters);
+        console.log('[useAssets] Permission filters:', permissionFilters);
+        console.log('[useAssets] Merged filters:', mergedFilters);
+        
+        const response = await assetService.getAssets(mergedFilters, undefined, limit, offset, orderBy);
         
         if (!isCancelled) {
           setAssets(response.assets);
@@ -72,7 +124,7 @@ export function useAssets(
       isCancelled = true;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filtersJson, limit, offset, orderBy, refetchTrigger]);
+  }, [filtersJson, permissionFiltersJson, limit, offset, orderBy, refetchTrigger]); // ← Added permissionFiltersJson
 
   const refetch = useCallback(() => {
     hasAttemptedRef.current = false; // Reset to allow refetch
@@ -201,7 +253,27 @@ export function useAssetMutations() {
     }
   };
 
-  return { createAsset, updateAsset, deleteAsset, loading, error };
+  const submitAsset = async (assetName: string) => {
+    try {
+      setLoading(true);
+      setError(null);
+      
+      console.log('[useAssetMutations] Submitting asset:', assetName);
+      const response = await assetService.submitAsset(assetName);
+      console.log('[useAssetMutations] Submit asset response:', response);
+      
+      return response;
+    } catch (err) {
+      console.error('[useAssetMutations] Submit asset error:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Failed to submit asset';
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { createAsset, updateAsset, deleteAsset, submitAsset, loading, error };
 }
 
 /**
@@ -305,4 +377,3 @@ export function useAssetSearch() {
 
   return { results, loading, error, search, clearResults };
 }
-

src/hooks/useDocTypeMeta.ts

@@ -0,0 +1,77 @@
+import { useState, useEffect } from 'react';
+import apiService from '../services/apiService';
+
+export interface DocTypeField {
+  fieldname: string;
+  fieldtype: string;
+  label: string;
+  allow_on_submit: number; // 0 or 1
+  reqd: number; // 0 or 1 for required
+  read_only: number; // 0 or 1
+}
+
+export const useDocTypeMeta = (doctype: string) => {
+  const [fields, setFields] = useState<DocTypeField[]>([]);
+  const [allowOnSubmitFields, setAllowOnSubmitFields] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchDocTypeMeta = async () => {
+      if (!doctype) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const response = await apiService.apiCall<any>(
+          `/api/resource/DocType/${doctype}`
+        );
+        
+        // Handle different response structures from Frappe API
+        // Response can be: { data: {...} } or directly {...}
+        const docTypeData = response.data || response;
+        const fieldsList: DocTypeField[] = docTypeData.fields || [];
+        
+        // Extract fields that allow editing on submit
+        const allowOnSubmitSet = new Set<string>();
+        fieldsList.forEach((field: DocTypeField) => {
+          // Check both number (1) and boolean (true) formats
+          // if (field.allow_on_submit === 1 || field.allow_on_submit === true) {
+          if (field.allow_on_submit === 1){
+            allowOnSubmitSet.add(field.fieldname);
+          }
+        });
+        
+        // Debug logging (development only)
+        if (import.meta.env.DEV) {
+          console.log(`[DocTypeMeta] Loaded ${fieldsList.length} fields for ${doctype}`);
+          console.log(`[DocTypeMeta] Fields with allow_on_submit:`, Array.from(allowOnSubmitSet));
+        }
+        
+        setFields(fieldsList);
+        setAllowOnSubmitFields(allowOnSubmitSet);
+        setError(null);
+      } catch (err) {
+        console.error(`[DocTypeMeta] Error fetching DocType meta for ${doctype}:`, err);
+        setError(err instanceof Error ? err.message : 'Unknown error');
+        // Don't block the UI if metadata fetch fails - allow all fields to be editable
+        // This is a graceful degradation
+        setFields([]);
+        setAllowOnSubmitFields(new Set());
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDocTypeMeta();
+  }, [doctype]);
+
+  const isAllowedOnSubmit = (fieldname: string): boolean => {
+    return allowOnSubmitFields.has(fieldname);
+  };
+
+  return { fields, allowOnSubmitFields, isAllowedOnSubmit, loading, error };
+};
+

src/hooks/useUserPermissions.ts

@@ -0,0 +1,188 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import apiService from '../services/apiService';
+
+interface RestrictionInfo {
+  field: string;
+  values: string[];
+  count: number;
+}
+
+interface PermissionsState {
+  isAdmin: boolean;
+  restrictions: Record<string, RestrictionInfo>;
+  permissionFilters: Record<string, any>;
+  targetDoctype: string;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Generic hook for user permissions - works with ANY doctype
+ * 
+ * Usage:
+ *   const { permissionFilters, restrictions } = useUserPermissions('Asset');
+ *   const { permissionFilters, restrictions } = useUserPermissions('Work Order');
+ *   const { permissionFilters, restrictions } = useUserPermissions('Project');
+ */
+export const useUserPermissions = (targetDoctype: string = 'Asset') => {
+  const [state, setState] = useState<PermissionsState>({
+    isAdmin: false,
+    restrictions: {},
+    permissionFilters: {},
+    targetDoctype,
+    loading: true,
+    error: null
+  });
+
+  const fetchPermissions = useCallback(async (doctype?: string) => {
+    const dt = doctype || targetDoctype;
+    
+    try {
+      setState(prev => ({ ...prev, loading: true, error: null, targetDoctype: dt }));
+
+      const response = await apiService.getPermissionFilters(dt);
+
+      setState({
+        isAdmin: response.is_admin,
+        restrictions: response.restrictions || {},
+        permissionFilters: response.filters || {},
+        targetDoctype: dt,
+        loading: false,
+        error: null
+      });
+
+      return response;
+    } catch (err) {
+      console.error(`Error fetching permissions for ${dt}:`, err);
+      setState(prev => ({
+        ...prev,
+        loading: false,
+        error: err instanceof Error ? err.message : 'Failed to fetch permissions'
+      }));
+      return null;
+    }
+  }, [targetDoctype]);
+
+  useEffect(() => {
+    fetchPermissions();
+  }, [fetchPermissions]);
+
+  // Get allowed values for a permission type (e.g., "Company", "Location")
+  const getAllowedValues = useCallback((permissionType: string): string[] => {
+    return state.restrictions[permissionType]?.values || [];
+  }, [state.restrictions]);
+
+  // Check if user has restriction on a permission type
+  const hasRestriction = useCallback((permissionType: string): boolean => {
+    if (state.isAdmin) return false;
+    return !!state.restrictions[permissionType];
+  }, [state.isAdmin, state.restrictions]);
+
+  // Check if any restrictions exist
+  const hasAnyRestrictions = useMemo(() => {
+    return !state.isAdmin && Object.keys(state.restrictions).length > 0;
+  }, [state.isAdmin, state.restrictions]);
+
+  // Merge user filters with permission filters
+  const mergeFilters = useCallback((userFilters: Record<string, any>): Record<string, any> => {
+    if (state.isAdmin) return userFilters;
+    
+    const merged = { ...userFilters };
+    
+    for (const [field, value] of Object.entries(state.permissionFilters)) {
+      if (!merged[field]) {
+        merged[field] = value;
+      } else if (Array.isArray(value) && value[0] === 'in') {
+        const permittedValues = value[1] as string[];
+        if (typeof merged[field] === 'string' && !permittedValues.includes(merged[field])) {
+          merged[field] = ['in', []]; // Return empty - value not permitted
+        }
+      }
+    }
+    
+    return merged;
+  }, [state.isAdmin, state.permissionFilters]);
+
+  // Get summary of restrictions for display
+  const restrictionsList = useMemo(() => {
+    return Object.entries(state.restrictions).map(([type, info]) => ({
+      type,
+      field: info.field,
+      values: info.values,
+      count: info.count
+    }));
+  }, [state.restrictions]);
+
+  return {
+    ...state,
+    refetch: fetchPermissions,
+    switchDoctype: fetchPermissions,
+    getAllowedValues,
+    hasRestriction,
+    hasAnyRestrictions,
+    mergeFilters,
+    restrictionsList
+  };
+};
+
+/**
+ * Hook to check access to a specific document
+ */
+export const useDocumentAccess = (doctype: string | null, docname: string | null) => {
+  const [hasAccess, setHasAccess] = useState<boolean | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!doctype || !docname) {
+      setHasAccess(null);
+      return;
+    }
+
+    const check = async () => {
+      try {
+        setLoading(true);
+        const response = await apiService.checkDocumentAccess(doctype, docname);
+        setHasAccess(response.has_access);
+        if (!response.has_access && response.error) {
+          setError(response.error);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to check access');
+        setHasAccess(false);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    check();
+  }, [doctype, docname]);
+
+  return { hasAccess, loading, error };
+};
+
+/**
+ * Hook to get user's default values
+ */
+export const useUserDefaults = () => {
+  const [defaults, setDefaults] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetch = async () => {
+      try {
+        const response = await apiService.getUserDefaults();
+        setDefaults(response.defaults || {});
+      } catch (err) {
+        console.error('Failed to fetch user defaults:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetch();
+  }, []);
+
+  return { defaults, loading, getDefault: (type: string) => defaults[type] };
+};
+
+export default useUserPermissions;

src/services/apiService.ts

@@ -24,6 +24,7 @@ interface UserDetails {
   creation: string;
   modified: string;
   language: string;
+  custom_site_name:string;
 }
 
 interface DocTypeRecord {
@@ -120,6 +121,47 @@ interface RequestOptions {
   body?: any;
 }
 
+// USER PERMISSION INTERFACES
+interface RestrictionInfo {
+  field: string;
+  values: string[];
+  count: number;
+}
+
+interface PermissionFiltersResponse {
+  is_admin: boolean;
+  filters: Record<string, any>;
+  restrictions: Record<string, RestrictionInfo>;
+  target_doctype: string;
+  user?: string;
+  total_restrictions?: number;
+  warning?: string;
+}
+
+interface AllowedValuesResponse {
+  is_admin: boolean;
+  allowed_values: string[];
+  default_value?: string | null;
+  has_restriction: boolean;
+  allow_doctype: string;
+}
+
+interface DocumentAccessResponse {
+  has_access: boolean;
+  is_admin?: boolean;
+  no_restrictions?: boolean;
+  error?: string;
+  denied_by?: string;
+  field?: string;
+  document_value?: string;
+  allowed_values?: string[];
+}
+
+interface UserDefaultsResponse {
+  is_admin: boolean;
+  defaults: Record<string, string>;
+}
+
 class ApiService {
   private baseURL: string;
   private endpoints: Record<string, string>;
@@ -380,6 +422,39 @@ class ApiService {
     });
   }
 
+  // USER PERMISSION METHODS
+  async getUserPermissions(userId?: string): Promise<any> {
+    const params = userId ? `?user=${encodeURIComponent(userId)}` : '';
+    return this.apiCall(`${this.endpoints.GET_USER_PERMISSIONS}${params}`);
+  }
+
+  async getPermissionFilters(targetDoctype: string, userId?: string): Promise<PermissionFiltersResponse> {
+    const params = new URLSearchParams({ target_doctype: targetDoctype });
+    if (userId) params.append('user', userId);
+    return this.apiCall<PermissionFiltersResponse>(`${this.endpoints.GET_PERMISSION_FILTERS}?${params}`);
+  }
+
+  async getAllowedValues(allowDoctype: string, userId?: string): Promise<AllowedValuesResponse> {
+    const params = new URLSearchParams({ allow_doctype: allowDoctype });
+    if (userId) params.append('user', userId);
+    return this.apiCall<AllowedValuesResponse>(`${this.endpoints.GET_ALLOWED_VALUES}?${params}`);
+  }
+
+  async checkDocumentAccess(doctype: string, docname: string, userId?: string): Promise<DocumentAccessResponse> {
+    const params = new URLSearchParams({ doctype, docname });
+    if (userId) params.append('user', userId);
+    return this.apiCall<DocumentAccessResponse>(`${this.endpoints.CHECK_DOCUMENT_ACCESS}?${params}`);
+  }
+
+  async getConfiguredDoctypes(): Promise<any> {
+    return this.apiCall(this.endpoints.GET_CONFIGURED_DOCTYPES);
+  }
+
+  async getUserDefaults(userId?: string): Promise<UserDefaultsResponse> {
+    const params = userId ? `?user=${encodeURIComponent(userId)}` : '';
+    return this.apiCall<UserDefaultsResponse>(`${this.endpoints.GET_USER_DEFAULTS}${params}`);
+  }
+
   // Utility Methods
   isAuthenticated(): boolean {
     // Check if user is authenticated (implement based on your auth strategy)

src/services/assetService.ts

@@ -6,6 +6,7 @@ export interface Asset {
   name: string;
   asset_name: string;
   company: string;
+  docstatus?: number; // 0 = Draft, 1 = Submitted, 2 = Cancelled
   custom_serial_number?: string;
   location?: string;
   custom_manufacturer?: string;
@@ -26,6 +27,21 @@ export interface Asset {
   modified?: string;
   owner?: string;
   modified_by?: string;
+  status?: string;
+
+  calculate_depreciation?: boolean;
+  gross_purchase_amount?: number;
+  available_for_use_date?:string;
+  finance_books?: AssetFinanceBookRow[];
+  custom_spare_parts?: Array<{
+    item_code?: string;
+    item_name?: string;
+    qty?: number;
+    rate?: number;
+    amount?: number;
+    uom?: string;
+    work_order?: string;
+  }>;
 }
 
 export interface AssetListResponse {
@@ -63,6 +79,15 @@ export interface AssetStats {
   total_amount: number;
 }
 
+// Add child row type
+export interface AssetFinanceBookRow {
+  finance_book?: string;
+  depreciation_method?: string;
+  total_number_of_depreciations?: number;
+  frequency_of_depreciation?: number;
+  depreciation_start_date?: string; // YYYY-MM-DD
+}
+
 export interface CreateAssetData {
   asset_name: string;
   company: string;
@@ -82,6 +107,8 @@ export interface CreateAssetData {
   custom_attach_image?: string;
   custom_site_contractor?: string;
   custom_total_amount?: number;
+  calculate_depreciation?: boolean;
+  finance_books?: AssetFinanceBookRow[];
   [key: string]: any;
 }
 
@@ -191,6 +218,22 @@ class AssetService {
     const endpoint = `${API_CONFIG.ENDPOINTS.SEARCH_ASSETS}?search_term=${encodeURIComponent(searchTerm)}&limit=${limit}`;
     return apiService.apiCall<Asset[]>(endpoint);
   }
+
+  /**
+   * Submit an asset document (changes docstatus from 0 to 1)
+   */
+  async submitAsset(assetName: string): Promise<{ message: string }> {
+    return apiService.apiCall('/api/method/frappe.client.submit', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        doctype: 'Asset',
+        name: assetName
+      })
+    });
+  }
 }
 
 // Create and export singleton instance

vite.config.ts

@@ -35,6 +35,21 @@ export default defineConfig({
             proxyRes.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization, X-Frappe-CSRF-Token';
           });
         },
+      },
+      // Proxy file requests to Frappe backend
+      '/files': {
+        target: process.env.VITE_FRAPPE_BASE_URL || 'https://seeraasm-med.seeraarabia.com',
+        changeOrigin: true,
+        secure: true,
+        // Keep the /files path as-is when forwarding to the target
+        configure: (proxy, _options) => {
+          proxy.on('proxyReq', (proxyReq, req, _res) => {
+            // Log for debugging
+            if (process.env.DEV) {
+              console.log('Proxying file request:', req.url, 'to', proxyReq.path);
+            }
+          });
+        },
       }
     }
   },