/** * @file App.jsx * @description Główny plik aplikacji MAKE3D. Zawiera pełny system e-commerce: * katalog, koszyk, zamówienia, profile użytkowników oraz potężny panel administracyjny. * Wersja zoptymalizowana pod urządzenia mobilne (RWD). */ const { useState, useEffect, useMemo, useCallback, useRef, Fragment } = React; const sb = window.supabaseClient; // ============================================================================ // 1. KONFIGURACJA I STAŁE SYSTEMOWE // ============================================================================ const ADMIN_EMAIL = 'make3d.kontakt@gmail.com'; const BLIK_NUMBER = '502 152 556'; const DELIVERY_FEE = 16.00; const FREE_DELIVERY_THRESHOLD = 60.00; // Darmowa dostawa powyżej tej kwoty // ============================================================================ // 2. SYSTEM STYLÓW (UI KIT) // ============================================================================ const Theme = { bg: "bg-[#F8F9FA]", text: "text-slate-900", card: "bg-white border border-gray-100/80 rounded-[2rem] md:rounded-[3.5rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden transition-all duration-500", input: "w-full bg-gray-50/80 border-2 border-gray-100/50 focus:border-purple-300 focus:bg-white p-4 md:p-5 rounded-2xl font-bold text-sm outline-none transition-all duration-300", select: "w-full bg-gray-50/80 border-2 border-gray-100/50 focus:border-purple-300 focus:bg-white p-4 md:p-5 rounded-2xl font-bold text-sm outline-none transition-all duration-300 appearance-none", btnPrimary: "bg-slate-900 text-white hover:bg-purple-600 px-6 md:px-8 py-4 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] transition-all duration-300 active:scale-95 disabled:opacity-30 disabled:hover:bg-slate-900 disabled:cursor-not-allowed shadow-xl shadow-black/10 hover:shadow-purple-500/20", btnGhost: "bg-transparent border-2 border-gray-200 text-gray-500 hover:border-slate-900 hover:text-slate-900 px-6 md:px-8 py-4 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] transition-all duration-300 active:scale-95 disabled:opacity-30", btnDanger: "bg-rose-50 text-rose-500 hover:bg-rose-500 hover:text-white px-6 md:px-8 py-4 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] transition-all duration-300 active:scale-95", badge: (type) => { const s = { purple: "bg-purple-600 text-white shadow-lg shadow-purple-200/50 border border-purple-500", green: "bg-emerald-500 text-white shadow-lg shadow-emerald-200/50 border border-emerald-400", rose: "bg-rose-500 text-white shadow-lg shadow-rose-200/50 border border-rose-400", dark: "bg-slate-900 text-white shadow-lg shadow-slate-200/50", outline: "border-2 border-gray-100 text-gray-500 bg-white" }; return `px-3 md:px-4 py-1.5 rounded-full text-[8px] md:text-[9px] font-black uppercase tracking-widest ${s[type] || s.outline}`; } }; // ============================================================================ // 3. ZESTAW IKON SVG (Rozszerzony dla Mobile i Admina) // ============================================================================ const Icons = { Menu: () => , Search: () => , Cart: () => , User: () => , Trash: () => , Edit: () => , Package: () => , Check: () => , X: () => , Star: ({ filled }) => , LogOut: () => , Settings: () => , Clock: () => , Truck: () => , }; // ============================================================================ // 4. KOMPONENTY WSPÓŁDZIELONE (UI) // ============================================================================ /** * Komponent Przełącznika (Toggle) z pełną dostępnością. */ const ToggleSwitch = ({ checked, onChange, label }) => ( ); /** * Komponent Pustego Stanu (Empty State) - responsywny. */ const EmptyState = ({ icon, title, desc }) => (
{icon}

{title}

