Major frontend and admin improvements
Frontend changes: - Removed brand filter and column from table - Removed inventory summary grid - Removed stanje (state) and težina (weight) columns - Reorganized filters: Material → Finish → Color - Updated EnhancedFilters component with new filter structure - Removed legend section for storage conditions Admin dashboard changes: - Removed sidebar navigation (Boje option) - Made dashboard full screen - Removed brand column from table - Removed brand field from add/edit form - Updated all boolean columns to use checkmark/X icons - Made color tiles 40% bigger - Added sortable columns functionality - Auto-fill price: 3499 for refill, 3999 for regular Other improvements: - Added BackToTop button component on all pages - Fixed Next.js dialog backdrop CSS error - Updated tests to match new UI structure - Removed obsolete FilamentTable.tsx component - Ensured proper synchronization between admin and frontend 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DaX
@@ -13,12 +13,12 @@ describe('UI Features Tests', () => {
|
||||
});
|
||||
|
||||
it('should display color hex in frontend table', () => {
|
||||
const filamentTablePath = join(process.cwd(), 'src', 'components', 'FilamentTable.tsx');
|
||||
const filamentTablePath = join(process.cwd(), 'src', 'components', 'FilamentTableV2.tsx');
|
||||
const tableContent = readFileSync(filamentTablePath, 'utf-8');
|
||||
|
||||
// Check for color hex display
|
||||
expect(tableContent).toContain('filament.bojaHex');
|
||||
expect(tableContent).toContain('backgroundColor: filament.bojaHex');
|
||||
// Check for color display
|
||||
expect(tableContent).toContain('ColorSwatch');
|
||||
expect(tableContent).toContain('color.hex');
|
||||
});
|
||||
|
||||
it('should have checkboxes for boolean fields', () => {
|
||||
@@ -41,28 +41,25 @@ describe('UI Features Tests', () => {
|
||||
expect(adminContent).toContain('step="1"');
|
||||
});
|
||||
|
||||
it('should have predefined brand options', () => {
|
||||
it('should have predefined material options', () => {
|
||||
const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
|
||||
const adminContent = readFileSync(adminDashboardPath, 'utf-8');
|
||||
|
||||
// Check for brand select dropdown
|
||||
expect(adminContent).toContain('<option value="Bambu Lab">Bambu Lab</option>');
|
||||
expect(adminContent).toContain('<option value="PolyMaker">PolyMaker</option>');
|
||||
expect(adminContent).toContain('<option value="Prusament">Prusament</option>');
|
||||
// Check for material select dropdown
|
||||
expect(adminContent).toContain('<option value="PLA">PLA</option>');
|
||||
expect(adminContent).toContain('<option value="PETG">PETG</option>');
|
||||
expect(adminContent).toContain('<option value="ABS">ABS</option>');
|
||||
});
|
||||
|
||||
it('should have sidebar navigation in admin', () => {
|
||||
it('should have admin header with navigation', () => {
|
||||
const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
|
||||
const colorsPagePath = join(process.cwd(), 'app', 'upadaj', 'colors', 'page.tsx');
|
||||
|
||||
const dashboardContent = readFileSync(adminDashboardPath, 'utf-8');
|
||||
const colorsContent = readFileSync(colorsPagePath, 'utf-8');
|
||||
|
||||
// Check for sidebar
|
||||
expect(dashboardContent).toContain('href="/upadaj/dashboard"');
|
||||
expect(dashboardContent).toContain('href="/upadaj/colors"');
|
||||
expect(colorsContent).toContain('href="/upadaj/dashboard"');
|
||||
expect(colorsContent).toContain('href="/upadaj/colors"');
|
||||
// Check for admin header
|
||||
expect(dashboardContent).toContain('Admin Dashboard');
|
||||
expect(dashboardContent).toContain('Nazad na sajt');
|
||||
expect(dashboardContent).toContain('Odjava');
|
||||
});
|
||||
|
||||
it('should have Safari-specific select styling', () => {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { Metadata } from 'next'
|
||||
import '../src/styles/index.css'
|
||||
import { BackToTop } from '../src/components/BackToTop'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Filamenteka',
|
||||
@@ -42,7 +43,10 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body suppressHydrationWarning>{children}</body>
|
||||
<body suppressHydrationWarning>
|
||||
{children}
|
||||
<BackToTop />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
@@ -250,14 +250,20 @@ export default function ColorsManagement() {
|
||||
<button
|
||||
onClick={() => setEditingColor(color)}
|
||||
className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 mr-3"
|
||||
title="Izmeni"
|
||||
>
|
||||
Izmeni
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(color.id)}
|
||||
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
|
||||
title="Obriši"
|
||||
>
|
||||
Obriši
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -23,7 +23,8 @@ export default function AdminDashboard() {
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [sortField, setSortField] = useState<string>('');
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
|
||||
|
||||
// Initialize dark mode - default to true for admin
|
||||
useEffect(() => {
|
||||
@@ -76,6 +77,34 @@ export default function AdminDashboard() {
|
||||
fetchFilaments();
|
||||
}, []);
|
||||
|
||||
// Sorting logic
|
||||
const handleSort = (field: string) => {
|
||||
if (sortField === field) {
|
||||
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortOrder('asc');
|
||||
}
|
||||
};
|
||||
|
||||
const sortedFilaments = [...filaments].sort((a, b) => {
|
||||
if (!sortField) return 0;
|
||||
|
||||
let aVal = a[sortField as keyof FilamentWithId];
|
||||
let bVal = b[sortField as keyof FilamentWithId];
|
||||
|
||||
// Handle null/undefined values
|
||||
if (aVal === null || aVal === undefined) aVal = '';
|
||||
if (bVal === null || bVal === undefined) bVal = '';
|
||||
|
||||
// Convert to strings for comparison
|
||||
aVal = String(aVal).toLowerCase();
|
||||
bVal = String(bVal).toLowerCase();
|
||||
|
||||
if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
|
||||
if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
const handleSave = async (filament: Partial<FilamentWithId>) => {
|
||||
try {
|
||||
@@ -122,52 +151,12 @@ export default function AdminDashboard() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
|
||||
<div className="flex relative">
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="lg:hidden fixed top-4 left-4 z-50 p-2 bg-white dark:bg-gray-800 rounded-md shadow-lg"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sidebarOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className={`${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0 transition-transform duration-300 fixed lg:static w-64 bg-white dark:bg-gray-800 shadow-lg h-screen z-40`}>
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Admin Panel</h2>
|
||||
<nav className="space-y-2">
|
||||
<a
|
||||
href="/upadaj/dashboard"
|
||||
className="block px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded"
|
||||
>
|
||||
Filamenti
|
||||
</a>
|
||||
<a
|
||||
href="/upadaj/colors"
|
||||
className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
|
||||
>
|
||||
Boje
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlay for mobile */}
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 bg-black bg-opacity-50 z-30"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 lg:ml-0">
|
||||
{/* Main Content - Full Screen */}
|
||||
<div className="w-full">
|
||||
<header className="bg-white dark:bg-gray-800 shadow transition-colors">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 lg:py-6">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white ml-12 lg:ml-0">Admin Dashboard</h1>
|
||||
<h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white">Admin Dashboard</h1>
|
||||
<div className="flex flex-wrap gap-2 sm:gap-4 w-full sm:w-auto">
|
||||
{!showAddForm && !editingFilament && (
|
||||
<button
|
||||
@@ -231,39 +220,71 @@ export default function AdminDashboard() {
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Brand</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tip</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Finish</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Boja</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Refill</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Vakum</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Otvoreno</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Količina</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cena</th>
|
||||
<th onClick={() => handleSort('tip')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th onClick={() => handleSort('finish')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Finish {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th onClick={() => handleSort('boja')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th onClick={() => handleSort('refill')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Refill {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th onClick={() => handleSort('vakum')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Vakuum {sortField === 'vakum' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th onClick={() => handleSort('otvoreno')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Otvoreno {sortField === 'otvoreno' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th onClick={() => handleSort('kolicina')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Količina {sortField === 'kolicina' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th onClick={() => handleSort('cena')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Cena {sortField === 'cena' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Akcije</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{filaments.map((filament) => (
|
||||
{sortedFilaments.map((filament) => (
|
||||
<tr key={filament.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.brand}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.tip}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.finish}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{filament.boja}</span>
|
||||
{filament.bojaHex && (
|
||||
<div
|
||||
className="w-4 h-4 rounded border border-gray-300 dark:border-gray-600"
|
||||
className="w-7 h-7 rounded border border-gray-300 dark:border-gray-600"
|
||||
style={{ backgroundColor: filament.bojaHex }}
|
||||
title={filament.bojaHex}
|
||||
/>
|
||||
)}
|
||||
<span>{filament.boja}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.refill}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.vakum}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.otvoreno}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
||||
{filament.refill?.toLowerCase() === 'da' ? (
|
||||
<span className="text-green-600 dark:text-green-400 text-lg">✓</span>
|
||||
) : (
|
||||
<span className="text-red-600 dark:text-red-400 text-lg">✗</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
||||
{filament.vakum?.toLowerCase().includes('vakuum') ? (
|
||||
<span className="text-green-600 dark:text-green-400 text-lg">✓</span>
|
||||
) : (
|
||||
<span className="text-red-600 dark:text-red-400 text-lg">✗</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
||||
{filament.otvoreno?.toLowerCase().includes('otvorena') ? (
|
||||
<span className="text-green-600 dark:text-green-400 text-lg">✓</span>
|
||||
) : (
|
||||
<span className="text-red-600 dark:text-red-400 text-lg">✗</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.kolicina}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.cena}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
@@ -274,14 +295,20 @@ export default function AdminDashboard() {
|
||||
setShowAddForm(false);
|
||||
}}
|
||||
className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 mr-3"
|
||||
title="Izmeni"
|
||||
>
|
||||
Izmeni
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(filament.id)}
|
||||
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
|
||||
title="Obriši"
|
||||
>
|
||||
Obriši
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -290,7 +317,6 @@ export default function AdminDashboard() {
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -309,7 +335,7 @@ function FilamentForm({
|
||||
onCancel: () => void
|
||||
}) {
|
||||
const [formData, setFormData] = useState({
|
||||
brand: filament.brand || '',
|
||||
brand: filament.brand || 'Bambu Lab', // Use existing brand or default to Bambu Lab
|
||||
tip: filament.tip || '',
|
||||
finish: filament.finish || '',
|
||||
boja: filament.boja || '',
|
||||
@@ -318,7 +344,7 @@ function FilamentForm({
|
||||
vakum: filament.vakum || '',
|
||||
otvoreno: filament.otvoreno || '',
|
||||
kolicina: filament.kolicina || '',
|
||||
cena: filament.cena || '',
|
||||
cena: filament.cena || (filament.id ? '' : '3999'), // Default price for new filaments
|
||||
});
|
||||
|
||||
const [availableColors, setAvailableColors] = useState<Array<{id: string, name: string, hex: string}>>([]);
|
||||
@@ -385,7 +411,9 @@ function FilamentForm({
|
||||
} else if (name === 'refill') {
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: checked ? 'Da' : ''
|
||||
[name]: checked ? 'Da' : '',
|
||||
// Auto-fill price based on refill status if this is a new filament
|
||||
...(filament.id ? {} : { cena: checked ? '3499' : '3999' })
|
||||
});
|
||||
}
|
||||
} else {
|
||||
@@ -410,27 +438,6 @@ function FilamentForm({
|
||||
{filament.id ? 'Izmeni filament' : 'Dodaj novi filament'}
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Brand</label>
|
||||
<select
|
||||
name="brand"
|
||||
value={formData.brand}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Izaberi brand</option>
|
||||
<option value="Bambu Lab">Bambu Lab</option>
|
||||
<option value="PolyMaker">PolyMaker</option>
|
||||
<option value="Prusament">Prusament</option>
|
||||
<option value="SUNLU">SUNLU</option>
|
||||
<option value="eSUN">eSUN</option>
|
||||
<option value="ELEGOO">ELEGOO</option>
|
||||
<option value="GEEETECH">GEEETECH</option>
|
||||
<option value="Creality">Creality</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Tip</label>
|
||||
<select
|
||||
@@ -465,7 +472,6 @@ function FilamentForm({
|
||||
<option value="Sparkle">Sparkle</option>
|
||||
<option value="Glow">Glow</option>
|
||||
<option value="Transparent">Transparent</option>
|
||||
<option value="Support">Support</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -479,7 +485,7 @@ function FilamentForm({
|
||||
let hexValue = formData.bojaHex;
|
||||
|
||||
// Only use Bambu Lab colors if BambuLab brand is selected
|
||||
if (formData.brand === 'BambuLab') {
|
||||
if (formData.brand === 'Bambu Lab') {
|
||||
const bambuHex = getColorHex(selectedColorName);
|
||||
if (bambuHex !== "#000000") {
|
||||
hexValue = bambuHex;
|
||||
@@ -503,7 +509,7 @@ function FilamentForm({
|
||||
>
|
||||
<option value="">Izaberite boju</option>
|
||||
{/* Show Bambu Lab colors only when BambuLab brand is selected */}
|
||||
{formData.brand === 'BambuLab' && formData.finish && colorsByFinish[formData.finish as keyof typeof colorsByFinish] && (
|
||||
{formData.brand === 'Bambu Lab' && formData.finish && colorsByFinish[formData.finish as keyof typeof colorsByFinish] && (
|
||||
<optgroup label={`Bambu Lab ${formData.finish} boje`}>
|
||||
{colorsByFinish[formData.finish as keyof typeof colorsByFinish].map(colorName => (
|
||||
<option key={`bambu-${colorName}`} value={colorName}>
|
||||
@@ -514,7 +520,7 @@ function FilamentForm({
|
||||
)}
|
||||
{/* Show all available colors from database */}
|
||||
{availableColors.length > 0 && (
|
||||
<optgroup label={formData.brand === 'BambuLab' ? 'Ostale boje' : 'Dostupne boje'}>
|
||||
<optgroup label={formData.brand === 'Bambu Lab' ? 'Ostale boje' : 'Dostupne boje'}>
|
||||
{availableColors.map(color => (
|
||||
<option key={color.id} value={color.name}>
|
||||
{color.name}
|
||||
@@ -536,7 +542,7 @@ function FilamentForm({
|
||||
name="bojaHex"
|
||||
value={formData.bojaHex || '#000000'}
|
||||
onChange={handleChange}
|
||||
disabled={!!(formData.brand === 'BambuLab' && formData.boja && formData.boja !== 'custom' && getColorHex(formData.boja) !== "#000000")}
|
||||
disabled={!!(formData.brand === 'Bambu Lab' && formData.boja && formData.boja !== 'custom' && getColorHex(formData.boja) !== "#000000")}
|
||||
className="w-full h-10 px-1 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
/>
|
||||
{formData.bojaHex && (
|
||||
|
||||
55
src/components/BackToTop.tsx
Normal file
55
src/components/BackToTop.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export const BackToTop = () => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const toggleVisibility = () => {
|
||||
if (window.pageYOffset > 300) {
|
||||
setIsVisible(true);
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', toggleVisibility);
|
||||
|
||||
return () => window.removeEventListener('scroll', toggleVisibility);
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{isVisible && (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-8 right-8 z-50 p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all duration-300 transform hover:scale-110"
|
||||
aria-label="Back to top"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 10l7-7m0 0l7 7m-7-7v18"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -16,7 +16,7 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
|
||||
className = ''
|
||||
}) => {
|
||||
const sizeClasses = {
|
||||
sm: 'w-6 h-6',
|
||||
sm: 'w-7 h-7',
|
||||
md: 'w-8 h-8',
|
||||
lg: 'w-10 h-10'
|
||||
};
|
||||
@@ -63,12 +63,12 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className}`}>
|
||||
<div
|
||||
className={`${sizeClasses[size]} rounded-full border-2 ${isLight ? 'border-gray-300' : 'border-gray-700'} shadow-sm`}
|
||||
className={`${sizeClasses[size]} rounded border border-gray-300 dark:border-gray-600`}
|
||||
style={{ backgroundColor }}
|
||||
title={name}
|
||||
>
|
||||
{name.toLowerCase().includes('transparent') && (
|
||||
<div className="w-full h-full rounded-full bg-gradient-to-br from-gray-200 to-gray-300 opacity-50" />
|
||||
<div className="w-full h-full rounded bg-gradient-to-br from-gray-200 to-gray-300 opacity-50" />
|
||||
)}
|
||||
</div>
|
||||
{showLabel && (
|
||||
|
||||
@@ -2,16 +2,16 @@ import React from 'react';
|
||||
|
||||
interface EnhancedFiltersProps {
|
||||
filters: {
|
||||
brand: string;
|
||||
material: string;
|
||||
finish: string;
|
||||
color: string;
|
||||
storageCondition: string;
|
||||
isRefill: boolean | null;
|
||||
color: string;
|
||||
};
|
||||
onFilterChange: (filters: any) => void;
|
||||
uniqueValues: {
|
||||
brands: string[];
|
||||
materials: string[];
|
||||
finishes: string[];
|
||||
colors: string[];
|
||||
};
|
||||
}
|
||||
@@ -22,32 +22,13 @@ export const EnhancedFilters: React.FC<EnhancedFiltersProps> = ({
|
||||
uniqueValues
|
||||
}) => {
|
||||
// Check if any filters are active
|
||||
const hasActiveFilters = filters.brand || filters.material || filters.color ||
|
||||
const hasActiveFilters = filters.material || filters.finish || filters.color ||
|
||||
filters.storageCondition || filters.isRefill !== null;
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
{/* Filters Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 max-w-6xl mx-auto">
|
||||
{/* Brand Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Brend
|
||||
</label>
|
||||
<select
|
||||
value={filters.brand}
|
||||
onChange={(e) => onFilterChange({ ...filters, brand: e.target.value })}
|
||||
className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600
|
||||
bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100
|
||||
rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Svi brendovi</option>
|
||||
{uniqueValues.brands.map(brand => (
|
||||
<option key={brand} value={brand}>{brand}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Material Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
@@ -77,6 +58,25 @@ export const EnhancedFilters: React.FC<EnhancedFiltersProps> = ({
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Finish Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Finish
|
||||
</label>
|
||||
<select
|
||||
value={filters.finish}
|
||||
onChange={(e) => onFilterChange({ ...filters, finish: e.target.value })}
|
||||
className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600
|
||||
bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100
|
||||
rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Svi finish tipovi</option>
|
||||
{uniqueValues.finishes.map(finish => (
|
||||
<option key={finish} value={finish}>{finish}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Color Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
@@ -144,11 +144,11 @@ export const EnhancedFilters: React.FC<EnhancedFiltersProps> = ({
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={() => onFilterChange({
|
||||
brand: '',
|
||||
material: '',
|
||||
finish: '',
|
||||
color: '',
|
||||
storageCondition: '',
|
||||
isRefill: null,
|
||||
color: ''
|
||||
isRefill: null
|
||||
})}
|
||||
className="flex items-center gap-1.5 ml-6 px-3 py-1.5 text-sm font-medium text-white bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 rounded-md transition-all duration-200 transform hover:scale-105 shadow-sm hover:shadow-md"
|
||||
title="Reset sve filtere"
|
||||
|
||||
@@ -1,311 +0,0 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Filament } from '../types/filament';
|
||||
import { ColorCell } from './ColorCell';
|
||||
import { getFilamentColor, getColorStyle, getContrastColor } from '../data/bambuLabColors';
|
||||
import '../styles/select.css';
|
||||
|
||||
interface FilamentTableProps {
|
||||
filaments: Filament[];
|
||||
loading?: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading, error }) => {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [sortField, setSortField] = useState<keyof Filament>('boja');
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
|
||||
|
||||
// Filter states
|
||||
const [filterBrand, setFilterBrand] = useState('');
|
||||
const [filterTip, setFilterTip] = useState('');
|
||||
const [filterFinish, setFilterFinish] = useState('');
|
||||
const [filterStatus, setFilterStatus] = useState('');
|
||||
|
||||
// Get unique values for filters
|
||||
const uniqueBrands = useMemo(() => [...new Set(filaments.map(f => f.brand))].sort(), [filaments]);
|
||||
const uniqueTips = useMemo(() => [...new Set(filaments.map(f => f.tip))].sort(), [filaments]);
|
||||
const uniqueFinishes = useMemo(() => [...new Set(filaments.map(f => f.finish))].sort(), [filaments]);
|
||||
|
||||
const filteredAndSortedFilaments = useMemo(() => {
|
||||
let filtered = filaments.filter(filament => {
|
||||
// Search filter
|
||||
const matchesSearch = Object.values(filament).some(value =>
|
||||
value.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
// Brand filter
|
||||
const matchesBrand = !filterBrand || filament.brand === filterBrand;
|
||||
|
||||
// Type filter
|
||||
const matchesTip = !filterTip || filament.tip === filterTip;
|
||||
|
||||
// Finish filter
|
||||
const matchesFinish = !filterFinish || filament.finish === filterFinish;
|
||||
|
||||
// Status filter
|
||||
let matchesStatus = true;
|
||||
if (filterStatus) {
|
||||
if (filterStatus === 'new') {
|
||||
matchesStatus = filament.vakum.toLowerCase().includes('vakuum') && !filament.otvoreno;
|
||||
} else if (filterStatus === 'opened') {
|
||||
matchesStatus = filament.otvoreno.toLowerCase().includes('otvorena');
|
||||
} else if (filterStatus === 'refill') {
|
||||
matchesStatus = filament.refill.toLowerCase() === 'da';
|
||||
}
|
||||
}
|
||||
|
||||
return matchesSearch && matchesBrand && matchesTip && matchesFinish && matchesStatus;
|
||||
});
|
||||
|
||||
filtered.sort((a, b) => {
|
||||
const aValue = a[sortField] || '';
|
||||
const bValue = b[sortField] || '';
|
||||
|
||||
if (sortOrder === 'asc') {
|
||||
return aValue.localeCompare(bValue);
|
||||
} else {
|
||||
return bValue.localeCompare(aValue);
|
||||
}
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}, [filaments, searchTerm, sortField, sortOrder, filterBrand, filterTip, filterFinish, filterStatus]);
|
||||
|
||||
const handleSort = (field: keyof Filament) => {
|
||||
if (sortField === field) {
|
||||
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortOrder('asc');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-200 px-4 py-3 rounded">
|
||||
Greška: {error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="space-y-4 mb-4">
|
||||
{/* Search Bar */}
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pretraži filamente..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter Row */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{/* Brand Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Brend
|
||||
</label>
|
||||
<select
|
||||
value={filterBrand}
|
||||
onChange={(e) => setFilterBrand(e.target.value)}
|
||||
className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Svi brendovi</option>
|
||||
{uniqueBrands.map(brand => (
|
||||
<option key={brand} value={brand}>{brand}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Type Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Tip
|
||||
</label>
|
||||
<select
|
||||
value={filterTip}
|
||||
onChange={(e) => setFilterTip(e.target.value)}
|
||||
className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Svi tipovi</option>
|
||||
{uniqueTips.map(tip => (
|
||||
<option key={tip} value={tip}>{tip}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Finish Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Završna obrada
|
||||
</label>
|
||||
<select
|
||||
value={filterFinish}
|
||||
onChange={(e) => setFilterFinish(e.target.value)}
|
||||
className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Sve obrade</option>
|
||||
{uniqueFinishes.map(finish => (
|
||||
<option key={finish} value={finish}>{finish}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Status Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Status
|
||||
</label>
|
||||
<select
|
||||
value={filterStatus}
|
||||
onChange={(e) => setFilterStatus(e.target.value)}
|
||||
className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Svi statusi</option>
|
||||
<option value="new">Novi (vakuum)</option>
|
||||
<option value="opened">Otvoreni</option>
|
||||
<option value="refill">Refill</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Clear Filters Button */}
|
||||
{(filterBrand || filterTip || filterFinish || filterStatus) && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setFilterBrand('');
|
||||
setFilterTip('');
|
||||
setFilterFinish('');
|
||||
setFilterStatus('');
|
||||
}}
|
||||
className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
|
||||
>
|
||||
Obriši filtere
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 dark:bg-gray-700">
|
||||
<th
|
||||
className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
|
||||
onClick={() => handleSort('brand')}
|
||||
>
|
||||
Brend {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
|
||||
onClick={() => handleSort('tip')}
|
||||
>
|
||||
Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
|
||||
onClick={() => handleSort('finish')}
|
||||
>
|
||||
Završna obrada {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
|
||||
onClick={() => handleSort('boja')}
|
||||
>
|
||||
Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
|
||||
onClick={() => handleSort('refill')}
|
||||
>
|
||||
Refill {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
|
||||
onClick={() => handleSort('vakum')}
|
||||
>
|
||||
Vakum {sortField === 'vakum' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
|
||||
onClick={() => handleSort('otvoreno')}
|
||||
>
|
||||
Otvoreno {sortField === 'otvoreno' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
|
||||
onClick={() => handleSort('kolicina')}
|
||||
>
|
||||
Količina {sortField === 'kolicina' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
|
||||
onClick={() => handleSort('cena')}
|
||||
>
|
||||
Cena {sortField === 'cena' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredAndSortedFilaments.map((filament, index) => {
|
||||
const colorMapping = getFilamentColor(filament.boja);
|
||||
const cellStyle = getColorStyle(colorMapping);
|
||||
const textColor = Array.isArray(colorMapping.hex)
|
||||
? '#000000'
|
||||
: getContrastColor(colorMapping.hex);
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors bg-white dark:bg-gray-800"
|
||||
>
|
||||
<td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.brand}</td>
|
||||
<td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.tip}</td>
|
||||
<td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.finish}</td>
|
||||
<td
|
||||
className="px-4 py-2 border-b border-r dark:border-gray-700"
|
||||
style={{
|
||||
...cellStyle,
|
||||
color: textColor
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<ColorCell colorName={filament.boja} />
|
||||
{filament.bojaHex && (
|
||||
<div
|
||||
className="w-4 h-4 rounded border border-gray-300 dark:border-gray-600"
|
||||
style={{ backgroundColor: filament.bojaHex }}
|
||||
title={filament.bojaHex}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.refill}</td>
|
||||
<td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.vakum}</td>
|
||||
<td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.otvoreno}</td>
|
||||
<td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.kolicina}</td>
|
||||
<td className="px-4 py-2 border-b dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.cena}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
Prikazano {filteredAndSortedFilaments.length} od {filaments.length} filamenata
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -18,11 +18,11 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
|
||||
const [sortField, setSortField] = useState<string>('color.name');
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
|
||||
const [filters, setFilters] = useState({
|
||||
brand: '',
|
||||
material: '',
|
||||
finish: '',
|
||||
color: '',
|
||||
storageCondition: '',
|
||||
isRefill: null as boolean | null,
|
||||
color: ''
|
||||
isRefill: null as boolean | null
|
||||
});
|
||||
|
||||
// Convert legacy filaments to V2 format for display
|
||||
@@ -78,8 +78,8 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
|
||||
|
||||
// Get unique values for filters
|
||||
const uniqueValues = useMemo(() => ({
|
||||
brands: [...new Set(normalizedFilaments.map(f => f.brand))].sort(),
|
||||
materials: [...new Set(normalizedFilaments.map(f => f.material.base))].sort(),
|
||||
finishes: [...new Set(normalizedFilaments.map(f => f.material.modifier).filter(Boolean))].sort() as string[],
|
||||
colors: [...new Set(normalizedFilaments.map(f => f.color.name))].sort()
|
||||
}), [normalizedFilaments]);
|
||||
|
||||
@@ -98,15 +98,13 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
|
||||
false; // SKU removed
|
||||
|
||||
// Other filters
|
||||
const matchesBrand = !filters.brand || filament.brand === filters.brand;
|
||||
const matchesMaterial = !filters.material ||
|
||||
filament.material.base === filters.material ||
|
||||
`${filament.material.base}-${filament.material.modifier}` === filters.material;
|
||||
const matchesMaterial = !filters.material || filament.material.base === filters.material;
|
||||
const matchesFinish = !filters.finish || filament.material.modifier === filters.finish;
|
||||
const matchesStorage = !filters.storageCondition || filament.condition.storageCondition === filters.storageCondition;
|
||||
const matchesRefill = filters.isRefill === null || filament.condition.isRefill === filters.isRefill;
|
||||
const matchesColor = !filters.color || filament.color.name === filters.color;
|
||||
|
||||
return matchesSearch && matchesBrand && matchesMaterial && matchesStorage && matchesRefill && matchesColor;
|
||||
return matchesSearch && matchesMaterial && matchesFinish && matchesStorage && matchesRefill && matchesColor;
|
||||
});
|
||||
|
||||
// Sort
|
||||
@@ -138,29 +136,6 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
|
||||
}
|
||||
};
|
||||
|
||||
// Inventory summary
|
||||
const inventorySummary = useMemo(() => {
|
||||
const summary = {
|
||||
totalSpools: 0,
|
||||
availableSpools: 0,
|
||||
vacuumCount: 0,
|
||||
openedCount: 0,
|
||||
refillCount: 0
|
||||
};
|
||||
|
||||
normalizedFilaments.forEach(f => {
|
||||
summary.totalSpools += f.inventory.total;
|
||||
summary.availableSpools += f.inventory.available;
|
||||
summary.vacuumCount += f.inventory.locations.vacuum;
|
||||
summary.openedCount += f.inventory.locations.opened;
|
||||
|
||||
if (f.condition.isRefill) {
|
||||
summary.refillCount += f.inventory.total;
|
||||
}
|
||||
});
|
||||
|
||||
return summary;
|
||||
}, [normalizedFilaments]);
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center py-8">Učitavanje...</div>;
|
||||
@@ -172,29 +147,6 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Inventory Summary */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Ukupno filamenta</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">{inventorySummary.totalSpools}</div>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Dostupno</div>
|
||||
<div className="text-2xl font-bold text-green-600 dark:text-green-400">{inventorySummary.availableSpools}</div>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Vakum</div>
|
||||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{inventorySummary.vacuumCount}</div>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Otvoreno</div>
|
||||
<div className="text-2xl font-bold text-orange-600 dark:text-orange-400">{inventorySummary.openedCount}</div>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Refill</div>
|
||||
<div className="text-2xl font-bold text-purple-600 dark:text-purple-400">{inventorySummary.refillCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="relative">
|
||||
@@ -217,45 +169,18 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
|
||||
uniqueValues={uniqueValues}
|
||||
/>
|
||||
|
||||
{/* Icon Legend */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
|
||||
<h3 className="text-base font-medium text-gray-700 dark:text-gray-300 mb-3 text-center">Legenda stanja:</h3>
|
||||
<div className="flex justify-center gap-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="transform scale-125">
|
||||
<InventoryBadge type="vacuum" count={1} />
|
||||
</div>
|
||||
<span className="text-gray-600 dark:text-gray-400 text-[15px]">Vakuum pakovanje</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="transform scale-125">
|
||||
<InventoryBadge type="opened" count={1} />
|
||||
</div>
|
||||
<span className="text-gray-600 dark:text-gray-400 text-[15px]">Otvoreno</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow">
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-900">
|
||||
<tr>
|
||||
<th onClick={() => handleSort('brand')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
Brend
|
||||
</th>
|
||||
<th onClick={() => handleSort('material.base')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
Materijal
|
||||
</th>
|
||||
<th onClick={() => handleSort('color.name')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
Boja
|
||||
</th>
|
||||
<th onClick={() => handleSort('inventory.total')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
Stanje
|
||||
</th>
|
||||
<th onClick={() => handleSort('weight.value')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
Težina
|
||||
</th>
|
||||
<th onClick={() => handleSort('pricing.purchasePrice')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
Cena
|
||||
</th>
|
||||
@@ -267,31 +192,12 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{filteredAndSortedFilaments.map(filament => (
|
||||
<tr key={filament.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
|
||||
{filament.brand}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<MaterialBadge base={filament.material.base} modifier={filament.material.modifier} />
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<ColorSwatch name={filament.color.name} hex={filament.color.hex} size="sm" />
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex gap-2">
|
||||
{filament.inventory.locations.vacuum > 0 && (
|
||||
<InventoryBadge type="vacuum" count={filament.inventory.locations.vacuum} />
|
||||
)}
|
||||
{filament.inventory.locations.opened > 0 && (
|
||||
<InventoryBadge type="opened" count={filament.inventory.locations.opened} />
|
||||
)}
|
||||
{filament.inventory.locations.printer > 0 && (
|
||||
<InventoryBadge type="printer" count={filament.inventory.locations.printer} />
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{filament.weight.value}{filament.weight.unit}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
|
||||
{(() => {
|
||||
// PLA Basic and Matte pricing logic
|
||||
|
||||
@@ -2,6 +2,14 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Next.js error overlay styles */
|
||||
[data-nextjs-dialog-backdrop] {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Prevent white flash on admin pages */
|
||||
@layer base {
|
||||
html {
|
||||
|
||||
Reference in New Issue
Block a user