Added Linkfield.tsx
This commit is contained in:
Duradundi Hadimani
parent
a2d3f48fca
commit
e62a7be9fa
201
src/components/LinkField.tsx
Normal file
201
src/components/LinkField.tsx
Normal file
@ -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;
|
||||||
@ -4,6 +4,9 @@ import { useAssetDetails, useAssetMutations } from '../hooks/useAsset';
|
|||||||
import { FaArrowLeft, FaSave, FaEdit, FaQrcode } from 'react-icons/fa';
|
import { FaArrowLeft, FaSave, FaEdit, FaQrcode } from 'react-icons/fa';
|
||||||
import type { CreateAssetData } from '../services/assetService';
|
import type { CreateAssetData } from '../services/assetService';
|
||||||
|
|
||||||
|
import LinkField from '../components/LinkField';
|
||||||
|
|
||||||
|
|
||||||
const AssetDetail: React.FC = () => {
|
const AssetDetail: React.FC = () => {
|
||||||
const { assetName } = useParams<{ assetName: string }>();
|
const { assetName } = useParams<{ assetName: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -233,6 +236,7 @@ const AssetDetail: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
{/* 4-Column Grid Layout */}
|
{/* 4-Column Grid Layout */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
@ -257,8 +261,124 @@ const AssetDetail: React.FC = () => {
|
|||||||
disabled={!isEditing}
|
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"
|
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"
|
||||||
/>
|
/>
|
||||||
|
=======
|
||||||
|
<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 })}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
{/* <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-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
|
Class <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
name="custom_class"
|
||||||
|
value={formData.custom_class}
|
||||||
|
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 class</option>
|
||||||
|
<option value="Class A">Class A</option>
|
||||||
|
<option value="Class B">Class B</option>
|
||||||
|
<option value="Class C">Class C</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
|
Asset ID <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={isNewAsset || isDuplicating ? 'Auto-generated' : asset?.name}
|
||||||
|
disabled
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||||
|
/>
|
||||||
|
{isDuplicating && (
|
||||||
|
<p className="mt-1 text-xs text-blue-600 dark:text-blue-400">
|
||||||
|
💡 Duplicating from: {duplicateFromAsset}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
>>>>>>> 225d63e (Added Linkfield.tsx)
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
Category <span className="text-red-500">*</span>
|
Category <span className="text-red-500">*</span>
|
||||||
@ -277,8 +397,102 @@ const AssetDetail: React.FC = () => {
|
|||||||
<option value="IT Equipment">IT Equipment</option>
|
<option value="IT Equipment">IT Equipment</option>
|
||||||
<option value="Furniture">Furniture</option>
|
<option value="Furniture">Furniture</option>
|
||||||
</select>
|
</select>
|
||||||
|
=======
|
||||||
|
{/* Technical Specs */}
|
||||||
|
<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">Technical Specs</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">
|
||||||
|
Serial No.
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="custom_serial_number"
|
||||||
|
value={formData.custom_serial_number}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="e.g. SN-12345"
|
||||||
|
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">
|
||||||
|
System ID
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="e.g. SYS-755"
|
||||||
|
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">
|
||||||
|
Serial No.2
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="e.g. SR-V021-A"
|
||||||
|
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">
|
||||||
|
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>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
|
Model
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="custom_model"
|
||||||
|
value={formData.custom_model}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Model number"
|
||||||
|
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">
|
||||||
|
Model Number
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Model number"
|
||||||
|
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>
|
||||||
|
>>>>>>> 225d63e (Added Linkfield.tsx)
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
Modality
|
Modality
|
||||||
@ -297,6 +511,111 @@ const AssetDetail: React.FC = () => {
|
|||||||
<option value="Ultrasound">Ultrasound</option>
|
<option value="Ultrasound">Ultrasound</option>
|
||||||
<option value="Other">Other</option>
|
<option value="Other">Other</option>
|
||||||
</select>
|
</select>
|
||||||
|
=======
|
||||||
|
{/* 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> */}
|
||||||
|
|
||||||
|
<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-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
|
Building
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="location"
|
||||||
|
value={formData.location}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Building 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>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
|
Area/Unit
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Area or unit"
|
||||||
|
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">
|
||||||
|
Room Number
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="e.g. Room 001-002"
|
||||||
|
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">
|
||||||
|
Assigned To
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Person or department"
|
||||||
|
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>
|
||||||
|
>>>>>>> 225d63e (Added Linkfield.tsx)
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user