style: synchronize icons for categories and items v1.2.5

This commit is contained in:
Daniel Bedeleanu
2026-04-11 11:46:34 +03:00
parent a4cea4ce07
commit aa134e4384
7 changed files with 51 additions and 35 deletions

View File

@@ -2,7 +2,7 @@
import { useState, useRef } from 'react';
import { toast } from 'react-hot-toast';
import { Camera, Check, RefreshCw, X, Image as ImageIcon, Sparkles, Hash, Layout } from 'lucide-react';
import { Camera, Check, RefreshCw, X, Image as ImageIcon, Sparkles, Hash, Layout, Layers, Package, ChevronDown } from 'lucide-react';
import { inventoryApi } from '@/lib/api';
interface AIOnboardingProps {
@@ -176,20 +176,29 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
<div className="grid grid-cols-2 gap-4">
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Category Group</label>
<select
value={extractedData.category || ''}
onChange={(e) => setExtractedData({...extractedData, category: e.target.value})}
className="bg-transparent w-full font-bold outline-none text-slate-200"
>
<option value="" className="bg-slate-900 font-bold">Other / New</option>
{categories.map(c => (
<option key={c.id} value={c.name} className="bg-slate-900">{c.name}</option>
))}
</select>
<div className="flex items-center gap-1.5 mb-1 ml-1 group-focus-within:text-primary transition-colors">
<Layers size={12} />
<label className="text-xs text-slate-500 font-bold">Category Group</label>
</div>
<div className="relative flex items-center">
<select
value={extractedData.category || ''}
onChange={(e) => setExtractedData({...extractedData, category: e.target.value})}
className="bg-transparent w-full font-bold outline-none text-slate-200 appearance-none"
>
<option value="" className="bg-slate-900 font-bold">Other / New</option>
{categories.map(c => (
<option key={c.id} value={c.name} className="bg-slate-900">{c.name}</option>
))}
</select>
<ChevronDown size={14} className="absolute right-0 text-slate-500 pointer-events-none" />
</div>
</div>
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Item Type</label>
<div className="flex items-center gap-1.5 mb-1 ml-1 group-focus-within:text-primary transition-colors">
<Package size={12} />
<label className="text-xs text-slate-500 font-bold">Item Type</label>
</div>
<input
value={extractedData.type || ''}
onChange={(e) => setExtractedData({...extractedData, type: e.target.value})}

View File

@@ -1,6 +1,6 @@
'use client';
import { X, Shield, UserPlus, User, Trash2, Tag, Plus, AlertTriangle, LogOut } from 'lucide-react';
import { X, Shield, UserPlus, User, Trash2, Tag, Plus, AlertTriangle, LogOut, Layers } from 'lucide-react';
import { inventoryApi } from '@/lib/api';
import { toast } from 'react-hot-toast';
@@ -124,8 +124,8 @@ export default function AdminOverlay({
{categories.map(cat => (
<div key={cat.id} className="bg-slate-800/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 bg-slate-700 rounded-lg text-slate-400">
<Tag size={16} />
<div className="p-2 bg-primary/10 rounded-lg text-primary">
<Layers size={16} />
</div>
<div>
<p className="text-sm font-bold text-white">{cat.name}</p>