bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Build [v1.14.24]

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-25 12:04:02 +03:00
parent 33c1555d8c
commit 3257a2cf48
50 changed files with 837 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/components/inventory/SearchModal.tsx
View File

@@ -109,23 +109,23 @@ export default function SearchModal({
return (
<div className="fixed inset-0 z-50 bg-black/50 flex items-start justify-center pt-20">
<div className="bg-slate-950 rounded-lg shadow-lg w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col">
<div className="bg-background shadow-lg w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col border border-outline/30">
{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-slate-800">
<div className="flex items-center justify-between p-4 border-b border-outline/30">
<h2 className="text-xl font-normal">Search inventory</h2>
<button
onClick={onClose}
aria-label="Close search modal"
className="p-2 hover:bg-slate-800 rounded-lg transition-colors"
className="p-2 hover:bg-surface-container transition-colors"
>
<X size={20} className="text-slate-400" />
<X size={20} className="text-secondary" />
</button>
</div>
{/* Search Input */}
<div className="p-4 border-b border-slate-800">
<div className="p-4 border-b border-outline/30">
<div className="relative">
<Search size={18} className="absolute left-3 top-3 text-slate-500 pointer-events-none" />
<Search size={18} className="absolute left-3 top-3 text-secondary pointer-events-none" />
<input
ref={inputRef}
type="text"
@@ -133,7 +133,7 @@ export default function SearchModal({
value={query}
onChange={handleInputChange}
aria-label="Search items"
className="w-full bg-slate-900 border border-slate-800 rounded-lg pl-10 pr-4 py-2 text-slate-100 placeholder-slate-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/50"
className="w-full bg-surface-container border border-outline/30 pl-10 pr-4 py-2 text-foreground placeholder-secondary/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/50"
/>
</div>
</div>
@@ -141,48 +141,48 @@ export default function SearchModal({
{/* Results */}
<div className="flex-1 overflow-y-auto">
{error && (
<div className="p-4 text-rose-500 bg-rose-500/10 border border-rose-500/20 m-4 rounded-lg">
<div className="p-4 text-error bg-error/10 border border-error/20 m-4">
{error}
</div>
)}
{isLoading && (
<div className="flex items-center justify-center py-8">
<div className="text-slate-400">
<div className="inline-block animate-spin rounded-full h-6 w-6 border border-slate-600 border-t-primary"></div>
<div className="text-secondary">
<div className="inline-block animate-spin h-6 w-6 border border-outline/30 border-t-primary"></div>
</div>
</div>
)}
{!isLoading && !error && results.length === 0 && query.length > 0 && (
<div className="p-4 text-slate-500 text-center">
<div className="p-4 text-secondary text-center">
No items found matching "{query}"
</div>
)}
{!isLoading && !error && results.length === 0 && query.length === 0 && (
<div className="p-4 text-slate-500 text-center">
<div className="p-4 text-secondary text-center">
Start typing to search
</div>
)}
{!isLoading && results.length > 0 && (
<div className="divide-y divide-slate-800">
<div className="divide-y divide-outline/30">
{results.map((item) => (
<button
key={item.id}
onClick={() => handleSelectItem(item)}
className="w-full p-4 text-left hover:bg-slate-900 transition-colors focus:outline-none focus:bg-slate-900 focus:ring-2 focus:ring-primary/50"
className="w-full p-4 text-left hover:bg-surface-container transition-colors focus:outline-none focus:bg-surface-container focus:ring-2 focus:ring-primary/50"
>
<div className="flex justify-between items-start gap-2 mb-1">
<h3 className="font-normal text-slate-100 flex-1">
<h3 className="font-normal text-foreground flex-1">
{item.name}
</h3>
<span className="text-primary font-normal text-sm whitespace-nowrap">
Qty: {item.quantity}
</span>
</div>
<div className="text-xs text-slate-500 space-y-1">
<div className="text-xs text-secondary space-y-1">
{item.part_number && (
<div>PN: {item.part_number}</div>
)}