{desc &&

{desc}

}
); /** * Globalny Modal Systemowy */ const CustomModal = ({ isOpen, title, content, onConfirm, onCancel, confirmText = "Tak", cancelText = "Anuluj", isDanger = false }) => { if (!isOpen) return null; return (

{title}

{content}

); }; // ============================================================================ // 5. GŁÓWNY KONTROLER APLIKACJI (App) // ============================================================================ function App() { // --- STANY RDZENIA --- const [view, setView] = useState('home'); // home, details, cart, orders, admin const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [toast, setToast] = useState({ show: false, msg: '', type: 'success' }); // --- STANY UI I MOBILNOŚCI --- const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [modalConfig, setModalConfig] = useState({ isOpen: false }); // --- DANE Z BAZY --- const [products, setProducts] = useState([]); const [categories, setCategories] = useState([]); const [orders, setOrders] = useState([]); const [reviews, setReviews] = useState([]); const [cart, setCart] = useState([]); const [activeOrderId, setActiveOrderId] = useState(null); // --- STANY SKLEPU --- const [activeCategory, setActiveCategory] = useState('Wszystkie'); const [search, setSearch] = useState(''); const [sortBy, setSortBy] = useState('newest'); // newest, price_asc, price_desc // --- STANY PRODUKTU --- const [selectedProduct, setSelectedProduct] = useState(null); const [selectedVariant, setSelectedVariant] = useState(null); const [quantity, setQuantity] = useState(1); // ========================================== // INICJALIZACJA I POBIERANIE DANYCH // ========================================== useEffect(() => { const init = async () => { const { data: { session } } = await sb.auth.getSession(); setUser(session?.user ?? null); await refreshAllData(); // Odzyskaj koszyk z localStorage const savedCart = localStorage.getItem('make3d_cart'); if (savedCart) setCart(JSON.parse(savedCart)); setLoading(false); }; init(); const { data: { subscription } } = sb.auth.onAuthStateChange((_e, s) => { setUser(s?.user ?? null); if (!s && view === 'admin') setView('home'); }); return () => subscription.unsubscribe(); }, [view]); // Zapis koszyka useEffect(() => { if (!loading) localStorage.setItem('make3d_cart', JSON.stringify(cart)); }, [cart, loading]); // Blokada scrolla gdy menu mobilne otwarte useEffect(() => { if (isMobileMenuOpen) document.body.style.overflow = 'hidden'; else document.body.style.overflow = 'unset'; return () => { document.body.style.overflow = 'unset'; } }, [isMobileMenuOpen]); const refreshAllData = async () => { const [pResp, cResp, oResp, rResp] = await Promise.all([ sb.from('products').select('*, product_variants(*)').order('created_at', { ascending: false }), sb.from('categories').select('*').order('name'), sb.from('orders').select('*').order('created_at', { ascending: false }), sb.from('reviews').select('*').order('created_at', { ascending: false }) ]); setProducts(pResp.data || []); setCategories(cResp.data || []); setOrders(oResp.data || []); setReviews(rResp.data || []); }; // ========================================== // NARZĘDZIA POMOCNICZE // ========================================== const showToast = (msg, type = 'success') => { setToast({ show: true, msg, type }); setTimeout(() => setToast({ show: false, msg: '', type: 'success' }), 4000); }; const confirmAction = (title, content, onConfirm, isDanger = false) => { setModalConfig({ isOpen: true, title, content, isDanger, onConfirm: () => { onConfirm(); setModalConfig({ isOpen: false }); }, onCancel: () => setModalConfig({ isOpen: false }) }); }; const navigateTo = (newView) => { setView(newView); setIsMobileMenuOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); }; // ... tutaj kończy się funkcja navigateTo // Funkcja sukcesu płatności // Pomocnicza funkcja walidacji const validateAddress = () => { const fields = { name: document.getElementById('chk-name')?.value?.trim(), street: document.getElementById('chk-street')?.value?.trim(), zip: document.getElementById('chk-zip')?.value?.trim(), city: document.getElementById('chk-city')?.value?.trim(), phone: document.getElementById('chk-phone')?.value?.trim() }; if (Object.values(fields).some(val => !val)) { return null; } return fields; }; const finalizeOrderUI = async (msg, type = "success") => { setCart([]); localStorage.removeItem('make3d_cart'); showToast(msg, type); await refreshAllData(); setView('orders'); }; // Dodaj stan w głównym komponencie, jeśli go nie masz: // const [activeOrderId, setActiveOrderId] = useState(null); const [checkoutData, setCheckoutData] = useState({ street: '', zip: '', city: '', phone: '' }); useEffect(() => { // 1. Warunki wejściowe if (!window.paypal || !user || cart.length === 0) return; const container = document.getElementById("paypal-button-container"); if (!container) return; // Zapobieganie dublowaniu przycisków container.innerHTML = ""; window.paypal.Buttons({ style: { layout: "vertical", color: "gold", shape: "rect", label: "pay", }, createOrder: async () => { // Ważne: upewnij się, że wysyłasz poprawne dane const { data, error } = await sb.functions.invoke("Paypal-Buy", { body: { action: "create", amount: cartTotal, // musi być np. 50.00 customer_email: user.email, items: cart.map(i => `${i.name} (${i.qty})`).join(", "), address: checkoutData, // upewnij się, że to obiekt {street, city, zip} }, }); if (error || !data?.paypalOrderId) { console.error("Błąd funkcji:", error); throw new Error("Nie udało się utworzyć zamówienia w systemie."); } // Zapisujemy ID z naszej bazy w pamięci, by użyć go przy Capture window.currentDbOrderId = data.dbOrderId; return data.paypalOrderId; }, onApprove: async (data) => { try { const { data: captureData, error } = await sb.functions.invoke("Paypal-Buy", { body: { action: "capture", paypalOrderId: data.orderID, dbOrderId: window.currentDbOrderId, }, }); if (error) throw error; showToast("Płatność zaakceptowana!", "success"); setCart([]); setTimeout(() => setView("orders"), 1000); } catch (err) { console.error("Capture error:", err); showToast("Błąd podczas finalizacji płatności", "error"); } }, onCancel: () => showToast("Płatność została anulowana", "info"), onError: (err) => { console.error("PayPal SDK Error:", err); showToast("Wystąpił błąd z systemem PayPal", "error"); } }).render("#paypal-button-container"); return () => { if (container) container.innerHTML = ""; }; }, [view, user, cart, checkoutData, cartTotal]); // ZARAZ POD TYM POWINIENEŚ MIEĆ: // if (loading) { return ... } // return ( ... ) // ========================================== // LOGIKA KOSZYKA // ========================================== const handleAddToCart = () => { if (!selectedProduct.is_available) return showToast("PRODUKT NIEDOSTĘPNY", "error"); const hasVariants = selectedProduct.product_variants?.length > 0; if (hasVariants) { if (!selectedVariant) return showToast("WYBIERZ KOLOR/WARIANT", "error"); if (!selectedVariant.is_available) return showToast("WYBRANY KOLOR NIEDOSTĘPNY", "error"); } const itemPrice = selectedVariant?.price ? parseFloat(selectedVariant.price) : parseFloat(selectedProduct.price); setCart(prev => [...prev, { cartId: crypto.randomUUID(), productId: selectedProduct.id, name: selectedProduct.name, variantId: selectedVariant?.id || null, variantName: selectedVariant?.color_name || 'Standard', price: itemPrice, img: selectedVariant?.image_url || selectedProduct.image_url, qty: quantity }]); showToast("DODANO DO KOSZYKA!"); }; const removeFromCart = (cartId) => setCart(prev => prev.filter(i => i.cartId !== cartId)); const cartSubtotal = cart.reduce((sum, item) => sum + (item.price * item.qty), 0); const cartDelivery = cartSubtotal >= FREE_DELIVERY_THRESHOLD || cartSubtotal === 0 ? 0 : DELIVERY_FEE; const cartTotal = cartSubtotal + cartDelivery; // ========================================== // LOGIKA RENDEROWANIA SKLEPU // ========================================== const processedProducts = useMemo(() => { let result = [...products]; if (activeCategory !== 'Wszystkie') result = result.filter(p => p.category === activeCategory); if (search.trim()) { const s = search.toLowerCase(); result = result.filter(p => p.name.toLowerCase().includes(s) || (p.description?.toLowerCase().includes(s))); } switch (sortBy) { case 'price_asc': result.sort((a, b) => parseFloat(a.price) - parseFloat(b.price)); break; case 'price_desc': result.sort((a, b) => parseFloat(b.price) - parseFloat(a.price)); break; default: result.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); break; } return result; }, [products, activeCategory, search, sortBy]); // ========================================== // EKRAN ŁADOWANIA // ========================================== if (loading) { return (
{/* Warstwa tła - subtelny gradient w tle, żeby nie było płasko */}
{/* Nowoczesny Loader: Ring z efektem poświaty */}
{/* Zewnętrzny pierścień (statyczny/wolny) */}
{/* Wewnętrzny pierścień (szybki spinner) */}
{/* Środkowy punkt (pulsujący) */}
{/* Tekst ładowania w Twoim stylu */}

