92 lines
5.3 KiB
JavaScript
92 lines
5.3 KiB
JavaScript
const fs = require('fs');
|
|
|
|
const path = 'C:/Users/CSH12/Desktop/AI_Pharamcy_Frontend/AI_Pharmacy_Application/src/pages/Inventory.tsx';
|
|
let content = fs.readFileSync(path, 'utf8');
|
|
|
|
const targetSnippet = `<datalist id="product-options">`;
|
|
if (content.includes(targetSnippet)) {
|
|
const startIdx = content.indexOf('<div className="col-span-2">');
|
|
const endIdx = content.indexOf(') : (', startIdx);
|
|
|
|
if (startIdx !== -1 && endIdx !== -1) {
|
|
const originalBlock = content.substring(startIdx, endIdx).trim();
|
|
// remove trailing </div> from original block if present
|
|
const lastDivIdx = originalBlock.lastIndexOf('</div>');
|
|
const targetBlockToReplace = originalBlock.substring(0, lastDivIdx + 6);
|
|
|
|
const replacementBlock = `<div className="col-span-2 relative">
|
|
<label className="block text-xs font-bold uppercase tracking-wider text-slate-500" style={{ marginBottom: '8px' }}>Product / Medicine (Search by Brand, Generic or Product ID)</label>
|
|
<div className="relative group">
|
|
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400 group-focus-within:text-blue-500 transition-colors z-10">
|
|
<Search size={18} strokeWidth={2} />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
value={productSearchQuery || formData.product_id}
|
|
onFocus={() => 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' }}
|
|
/>
|
|
<div
|
|
className="absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer text-slate-400 hover:text-slate-600 z-10"
|
|
onClick={() => setIsProductDropdownOpen(!isProductDropdownOpen)}
|
|
>
|
|
<ChevronDown size={18} strokeWidth={2} className={\`transition-transform \${isProductDropdownOpen ? 'rotate-180' : ''}\`} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Searchable Custom Dropdown Menu */}
|
|
{isProductDropdownOpen && (
|
|
<div
|
|
className="absolute left-0 right-0 top-full mt-2 bg-white border border-slate-200 rounded-xl shadow-2xl z-50 max-h-64 overflow-y-auto divide-y divide-slate-100"
|
|
style={{ boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)' }}
|
|
>
|
|
{filteredProductOptions.length > 0 ? (
|
|
filteredProductOptions.map((d: any) => (
|
|
<div
|
|
key={d.product_id}
|
|
onClick={() => {
|
|
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"
|
|
>
|
|
<div className="flex flex-col">
|
|
<span className="font-bold text-slate-800 text-[14px] group-hover:text-blue-600">
|
|
{d.brand_name}
|
|
</span>
|
|
<span className="text-xs text-slate-500">
|
|
{d.generic_name || 'Generic Medicine'} {d.manufacturer ? \`• \${d.manufacturer}\` : ''}
|
|
</span>
|
|
</div>
|
|
<span className="text-[11px] font-mono font-bold bg-slate-100 text-slate-700 group-hover:bg-blue-100 group-hover:text-blue-700 px-2.5 py-1 rounded-md transition-colors shrink-0">
|
|
{d.product_id}
|
|
</span>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="p-4 text-center text-slate-400 text-sm">
|
|
No matching medicines found
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>`;
|
|
|
|
content = content.replace(targetBlockToReplace, replacementBlock);
|
|
fs.writeFileSync(path, content);
|
|
console.log("SUCCESS: Replaced datalist block with custom Combobox!");
|
|
} else {
|
|
console.log("Could not locate block bounds:", startIdx, endIdx);
|
|
}
|
|
} else {
|
|
console.log("No datalist found.");
|
|
}
|