+
+
+
+
setIsProductDropdownOpen(true)}
+ onChange={(e) => {
+ setProductSearchQuery(e.target.value);
+ setFormData({ ...formData, product_id: e.target.value });
+ setIsProductDropdownOpen(true);
+ }}
+ placeholder="Type medicine name, generic name or Product ID..."
+ className="w-full bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 text-[15px] font-medium text-slate-800 transition-all hover:bg-slate-100 hover:border-slate-300 placeholder:text-slate-400"
+ style={{ padding: '12px 16px', paddingLeft: '44px', paddingRight: '40px' }}
+ />
+
setIsProductDropdownOpen(!isProductDropdownOpen)}
+ >
+
+
+
+
+ {/* Searchable Custom Dropdown Menu */}
+ {isProductDropdownOpen && (
+
+ {filteredProductOptions.length > 0 ? (
+ filteredProductOptions.map((d: any) => (
+
{
+ setFormData({ ...formData, product_id: d.product_id });
+ setProductSearchQuery(\`\${d.brand_name} (\${d.product_id})\`);
+ setIsProductDropdownOpen(false);
+ }}
+ className="p-3 hover:bg-blue-50/80 cursor-pointer flex items-center justify-between transition-colors group"
+ >
+
+
+ {d.brand_name}
+
+
+ {d.generic_name || 'Generic Medicine'} {d.manufacturer ? \`• \${d.manufacturer}\` : ''}
+
+
+
+ {d.product_id}
+
+
+ ))
+ ) : (
+
+ No matching medicines found
+
+ )}
+