Ładowanie.

MAKE3D Shop

{/* Pasek postępu na dole (opcjonalny detal dla klimatu) */}
); } const isAdmin = user?.email === ADMIN_EMAIL; // ============================================================================ // GŁÓWNY RENDER APLIKACJI // ============================================================================ return (
{/* Modal Globalny */} {/* Powiadomienia (Toast) */}
{toast.type === 'error' ? : } {toast.msg}
{/* ========================================== */} {/* NAWIGACJA (DESKTOP + MOBILE) */} {/* ========================================== */} {/* --- MENU MOBILNE (DRAWER) --- */}
setIsMobileMenuOpen(false)}>

MAKE3D

{user && ( )} {isAdmin && ( )}
{user ? (

{user.user_metadata?.full_name || 'Klient'}

{user.email}

) : (

Zaloguj się, aby śledzić zamówienia.

)}
{/* ========================================== */} {/* GŁÓWNY KONTENER TREŚCI */} {/* ========================================== */}
{/* ------------------------------------------ */} {/* WIDOK 1: STRONA GŁÓWNA / KATALOG */} {/* ------------------------------------------ */} {view === 'home' && (
{/* Wyszukiwarka i Filtry - Mobile Optimized */}
{/* Kategorie (Scrollable on mobile) */}
{categories.map(c => ( ))}
{/* Szukaj i Sortuj */}
{/* Kontener wyszukiwarki */}
{/* Ikona - przesunięta nieco bardziej w lewo dla balansu */} {/* Input - dodany style={{ paddingLeft: '3.5rem' }} który wymusi odstęp */} setSearch(e.target.value)} />
{/* Selektor sortowania */}
{/* Siatka Produktów */} {processedProducts.length > 0 ? (
{processedProducts.map(p => (
{ setSelectedProduct(p); setSelectedVariant(null); setQuantity(1); navigateTo('details'); }} className="group cursor-pointer">
{/* Plakietki (Badge) - Górna sekcja */}
{p.category}
{!p.is_available && Brak} {p.is_available && p.is_featured && HIT}
{/* Kontener Obrazka - Centrowanie i elastyczność */}
{p.name}
{/* Dolna sekcja: Nazwa i Cena */}

{p.name}

Cena

{parseFloat(p.price).toFixed(2)} zł

))}
) : ( } title="Brak Wyników" desc="Spróbuj zmienić filtry lub wyszukiwaną frazę." /> )}
)} {/* ------------------------------------------ */} {/* WIDOK 2: SZCZEGÓŁY PRODUKTU */} {/* ------------------------------------------ */} {view === 'details' && selectedProduct && (
{/* Zdjęcie Główne (Mobile Responsive) */}
{!selectedProduct.is_available && (
Niedostępny
)} {selectedProduct.name}
{/* Formularz i Opis */}
{selectedProduct.category}
{[1,2,3,4,5].map(i => )}
({reviews.filter(r=>r.product_id===selectedProduct.id).length} opinii)

{selectedProduct.name}

{selectedVariant ? parseFloat(selectedVariant.price).toFixed(2) : parseFloat(selectedProduct.price).toFixed(2)} zł

{selectedProduct.description || "Wysokiej jakości wydruk 3D wykonany w technologii FDM/SLA. Używamy wyłącznie sprawdzonych materiałów, gwarantując precyzję i trwałość."}

{/* Warianty / Kolory */} {selectedProduct.product_variants?.length > 0 && (

Wybierz Kolor:

{selectedProduct.product_variants.map(v => { const isSel = selectedVariant?.id === v.id; const isAvail = v.is_available; return ( ); })}
)} {/* Akcje (Ilość + Koszyk) */}
{quantity}
{/* Opinie - Skrócona wersja */}

Opinie Klientów

{reviews.filter(r => r.product_id === selectedProduct.id).slice(0,3).map(review => (

{review.user_name}

{new Date(review.created_at).toLocaleDateString('pl-PL')}

{[...Array(review.rating)].map((_, i) => )}

"{review.comment}"

))} {reviews.filter(r => r.product_id === selectedProduct.id).length === 0 && (

Jeszcze nikt nie ocenił tego produktu.

)}
)} {/* ------------------------------------------ */} {/* WIDOK 3: KOSZYK I CHECKOUT (Z PAYPAL) */} {/* ------------------------------------------ */} {view === 'cart' && (

Koszyk

{cart.length}
{cart.length === 0 ? (

Koszyk jest pusty

) : (
{cart.map((item) => (

{item.name}

{item.variantName}

{item.qty} × {item.price.toFixed(2)} zł

))}
{user ? (

Adres Dostawy

setCheckoutData({...checkoutData, street: e.target.value})} /> setCheckoutData({...checkoutData, zip: e.target.value})} />
setCheckoutData({...checkoutData, city: e.target.value})} />
+48 setCheckoutData({...checkoutData, phone: e.target.value.replace(/\D/g, '').slice(0, 9)})} />
Produkty {cartSubtotal.toFixed(2)} zł

Razem do zapłaty

{cartTotal.toFixed(2)} zł

) : (

Zaloguj się

)}
)}
)} {view === 'orders' && user && (

Twoja Historia

{orders.filter(o => o.customer_email === user.email).map((order) => { const s = order.status.toLowerCase(); const isUnpaid = s.includes('pending') || s.includes('oczekiwanie') || s.includes('czeka na opłatę'); return (
{order.status} #{order.id.slice(-8)}

Produkty:

{order.items}

Adres:

{order.address}

{parseFloat(order.total_price).toFixed(2)} zł

{isUnpaid && (
{activeOrderId === order.id ? (
) : ( )}
)}
); })}
)} {/* ------------------------------------------ */} {/* WIDOK 5: PANEL ADMINISTRATORA (POTĘŻNY) */} {/* ------------------------------------------ */} {view === 'admin' && isAdmin && ( )}
{/* ========================================== */} {/* STOPKA (FOOTER) */} {/* ========================================== */}
); } // ============================================================================ // 6. PANEL ADMINISTRATORA (ZAAWANSOWANY KOMPONENT) // ============================================================================ function AdminDashboard({ products, categories, orders, reviews, refresh, showToast, confirmAction }) { const [activeTab, setActiveTab] = useState('orders'); // orders, products, categories, reviews const stats = { totalRevenue: orders.filter(o => o.status === 'opłacone' || o.status === 'wysłane').reduce((sum, o) => sum + parseFloat(o.total_price), 0), pendingOrders: orders.filter(o => o.status === 'czeka na potwierdzenie').length, totalProducts: products.length, avgRating: reviews.length ? (reviews.reduce((s, r) => s + r.rating, 0) / reviews.length).toFixed(1) : 0 }; return (

