Remove brand functionality and update Bambu Lab colors

- Remove brand field from entire codebase (frontend, backend, database)
- Update Bambu Lab colors to official list with correct hex values
- Clean up unused code and type definitions
- Add database migration to drop brand column
- Update search and filters to exclude brand references
- Ensure data persistence across all application layers

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: DaX <noreply@anthropic.com>
This commit is contained in:
DaX
2025-06-23 22:54:47 +02:00
parent 808ca077fa
commit e8f9a6c6e3
10 changed files with 199 additions and 105 deletions

View File

@@ -57,7 +57,7 @@ describe('UI Features Tests', () => {
const dashboardContent = readFileSync(adminDashboardPath, 'utf-8');
// Check for admin header
expect(dashboardContent).toContain('Admin Dashboard');
expect(dashboardContent).toContain('Admin');
expect(dashboardContent).toContain('Nazad na sajt');
expect(dashboardContent).toContain('Odjava');
});

View File

@@ -61,10 +61,9 @@ async function migrate() {
// Import filaments
for (const item of legacyData) {
await pool.query(
`INSERT INTO filaments (brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)`,
`INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
[
item.brand,
item.tip,
item.finish,
item.boja,

View File

@@ -132,13 +132,13 @@ app.get('/api/filaments', async (req, res) => {
});
app.post('/api/filaments', authenticateToken, async (req, res) => {
const { brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena } = req.body;
const { tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena } = req.body;
try {
const result = await pool.query(
`INSERT INTO filaments (brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10) RETURNING *`,
[brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina || 1, cena]
`INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9) RETURNING *`,
[tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina || 1, cena]
);
res.json(result.rows[0]);
} catch (error) {
@@ -149,16 +149,16 @@ app.post('/api/filaments', authenticateToken, async (req, res) => {
app.put('/api/filaments/:id', authenticateToken, async (req, res) => {
const { id } = req.params;
const { brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena } = req.body;
const { tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena } = req.body;
try {
const result = await pool.query(
`UPDATE filaments
SET brand = $1, tip = $2, finish = $3, boja = $4, boja_hex = $5,
refill = $6, vakum = $7, otvoreno = $8, kolicina = $9, cena = $10,
SET tip = $1, finish = $2, boja = $3, boja_hex = $4,
refill = $5, vakum = $6, otvoreno = $7, kolicina = $8, cena = $9,
updated_at = CURRENT_TIMESTAMP
WHERE id = $11 RETURNING *`,
[brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina || 1, cena, id]
WHERE id = $10 RETURNING *`,
[tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina || 1, cena, id]
);
res.json(result.rows[0]);
} catch (error) {

View File

@@ -156,7 +156,7 @@ export default function AdminDashboard() {
<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">Admin Dashboard</h1>
<h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white">Admin</h1>
<div className="flex flex-wrap gap-2 sm:gap-4 w-full sm:w-auto">
{!showAddForm && !editingFilament && (
<button
@@ -335,7 +335,6 @@ function FilamentForm({
onCancel: () => void
}) {
const [formData, setFormData] = useState({
brand: filament.brand || 'Bambu Lab', // Use existing brand or default to Bambu Lab
tip: filament.tip || '',
finish: filament.finish || '',
boja: filament.boja || '',
@@ -380,7 +379,6 @@ function FilamentForm({
// Update form when filament prop changes
useEffect(() => {
setFormData({
brand: filament.brand || '',
tip: filament.tip || '',
finish: filament.finish || '',
boja: filament.boja || '',
@@ -389,7 +387,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
});
}, [filament]);
@@ -448,9 +446,16 @@ function FilamentForm({
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 tip</option>
<option value="PLA">PLA</option>
<option value="PETG">PETG</option>
<option value="ABS">ABS</option>
<option value="ASA">ASA</option>
<option value="PA6">PA6</option>
<option value="PAHT">PAHT</option>
<option value="PC">PC</option>
<option value="PET">PET</option>
<option value="PETG">PETG</option>
<option value="PLA">PLA</option>
<option value="PPA">PPA</option>
<option value="PPS">PPS</option>
<option value="TPU">TPU</option>
</select>
</div>
@@ -465,13 +470,26 @@ function FilamentForm({
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 finish</option>
<option value="85A">85A</option>
<option value="90A">90A</option>
<option value="95A HF">95A HF</option>
<option value="Aero">Aero</option>
<option value="Basic">Basic</option>
<option value="Matte">Matte</option>
<option value="Silk">Silk</option>
<option value="Metal">Metal</option>
<option value="Sparkle">Sparkle</option>
<option value="Basic Gradient">Basic Gradient</option>
<option value="CF">CF</option>
<option value="FR">FR</option>
<option value="Galaxy">Galaxy</option>
<option value="GF">GF</option>
<option value="Glow">Glow</option>
<option value="Transparent">Transparent</option>
<option value="HF">HF</option>
<option value="Marble">Marble</option>
<option value="Matte">Matte</option>
<option value="Metal">Metal</option>
<option value="Silk Multi-Color">Silk Multi-Color</option>
<option value="Silk+">Silk+</option>
<option value="Sparkle">Sparkle</option>
<option value="Translucent">Translucent</option>
<option value="Wood">Wood</option>
</select>
</div>
@@ -484,13 +502,11 @@ function FilamentForm({
const selectedColorName = e.target.value;
let hexValue = formData.bojaHex;
// Only use Bambu Lab colors if BambuLab brand is selected
if (formData.brand === 'Bambu Lab') {
// Use Bambu Lab colors
const bambuHex = getColorHex(selectedColorName);
if (bambuHex !== "#000000") {
hexValue = bambuHex;
}
}
// Check available colors from database
const dbColor = availableColors.find(c => c.name === selectedColorName);
@@ -508,8 +524,8 @@ function FilamentForm({
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="">Izaberite boju</option>
{/* Show Bambu Lab colors only when BambuLab brand is selected */}
{formData.brand === 'Bambu Lab' && formData.finish && colorsByFinish[formData.finish as keyof typeof colorsByFinish] && (
{/* Show Bambu Lab colors based on finish */}
{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}>
@@ -520,7 +536,7 @@ function FilamentForm({
)}
{/* Show all available colors from database */}
{availableColors.length > 0 && (
<optgroup label={formData.brand === 'Bambu Lab' ? 'Ostale boje' : 'Dostupne boje'}>
<optgroup label='Ostale boje'>
{availableColors.map(color => (
<option key={color.id} value={color.name}>
{color.name}
@@ -542,7 +558,7 @@ function FilamentForm({
name="bojaHex"
value={formData.bojaHex || '#000000'}
onChange={handleChange}
disabled={!!(formData.brand === 'Bambu Lab' && formData.boja && formData.boja !== 'custom' && getColorHex(formData.boja) !== "#000000")}
disabled={!!(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 && (
@@ -565,8 +581,6 @@ function FilamentForm({
/>
</div>
{/* Cena and Checkboxes on same line */}
<div className="md:col-span-2 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">Cena</label>
<input
@@ -580,7 +594,7 @@ function FilamentForm({
</div>
{/* Checkboxes grouped together horizontally */}
<div className="flex items-end gap-6">
<div className="md:col-span-2 flex items-end gap-6">
<label className="flex items-center space-x-2 text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">
<input
type="checkbox"
@@ -614,7 +628,6 @@ function FilamentForm({
<span>Otvoreno</span>
</label>
</div>
</div>
<div className="md:col-span-2 flex justify-end gap-4 mt-4">
<button

View File

@@ -0,0 +1,2 @@
-- Migration to remove brand column from filaments table
ALTER TABLE filaments DROP COLUMN IF EXISTS brand CASCADE;

View File

@@ -15,7 +15,6 @@ CREATE TABLE colors (
-- Filaments table
CREATE TABLE filaments (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
brand VARCHAR(100) NOT NULL,
tip VARCHAR(50) NOT NULL,
finish VARCHAR(50) NOT NULL,
boja VARCHAR(100) NOT NULL,
@@ -31,7 +30,6 @@ CREATE TABLE filaments (
);
-- Create indexes for better performance
CREATE INDEX idx_filaments_brand ON filaments(brand);
CREATE INDEX idx_filaments_tip ON filaments(tip);
CREATE INDEX idx_filaments_boja ON filaments(boja);
CREATE INDEX idx_filaments_created_at ON filaments(created_at);

View File

@@ -45,7 +45,6 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
return {
id: legacy.id || `legacy-${Math.random().toString(36).substr(2, 9)}`,
brand: legacy.brand,
type: legacy.tip as any || 'PLA',
material,
color: { name: legacy.boja, hex: legacy.bojaHex || legacy.boja_hex || '#000000' },
@@ -91,7 +90,6 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
// Search filter
const searchLower = searchTerm.toLowerCase();
const matchesSearch =
filament.brand.toLowerCase().includes(searchLower) ||
filament.material.base.toLowerCase().includes(searchLower) ||
(filament.material.modifier?.toLowerCase().includes(searchLower)) ||
filament.color.name.toLowerCase().includes(searchLower) ||
@@ -152,7 +150,7 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
<div className="relative">
<input
type="text"
placeholder="Pretraži po brendu, materijalu, boji..."
placeholder="Pretraži po materijalu, boji..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-4 py-2 pl-10 pr-4 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500"

View File

@@ -4,42 +4,142 @@ export interface ColorMapping {
}
export const bambuLabColors: Record<string, ColorMapping> = {
// PLA Basic Colors
'Mistletoe Green': { hex: '#4F6359' },
'Indigo Purple': { hex: '#482960' },
'Alpine Green Sparkle': { hex: '#3F5443' },
'Apple Green': { hex: '#C6E188' },
'Arctic Whisper': { hex: '#ECF7F8' },
'Ash Grey': { hex: '#9B9EA0' },
'Aurora Purple': { hex: '#285BB7' },
'Azure': { hex: '#489FDF' },
'Baby Blue': { hex: '#AEC3ED' },
'Bambu Green': { hex: '#00AE42' },
'Beige': { hex: '#F7E6DE' },
'Black': { hex: '#000000' },
'Jade White': { hex: '#F5F5F5' },
'Gray': { hex: '#8C9091' },
'Grey': { hex: '#8C9091' },
'Red': { hex: '#C33F45' },
'Hot Pink': { hex: '#F5547C' },
'Black Walnut': { hex: '#4D4229' },
'Blaze': { hex: '#E78390' },
'Blue': { hex: '#0A2989' },
'Blue Grey': { hex: '#5B6579' },
'Blue Hawaii': { hex: '#739FE6' },
'Blueberry Bubblegum': { hex: '#BADCF4' },
'Bone White': { hex: '#C8C5B6' },
'Bright Green': { hex: '#BDCF00' },
'Brick Red': { hex: '#9F332A' },
'Bronze': { hex: '#847D48' },
'Brown': { hex: '#9D432C' },
'Burgundy Red': { hex: '#951E23' },
'Candy Green': { hex: '#408619' },
'Candy Red': { hex: '#BB3A2E' },
'Caramel': { hex: '#A4845C' },
'Champagne': { hex: '#EBD0B1' },
'Charcoal': { hex: '#000000' },
'Cherry Pink': { hex: '#E9B6CC' },
'Chocolate': { hex: '#4A3729' },
'Clay Brown': { hex: '#8E621A' },
'Clear': { hex: '#FAFAFA' },
'Clear Black': { hex: '#5A5161' },
'Cobalt Blue': { hex: '#0055B8' },
'Cobalt Blue Metallic': { hex: '#39699E' },
'Cocoa Brown': { hex: '#6F5034' },
'Copper Brown Metallic': { hex: '#AA6443' },
'Cotton Candy Cloud': { hex: '#E9E2EC' },
'Cream': { hex: '#F3E0B8' },
'Crimson Red Sparkle': { hex: '#792B36' },
'Cyan': { hex: '#0086D6' },
'Dark Blue': { hex: '#042F56' },
'Dark Brown': { hex: '#7D6556' },
'Dark Chocolate': { hex: '#4A3729' },
'Dark Gray': { hex: '#555555' },
'Dark Green': { hex: '#68724D' },
'Dark Red': { hex: '#BB3D43' },
'Dawn Radiance': { hex: '#C472A1' },
'Desert Tan': { hex: '#E8DBB7' },
'Dusk Glare': { hex: '#F6B790' },
'Forest Green': { hex: '#415520' },
'Frozen': { hex: '#A6DEF3' },
'Gilded Rose': { hex: '#ED982C' },
'Glow Blue': { hex: '#7AC0E9' },
'Glow Green': { hex: '#A1FFAC' },
'Glow Orange': { hex: '#FF9D5B' },
'Glow Pink': { hex: '#F17B8F' },
'Glow Yellow': { hex: '#F8FF80' },
'Gold': { hex: '#E4BD68' },
'Gray': { hex: '#8E9089' },
'Green': { hex: '#3B665E' },
'Hot Pink': { hex: '#F5547D' },
'Ice Blue': { hex: '#A3D8E1' },
'Indigo Blue': { hex: '#324585' },
'Indigo Purple': { hex: '#482A60' },
'Iridium Gold Metallic': { hex: '#B39B84' },
'Iris Purple': { hex: '#69398E' },
'Ivory White': { hex: '#FFFFFF' },
'Jade White': { hex: '#FFFFFF' },
'Jeans Blue': { hex: '#6E88BC' },
'Lake Blue': { hex: '#4672E4' },
'Latte Brown': { hex: '#D3B7A7' },
'Lava Gray': { hex: '#4D5054' },
'Lavender': { hex: '#B5AAD5' },
'Lemon Yellow': { hex: '#F7D959' },
'Light Blue': { hex: '#61B0FF' },
'Light Cyan': { hex: '#B9E3DF' },
'Light Gray': { hex: '#D0D2D4' },
'Light Jade': { hex: '#A4D6AD' },
'Lilac Purple': { hex: '#AE96D4' },
'Lime': { hex: '#C5ED48' },
'Lime Green': { hex: '#8EE43D' },
'Magenta': { hex: '#EC008C' },
'Malachite Green': { hex: '#16B08E' },
'Mandarin Orange': { hex: '#F99963' },
'Marine Blue': { hex: '#0078BF' },
'Maroon Red': { hex: '#0A2989' },
'Matcha Green': { hex: '#5C9748' },
'Mellow Yellow': { hex: '#EFDCAA' },
'Midnight Blaze': { hex: '#0047BB' },
'Mint': { hex: '#A5DAB7' },
'Mint Lime': { hex: '#BAF382' },
'Mistletoe Green': { hex: '#3F8E43' },
'Nardo Gray': { hex: '#747474' },
'Navy Blue': { hex: '#0C2340' },
'Nebulae': { hex: '#424379' },
'Neon City': { hex: '#0047BB' },
'Neon Green': { hex: '#ABFF1E' },
'Neon Orange': { hex: '#F68A1B' },
'Ochre Yellow': { hex: '#BC8B39' },
'Ocean to Meadow': { hex: '#A1E4CA' },
'Olive': { hex: '#748C45' },
'Onyx Black Sparkle': { hex: '#2D2B28' },
'Orange': { hex: '#FF6A13' },
'Oxide Green Metallic': { hex: '#1D7C6A' },
'Peanut Brown': { hex: '#7E5A1F' },
'Pink': { hex: '#F55A74' },
'Pink Citrus': { hex: '#F8C4BC' },
'Plum': { hex: '#851A52' },
'Pumpkin Orange': { hex: '#FF8E16' },
'Purple': { hex: '#5E43B7' },
'Red': { hex: '#C12E1F' },
'Red Granite': { hex: '#AD4E38' },
'Rose Gold': { hex: '#B29593' },
'Rosewood': { hex: '#472A22' },
'Royal Blue': { hex: '#2842AD' },
'Royal Purple Sparkle': { hex: '#483D8B' },
'Sakura Pink': { hex: '#E8AFCF' },
'Scarlet Red': { hex: '#DE4343' },
'Silver': { hex: '#A6A9AA' },
'Sky Blue': { hex: '#73B2E5' },
'Slate Gray Sparkle': { hex: '#8E9089' },
'Solar Breeze': { hex: '#F3D9D5' },
'South Beach': { hex: '#468791' },
'Sunflower Yellow': { hex: '#FEC601' },
'Tangerine Yellow': { hex: '#FFC72C' },
'Teal': { hex: '#77EDD7' },
'Terracotta': { hex: '#A25A37' },
'Titan Gray': { hex: '#606367' },
'Transparent': { hex: '#FFFFFF' },
'Turquoise': { hex: '#00B1B7' },
'Velvet Eclipse': { hex: '#000000' },
'Violet Purple': { hex: '#583061' },
'White': { hex: '#FFFFFF' },
'Cotton Candy Cloud': { hex: ['#E7C1D5', '#8EC9E9'], isGradient: true },
'Sunflower Yellow': { hex: '#FEC600' },
'Yellow': { hex: '#FFD700' },
'Magenta': { hex: '#FF00FF' },
'Beige': { hex: '#F5DEB3' },
'Cyan': { hex: '#00FFFF' },
// PLA Matte Colors
'Scarlet Red': { hex: '#FF2400' },
'Mandarin Orange': { hex: '#FF8C00' },
'Marine Blue': { hex: '#000080' },
'Charcoal': { hex: '#36454F' },
'Ivory White': { hex: '#FFFFF0' },
// Additional colors from filamentcolors.xyz
'Orange': { hex: '#FF7146' },
'Blue': { hex: '#4F9CCC' },
'Green': { hex: '#4F6359' },
'Dark Green': { hex: '#656A4D' },
'Alpine Green': { hex: '#4F6359' },
'Dark Gray': { hex: '#616364' },
'Dark Grey': { hex: '#616364' },
'Blue Gray': { hex: '#647988' },
'Blue Grey': { hex: '#647988' },
'Translucent Orange': { hex: '#EF8E5B' },
'White Marble': { hex: '#F7F3F0' },
'White Oak': { hex: '#D2CCA2' },
'Yellow': { hex: '#F4EE2A' },
// Default fallback
'Unknown': { hex: '#CCCCCC' }
@@ -85,17 +185,3 @@ export function getColorStyle(colorMapping: ColorMapping): React.CSSProperties {
backgroundColor: Array.isArray(colorMapping.hex) ? colorMapping.hex[0] : colorMapping.hex
};
}
export function getContrastColor(hexColor: string): string {
// Convert hex to RGB
const hex = hexColor.replace('#', '');
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
// Calculate relative luminance
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
// Return black or white based on luminance
return luminance > 0.5 ? '#000000' : '#FFFFFF';
}

View File

@@ -1,6 +1,5 @@
export interface Filament {
id?: string;
brand: string;
tip: string;
finish: string;
boja: string;

View File

@@ -67,7 +67,6 @@ export interface FilamentV2 {
id: string;
// Product Info
brand: string;
type: MaterialBase;
material: Material;
color: Color;