Added Linkfield.tsx

src/components/LinkField.tsx

@@ -0,0 +1,201 @@
+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}
+        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;
+
+
+
+
+
+// import React, { useState, useEffect, useRef } from 'react';
+// import apiService from '../services/apiService';// ✅ uses your existing ApiService
+
+// interface LinkFieldProps {
+//   label: string;
+//   doctype: string;
+//   value: string;
+//   onChange: (value: string) => void;
+//   placeholder?: string;
+// }
+
+// const LinkField: React.FC<LinkFieldProps> = ({ label, doctype, value, onChange, placeholder }) => {
+//   const [searchResults, setSearchResults] = useState<{ value: string; description?: string }[]>([]);
+//   const [searchText, setSearchText] = useState('');
+//   const [isDropdownOpen, setDropdownOpen] = useState(false);
+//   const containerRef = useRef<HTMLDivElement>(null);
+
+//   // Function to call ERPNext link search API
+//   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);
+//     }
+//   };
+
+//   // Load default results 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-gray-700 text-sm font-medium mb-1">{label}</label> */}
+//       <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}`}
+//         className="border border-gray-300 rounded-md p-2 w-full focus:ring focus:ring-blue-200"
+//         onFocus={() => setDropdownOpen(true)}
+//         onChange={(e) => {
+//           const text = e.target.value;
+//           setSearchText(text);
+//           searchLink(text);
+//           onChange(text);
+//         }}
+//       />
+//       {isDropdownOpen && searchResults.length > 0 && (
+//         <ul className="absolute z-50 bg-white border border-gray-300 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={`p-2 hover:bg-blue-100 cursor-pointer ${
+//                 value === item.value ? 'bg-blue-50 font-semibold' : ''
+//               }`}
+//             >
+//               {item.value}
+//               {item.description && <span className="text-gray-500 text-xs ml-2">{item.description}</span>}
+//             </li>
+//           ))}
+//         </ul>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default LinkField;

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();
@@ -264,7 +267,7 @@ const AssetDetail: React.FC = () => {
                   />
                 </div>
                 
-                <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>
@@ -282,9 +285,17 @@ const AssetDetail: React.FC = () => {
                     <option value="IT Equipment">IT Equipment</option>
                     <option value="Furniture">Furniture</option>
                   </select>
-                </div>
+                </div> */}
 
-                <div>
+                <LinkField
+                  label="Category"
+                  doctype="Asset Type"
+                  value={formData.custom_asset_type || ''}
+                  onChange={(val) => setFormData({ ...formData, custom_asset_type: val })}
+                />
+
+
+                {/* <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>
@@ -302,7 +313,14 @@ const AssetDetail: React.FC = () => {
                     <option value="Ultrasound">Ultrasound</option>
                     <option value="Other">Other</option>
                   </select>
-                </div>
+                </div> */}
+                <LinkField
+                  label="Modality"
+                  doctype="Modality"
+                  value={formData.custom_modality || ''}
+                  onChange={(val) => setFormData({ ...formData, custom_modality: val })}
+                />
+
 
                 <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -384,7 +402,7 @@ const AssetDetail: React.FC = () => {
                   />
                 </div>
 
-                <div>
+                {/* <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Manufacturer
                   </label>
@@ -397,7 +415,14 @@ const AssetDetail: React.FC = () => {
                     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> */}
+
+                <LinkField
+                  label="Manufacturer"
+                  doctype="Manufacturer"
+                  value={formData.manufacturer || ''}
+                  onChange={(val) => setFormData({ ...formData, manufacturer: val })}
+                />
 
                 <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -432,7 +457,7 @@ const AssetDetail: React.FC = () => {
             <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>
+                {/* <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Company
                   </label>
@@ -447,9 +472,16 @@ const AssetDetail: React.FC = () => {
                     <option value="ABC Hospital">ABC Hospital</option>
                     <option value="XYZ Clinic">XYZ Clinic</option>
                   </select>
-                </div>
+                </div> */}
 
-                <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>
@@ -465,7 +497,14 @@ const AssetDetail: React.FC = () => {
                     <option value="Cardiology">Cardiology</option>
                     <option value="IT">IT</option>
                   </select>
-                </div>
+                </div> */}
+
+                <LinkField
+                  label="Department"
+                  doctype="Department"
+                  value={formData.department || ''}
+                  onChange={(val) => setFormData({ ...formData, department: val })}
+                />
 
                 <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">