1d3d11afec
- Restructure from single filament table to multi-category product catalog (filamenti, stampaci, ploce, mlaznice, delovi, oprema) - Add shared layout components (SiteHeader, SiteFooter, CategoryNav, Breadcrumb) - Add reusable UI primitives (Badge, Button, Card, Modal, PriceDisplay, EmptyState) - Add catalog components (CatalogPage, ProductTable, ProductGrid, FilamentCard, ProductCard) - Add admin dashboard with sidebar navigation and category management - Add product API endpoints and database migrations - Add SEO pages (politika-privatnosti, uslovi-koriscenja, robots.txt, sitemap.xml) - Fix light mode: gradient text contrast, category nav accessibility, surface tokens, card shadows, CTA section theming
449 lines
16 KiB
TypeScript
449 lines
16 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { colorService } from '@/src/services/api';
|
|
import { bambuLabColors, getColorHex } from '@/src/data/bambuLabColorsComplete';
|
|
import { BulkPriceEditor } from '@/src/components/BulkPriceEditor';
|
|
import '@/src/styles/select.css';
|
|
|
|
interface Color {
|
|
id: string;
|
|
name: string;
|
|
hex: string;
|
|
cena_refill?: number;
|
|
cena_spulna?: number;
|
|
createdAt?: string;
|
|
updatedAt?: string;
|
|
}
|
|
|
|
export default function BojePage() {
|
|
const [colors, setColors] = useState<Color[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
const [editingColor, setEditingColor] = useState<Color | null>(null);
|
|
const [showAddForm, setShowAddForm] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [selectedColors, setSelectedColors] = useState<Set<string>>(new Set());
|
|
|
|
// Fetch colors
|
|
const fetchColors = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const colors = await colorService.getAll();
|
|
setColors(colors.sort((a: Color, b: Color) => a.name.localeCompare(b.name)));
|
|
} catch (err) {
|
|
setError('Greska pri ucitavanju boja');
|
|
console.error('Fetch error:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchColors();
|
|
}, []);
|
|
|
|
const handleSave = async (color: Partial<Color>) => {
|
|
try {
|
|
if (color.id) {
|
|
await colorService.update(color.id, {
|
|
name: color.name!,
|
|
hex: color.hex!,
|
|
cena_refill: color.cena_refill,
|
|
cena_spulna: color.cena_spulna
|
|
});
|
|
} else {
|
|
await colorService.create({
|
|
name: color.name!,
|
|
hex: color.hex!,
|
|
cena_refill: color.cena_refill,
|
|
cena_spulna: color.cena_spulna
|
|
});
|
|
}
|
|
|
|
setEditingColor(null);
|
|
setShowAddForm(false);
|
|
fetchColors();
|
|
} catch (err) {
|
|
setError('Greska pri cuvanju boje');
|
|
console.error('Save error:', err);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm('Da li ste sigurni da zelite obrisati ovu boju?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await colorService.delete(id);
|
|
fetchColors();
|
|
} catch (err) {
|
|
setError('Greska pri brisanju boje');
|
|
console.error('Delete error:', err);
|
|
}
|
|
};
|
|
|
|
const handleBulkDelete = async () => {
|
|
if (selectedColors.size === 0) {
|
|
setError('Molimo izaberite boje za brisanje');
|
|
return;
|
|
}
|
|
|
|
if (!confirm(`Da li ste sigurni da zelite obrisati ${selectedColors.size} boja?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await Promise.all(Array.from(selectedColors).map(id => colorService.delete(id)));
|
|
setSelectedColors(new Set());
|
|
fetchColors();
|
|
} catch (err) {
|
|
setError('Greska pri brisanju boja');
|
|
console.error('Bulk delete error:', err);
|
|
}
|
|
};
|
|
|
|
const toggleColorSelection = (colorId: string) => {
|
|
const newSelection = new Set(selectedColors);
|
|
if (newSelection.has(colorId)) {
|
|
newSelection.delete(colorId);
|
|
} else {
|
|
newSelection.add(colorId);
|
|
}
|
|
setSelectedColors(newSelection);
|
|
};
|
|
|
|
const toggleSelectAll = () => {
|
|
const filteredColors = colors.filter(color =>
|
|
color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
color.hex.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
const allFilteredSelected = filteredColors.every(c => selectedColors.has(c.id));
|
|
|
|
if (allFilteredSelected) {
|
|
setSelectedColors(new Set());
|
|
} else {
|
|
setSelectedColors(new Set(filteredColors.map(c => c.id)));
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-white/40">Ucitavanje...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Page Header */}
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Upravljanje bojama</h1>
|
|
<p className="text-white/40 mt-1">{colors.length} boja ukupno</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{!showAddForm && !editingColor && (
|
|
<button
|
|
onClick={() => setShowAddForm(true)}
|
|
className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
|
|
>
|
|
Dodaj novu boju
|
|
</button>
|
|
)}
|
|
<BulkPriceEditor colors={colors} onUpdate={fetchColors} />
|
|
{selectedColors.size > 0 && (
|
|
<button
|
|
onClick={handleBulkDelete}
|
|
className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
|
|
>
|
|
Obrisi izabrane ({selectedColors.size})
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-4 bg-red-900/20 text-red-400 rounded">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Add Form */}
|
|
{showAddForm && (
|
|
<ColorForm
|
|
color={{}}
|
|
onSave={handleSave}
|
|
onCancel={() => {
|
|
setShowAddForm(false);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Search Bar */}
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Pretrazi boje..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full px-4 py-2 pl-10 pr-4 text-white/60 bg-white/[0.04] border border-white/[0.08] rounded-2xl focus:outline-none focus:border-blue-500"
|
|
/>
|
|
<svg className="absolute left-3 top-2.5 h-5 w-5 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Colors Table */}
|
|
<div className="overflow-x-auto bg-white/[0.04] rounded-2xl shadow">
|
|
<table className="min-w-full divide-y divide-white/[0.06]">
|
|
<thead className="bg-white/[0.06]">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left">
|
|
<input
|
|
type="checkbox"
|
|
checked={(() => {
|
|
const filtered = colors.filter(color =>
|
|
color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
color.hex.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
return filtered.length > 0 && filtered.every(c => selectedColors.has(c.id));
|
|
})()}
|
|
onChange={toggleSelectAll}
|
|
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/[0.06] dark:border-white/[0.08]"
|
|
/>
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Boja</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Naziv</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Hex kod</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Cena Refil</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Cena Spulna</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Akcije</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white/[0.04] divide-y divide-white/[0.06]">
|
|
{colors
|
|
.filter(color =>
|
|
color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
color.hex.toLowerCase().includes(searchTerm.toLowerCase())
|
|
)
|
|
.map((color) => (
|
|
<tr key={color.id} className="hover:bg-white/[0.06]">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedColors.has(color.id)}
|
|
onChange={() => toggleColorSelection(color.id)}
|
|
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/[0.06] dark:border-white/[0.08]"
|
|
/>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div
|
|
className="w-10 h-10 rounded border-2 border-white/[0.08]"
|
|
style={{ backgroundColor: color.hex }}
|
|
/>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-white/90">{color.name}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-white/90">{color.hex}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-400">
|
|
{(color.cena_refill || 3499).toLocaleString('sr-RS')} RSD
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-400">
|
|
{(color.cena_spulna || 3999).toLocaleString('sr-RS')} RSD
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<button
|
|
onClick={() => setEditingColor(color)}
|
|
className="text-blue-400 hover:text-blue-300 mr-3"
|
|
title="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-400 hover:text-red-300"
|
|
title="Obrisi"
|
|
>
|
|
<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>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Edit Modal */}
|
|
{editingColor && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white/[0.04] rounded-2xl shadow-xl max-w-md w-full max-h-[90vh] overflow-auto">
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold mb-4 text-white">Izmeni boju</h3>
|
|
<ColorForm
|
|
color={editingColor}
|
|
onSave={(color) => {
|
|
handleSave(color);
|
|
setEditingColor(null);
|
|
}}
|
|
onCancel={() => setEditingColor(null)}
|
|
isModal={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Color Form Component
|
|
function ColorForm({
|
|
color,
|
|
onSave,
|
|
onCancel,
|
|
isModal = false
|
|
}: {
|
|
color: Partial<Color>,
|
|
onSave: (color: Partial<Color>) => void,
|
|
onCancel: () => void,
|
|
isModal?: boolean
|
|
}) {
|
|
const [formData, setFormData] = useState({
|
|
name: color.name || '',
|
|
hex: color.hex || '#000000',
|
|
cena_refill: color.cena_refill || 3499,
|
|
cena_spulna: color.cena_spulna || 3999,
|
|
});
|
|
|
|
const isBambuLabColor = !!(formData.name && Object.prototype.hasOwnProperty.call(bambuLabColors, formData.name));
|
|
const bambuHex = formData.name ? getColorHex(formData.name) : null;
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value, type } = e.target;
|
|
setFormData({
|
|
...formData,
|
|
[name]: type === 'number' ? parseInt(value) || 0 : value
|
|
});
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const hexToSave = isBambuLabColor && bambuHex ? bambuHex : formData.hex;
|
|
onSave({
|
|
...color,
|
|
name: formData.name,
|
|
hex: hexToSave,
|
|
cena_refill: formData.cena_refill,
|
|
cena_spulna: formData.cena_spulna
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className={isModal ? "" : "p-6 bg-white/[0.04] rounded-2xl shadow"}>
|
|
{!isModal && (
|
|
<h2 className="text-xl font-bold mb-4 text-white">
|
|
{color.id ? 'Izmeni boju' : 'Dodaj novu boju'}
|
|
</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-white/60">Naziv boje</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
required
|
|
placeholder="npr. Crvena"
|
|
className="w-full px-3 py-2 border border-white/[0.08] rounded-md bg-white/[0.06] text-white/90 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-white/60">Hex kod boje</label>
|
|
<div className="flex gap-2 items-center">
|
|
<input
|
|
type="color"
|
|
name="hex"
|
|
value={isBambuLabColor && bambuHex ? bambuHex : formData.hex}
|
|
onChange={handleChange}
|
|
disabled={isBambuLabColor}
|
|
className={`w-12 h-12 p-1 border-2 border-white/[0.08] rounded-md ${isBambuLabColor ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
|
|
style={{ backgroundColor: isBambuLabColor && bambuHex ? bambuHex : formData.hex }}
|
|
/>
|
|
<input
|
|
type="text"
|
|
name="hex"
|
|
value={isBambuLabColor && bambuHex ? bambuHex : formData.hex}
|
|
onChange={handleChange}
|
|
required
|
|
readOnly={isBambuLabColor}
|
|
pattern="^#[0-9A-Fa-f]{6}$"
|
|
placeholder="#000000"
|
|
className={`flex-1 px-3 py-2 border border-white/[0.08] rounded-md bg-white/[0.06] text-white/90 focus:outline-none focus:ring-2 focus:ring-blue-500 ${isBambuLabColor ? 'bg-[#060a14] cursor-not-allowed' : ''}`}
|
|
/>
|
|
</div>
|
|
{isBambuLabColor && (
|
|
<p className="text-xs text-white/40 mt-1">
|
|
Bambu Lab predefinisana boja - hex kod se ne moze menjati
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-white/60">Cena Refil</label>
|
|
<input
|
|
type="number"
|
|
name="cena_refill"
|
|
value={formData.cena_refill}
|
|
onChange={handleChange}
|
|
required
|
|
min="0"
|
|
step="1"
|
|
placeholder="3499"
|
|
className="w-full px-3 py-2 border border-white/[0.08] rounded-md bg-white/[0.06] text-white/90 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-white/60">Cena Spulna</label>
|
|
<input
|
|
type="number"
|
|
name="cena_spulna"
|
|
value={formData.cena_spulna}
|
|
onChange={handleChange}
|
|
required
|
|
min="0"
|
|
step="1"
|
|
placeholder="3999"
|
|
className="w-full px-3 py-2 border border-white/[0.08] rounded-md bg-white/[0.06] text-white/90 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2 flex justify-end gap-4 mt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="px-4 py-2 bg-white/[0.08] text-white/70 rounded-xl hover:bg-white/[0.12] transition-colors"
|
|
>
|
|
Otkazi
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
|
>
|
|
Sacuvaj
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|