Panel Administracyjny

{/* Kafelki Statystyk (Mobile Grid) */}

Przychód Netto

{stats.totalRevenue.toFixed(2)} zł

Aktywne Zamówienia

{stats.pendingOrders}

Asortyment

{stats.totalProducts}

Satysfakcja (Średnia)

{stats.avgRating}

{/* Nawigacja Zakładek Admina (Scrollable on Mobile) */}
{[ { id: 'orders', label: 'Zamówienia', icon: }, { id: 'products', label: 'Baza Produktów', icon: }, { id: 'categories', label: 'Kategorie', icon: }, { id: 'reviews', label: 'Opinie Klientów', icon: } ].map(tab => ( ))}
{/* ========================================== */} {/* ZAKŁADKA 1: ZARZĄDZANIE ZAMÓWIENIAMI */} {/* ========================================== */} {activeTab === 'orders' && (
{orders.length === 0 && } title="Pusto" desc="Brak zamówień w systemie." />} {orders.map(order => (
{/* Lewa strona: Dane zamówienia */}
STATUS: {order.status} Data: {new Date(order.created_at).toLocaleString('pl-PL')} | ID: #{order.id.slice(0,6)}

Produkty

{order.items}

Dane Klienta (Email)

{order.customer_email}

Adres Dostawy

{order.address}

{/* Prawa strona: Akcje i Status */}

Kwota Zamówienia

{parseFloat(order.total_price).toFixed(2)} zł

{/* Zmiana Statusu */}

Akcja operacyjna

{/* Numer Przesyłki */} {(order.status === 'opłacone' || order.status === 'wysłane') && (

Numer InPost/DPD

)} {/* PRZYCISK USUWANIA ZAMÓWIENIA */}
))}
)} {/* ========================================== */} {/* ZAKŁADKA 2: ASORTYMENT (PRODUKTY) */} {/* ========================================== */} {activeTab === 'products' && (
{/* Formularz Dodawania Nowego Produktu */}

Kreator Nowego Modelu

{/* Upload Zdjęcia */}
Wgraj miniaturę (JPG/PNG)
{/* Ukryty obrazek podglądu, który pokażemy skryptem */} { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { document.getElementById('new-p-preview').src = event.target.result; document.getElementById('new-p-preview').classList.remove('hidden'); document.getElementById('upload-placeholder').classList.add('hidden'); }; reader.readAsDataURL(file); } }} />
{/* Dane Tekstowe */}
{/* Lista Istniejących Produktów */}

Baza Produktów ({products.length})

{products.map(p => ( ))}
)} {/* ========================================== */} {/* ZAKŁADKA 3: KATEGORIE */} {/* ========================================== */} {activeTab === 'categories' && (

Dodaj Kategorię

Lista Kategorii

{categories.map(c => (
{c.name}
))} {categories.length === 0 &&

Brak kategorii w bazie.

}
)} {/* ========================================== */} {/* ZAKŁADKA 4: MODERACJA OPINII */} {/* ========================================== */} {activeTab === 'reviews' && (
{/* Stan pusty - gdy nie ma żadnych opinii */} {reviews.length === 0 ? ( } title="Brak Opinii" /> ) : ( reviews.map(r => { // Znalezienie produktu powiązanego z opinią const prod = products.find(p => p.id === r.product_id); // Funkcja usuwania z pełną obsługą błędów const handleDeleteReview = () => { confirmAction( "Usuń opinię", "Czy na pewno chcesz trwale usunąć ten komentarz? Tej operacji nie można cofnąć.", async () => { try { // Wykonanie usunięcia w bazie Supabase const { error } = await sb .from('reviews') .delete() .eq('id', r.id); if (error) throw error; // Jeśli sukces: powiadomienie i odświeżenie listy showToast("Opinia została usunięta"); if (typeof refresh === 'function') refresh(); } catch (err) { console.error("Błąd podczas usuwania opinii:", err.message); showToast("Błąd: Nie udało się usunąć opinii", "error"); } }, true // tryb Danger (czerwony przycisk w modalu) ); }; return (
{/* Nagłówek opinii: Autor i Model */}

Od: {r.user_name || 'Anonim'}

|

Model: {prod?.name || 'Usunięty Model'}

{/* System Gwiazdek (zawsze 5 ikon, kolorowane wg oceny) */}
{[...Array(5)].map((_, i) => ( ))}
{/* Treść opinii */}

"{r.comment}"

{/* Akcje */}
); }) )}
)}
); } // ============================================================================ // 7. KOMPONENT EDYCJI PRODUKTU (Wewnątrz Admina) // ============================================================================ function AdminProductRow({ product, categories, refresh, showToast, confirmAction, sb, Theme, ToggleSwitch, Icons }) { const [isEditing, setIsEditing] = useState(false); const [editData, setEditData] = useState({ name: product.name, price: product.price, category: product.category, is_available: product.is_available, is_featured: product.is_featured }); const [variants, setVariants] = useState(product.product_variants || []); const saveChanges = async () => { await sb.from('products').update({ name: editData.name, price: parseFloat(editData.price), category: editData.category, is_available: editData.is_available, is_featured: editData.is_featured }).eq('id', product.id); for (const v of variants) { let finalImgUrl = v.image_url; if (v.newFile) { const fName = `var_${Date.now()}_${v.newFile.name}`; await sb.storage.from('products').upload(fName, v.newFile); finalImgUrl = sb.storage.from('products').getPublicUrl(fName).data.publicUrl; } const payload = { product_id: product.id, color_name: v.color_name, price: v.price ? parseFloat(v.price) : parseFloat(editData.price), image_url: finalImgUrl, is_available: v.is_available }; if (v.isNew) await sb.from('product_variants').insert([payload]); else await sb.from('product_variants').update(payload).eq('id', v.id); } setIsEditing(false); refresh(); showToast("Pomyślnie zaktualizowano produkt."); }; if (!isEditing) { return (
{!product.is_available &&
}

{product.name}

{product.price} zł • {product.category} • Wariantów: {product.product_variants?.length || 0}

); } return (
Edycja: {product.name}
{/* Główne dane */}

Informacje Główne

setEditData({...editData, name: e.target.value})} />
setEditData({...editData, price: e.target.value})} />

Dostępność i Promocja

setEditData({...editData, is_available: v})} /> setEditData({...editData, is_featured: v})} />
{/* Warianty */}
Kolory i Warianty ({variants.length})
{variants.map((v, idx) => (
{v.newFile ? : (v.image_url ? : FOTO)} { const nv = [...variants]; nv[idx].newFile = e.target.files[0]; setVariants(nv); }} />
{ const nv = [...variants]; nv[idx].color_name = e.target.value; setVariants(nv); }} /> { const nv = [...variants]; nv[idx].price = e.target.value; setVariants(nv); }} />
{ const nv = [...variants]; nv[idx].is_available = val; setVariants(nv); }} />
))}
); } // Inicjalizacja React const root = ReactDOM.createRoot(document.getElementById('root')); root.render();