{ "components": [ { "slug": "navbar", "component_name": "Navigation Bar", "component_description": "Navbar pentru navigarea între paginile aplicației", "component_code": "", "component_script": "function navigateTo(slug) {\n sdk.navigate(slug);\n}\n\nconst navLinks = [\n { slug: 'dashboard', label: 'Dashboard', icon: '' },\n { slug: 'books', label: 'Cărți', icon: '' },\n { slug: 'add-book', label: 'Adaugă carte', icon: '' }\n];\n\nfunction getCurrentPageSlug() {\n const path = window.location.pathname;\n const parts = path.split('/');\n return parts[parts.length - 1] || 'dashboard';\n}\n\nfunction renderNavLinks() {\n const currentSlug = getCurrentPageSlug();\n const desktopContainer = document.getElementById('nav-links-desktop');\n const mobileContainer = document.getElementById('nav-links-mobile');\n if (!desktopContainer || !mobileContainer) return;\n\n desktopContainer.innerHTML = navLinks.map(link => {\n const isActive = currentSlug === link.slug;\n const activeClasses = 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-semibold';\n const inactiveClasses = 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-200';\n return ``;\n }).join('');\n\n mobileContainer.innerHTML = navLinks.map(link => {\n const isActive = currentSlug === link.slug;\n const activeClasses = 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-semibold';\n const inactiveClasses = 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700';\n return ``;\n }).join('');\n}\n\nfunction toggleMobileMenu() {\n const menu = document.getElementById('mobile-menu');\n const menuIcon = document.getElementById('menu-icon');\n const closeIcon = document.getElementById('close-icon');\n const isOpen = !menu.classList.contains('hidden');\n if (isOpen) {\n menu.classList.add('hidden');\n menuIcon.classList.remove('hidden');\n closeIcon.classList.add('hidden');\n } else {\n menu.classList.remove('hidden');\n menuIcon.classList.add('hidden');\n closeIcon.classList.remove('hidden');\n }\n}\n\nfunction closeMobileMenu() {\n const menu = document.getElementById('mobile-menu');\n const menuIcon = document.getElementById('menu-icon');\n const closeIcon = document.getElementById('close-icon');\n menu.classList.add('hidden');\n menuIcon.classList.remove('hidden');\n closeIcon.classList.add('hidden');\n}\n\nrenderNavLinks();" }, { "slug": "page-layout", "component_name": "Page Layout", "component_description": "Layout wrapper cu padding și max-width pentru conținutul paginilor", "component_code": "

" }, { "slug": "stats-cards", "component_name": "Stats Cards", "component_description": "Carduri cu statistici generale despre lecturi", "component_code": "

", "component_script": "async function loadStats() {\n try {\n const books = await sdk.getRecords('books');\n const totalBooks = books.length;\n const totalPages = books.reduce((sum, b) => sum + (b['page-count'] || 0), 0);\n const avgRating = totalBooks > 0 ? (books.reduce((sum, b) => sum + (b.rating || 0), 0) / totalBooks).toFixed(1) : '0.0';\n const thisYear = new Date().getFullYear();\n const booksThisYear = books.filter(b => b['date-read'] && new Date(b['date-read']).getFullYear() === thisYear).length;\n\n const stats = [\n { label: 'Cărți citite', value: totalBooks, icon: '', color: 'bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300' },\n { label: 'Pagini citite', value: totalPages, icon: '', color: 'bg-emerald-50 dark:bg-emerald-900/30 border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300' },\n { label: 'Rating mediu', value: avgRating, icon: '', color: 'bg-amber-50 dark:bg-amber-900/30 border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300' },\n { label: 'Cărți anul acesta', value: booksThisYear, icon: '', color: 'bg-rose-50 dark:bg-rose-900/30 border-rose-200 dark:border-rose-800 text-rose-700 dark:text-rose-300' }\n ];\n\n document.getElementById('stats-cards').innerHTML = stats.map(s => `\n

${s.label}

${s.value}

\n ${s.icon}\n

\n `).join('');\n } catch (error) {\n console.error('Eroare la încărcarea statisticilor:', error);\n }\n}\n\nloadStats();\nsdk.on('books:changed', loadStats);" }, { "slug": "recent-books", "component_name": "Recent Books", "component_description": "Lista ultimelor cărți adăugate", "component_code": "

Cărți recente

\n \n

Se încarcă...

", "component_script": "function navigateToBooks() {\n sdk.navigate('books');\n}\n\nasync function loadRecentBooks() {\n try {\n const books = await sdk.getRecords('books', {}, { sort: '-createdAt', limit: 5 });\n const container = document.getElementById('recent-books-list');\n if (books.length === 0) {\n container.innerHTML = '

Nu ai adăugat nicio carte încă.

';\n return;\n }\n container.innerHTML = books.map(b => {\n const stars = '⭐'.repeat(b.rating || 0);\n return `\n

${b.title || 'Fără titlu'}

${b.author || 'Autor necunoscut'}

${stars || '–'}

\n `;\n }).join('');\n } catch (error) {\n console.error('Eroare la încărcarea cărților recente:', error);\n }\n}\n\nfunction viewRecentBook(id) {\n sdk.navigate('book-detail', { recordId: id });\n}\n\nloadRecentBooks();\nsdk.on('books:changed', loadRecentBooks);" }, { "slug": "genre-chart", "component_name": "Genre Chart", "component_description": "Distribuția cărților pe genuri", "component_code": "

Distribuție pe genuri

Se încarcă...

", "component_script": "async function loadGenreChart() {\n try {\n const books = await sdk.getRecords('books');\n const container = document.getElementById('genre-chart');\n if (books.length === 0) {\n container.innerHTML = '

Nu ai adăugat nicio carte încă.

';\n return;\n }\n const genreCount = {};\n books.forEach(b => {\n const genre = b.genre || 'Neclasificat';\n genreCount[genre] = (genreCount[genre] || 0) + 1;\n });\n const sorted = Object.entries(genreCount).sort((a, b) => b[1] - a[1]);\n const max = sorted[0][1];\n const colors = ['bg-blue-500', 'bg-emerald-500', 'bg-amber-500', 'bg-rose-500', 'bg-purple-500', 'bg-cyan-500', 'bg-orange-500', 'bg-teal-500'];\n container.innerHTML = sorted.map(([genre, count], i) => {\n const pct = Math.round((count / max) * 100);\n const color = colors[i % colors.length];\n return `\n

\n ${genre}\n ${count} ${count === 1 ? 'carte' : 'cărți'}\n

\n `;\n }).join('');\n } catch (error) {\n console.error('Eroare la încărcarea chart-ului:', error);\n }\n}\n\nloadGenreChart();\nsdk.on('books:changed', loadGenreChart);" }, { "slug": "books-content", "component_name": "Books Page Layout", "component_description": "Layout complet cu titlu, panou lateral de filtre și grid de cărți", "component_code": "

\n \n

Cărți

\n \n

\n\n \n

\n \n

\n\n \n

\n \n \n\n \n

\n \n

Se încarcă cărțile...

", "component_script": "let allBooks = [];\n\nconst genreColors = {\n 'Ficțiune': { bg: 'bg-violet-100 dark:bg-violet-900/40', text: 'text-violet-700 dark:text-violet-300', border: 'border-l-violet-500 dark:border-l-violet-400', accent: 'bg-violet-500' },\n 'Non-ficțiune': { bg: 'bg-cyan-100 dark:bg-cyan-900/40', text: 'text-cyan-700 dark:text-cyan-300', border: 'border-l-cyan-500 dark:border-l-cyan-400', accent: 'bg-cyan-500' },\n 'Science Fiction': { bg: 'bg-indigo-100 dark:bg-indigo-900/40', text: 'text-indigo-700 dark:text-indigo-300', border: 'border-l-indigo-500 dark:border-l-indigo-400', accent: 'bg-indigo-500' },\n 'Fantasy': { bg: 'bg-purple-100 dark:bg-purple-900/40', text: 'text-purple-700 dark:text-purple-300', border: 'border-l-purple-500 dark:border-l-purple-400', accent: 'bg-purple-500' },\n 'Thriller': { bg: 'bg-red-100 dark:bg-red-900/40', text: 'text-red-700 dark:text-red-300', border: 'border-l-red-500 dark:border-l-red-400', accent: 'bg-red-500' },\n 'Mister': { bg: 'bg-slate-100 dark:bg-slate-900/40', text: 'text-slate-700 dark:text-slate-300', border: 'border-l-slate-500 dark:border-l-slate-400', accent: 'bg-slate-500' },\n 'Romance': { bg: 'bg-pink-100 dark:bg-pink-900/40', text: 'text-pink-700 dark:text-pink-300', border: 'border-l-pink-500 dark:border-l-pink-400', accent: 'bg-pink-500' },\n 'Istorie': { bg: 'bg-amber-100 dark:bg-amber-900/40', text: 'text-amber-700 dark:text-amber-300', border: 'border-l-amber-500 dark:border-l-amber-400', accent: 'bg-amber-500' },\n 'Biografie': { bg: 'bg-teal-100 dark:bg-teal-900/40', text: 'text-teal-700 dark:text-teal-300', border: 'border-l-teal-500 dark:border-l-teal-400', accent: 'bg-teal-500' },\n 'Dezvoltare personală': { bg: 'bg-emerald-100 dark:bg-emerald-900/40', text: 'text-emerald-700 dark:text-emerald-300', border: 'border-l-emerald-500 dark:border-l-emerald-400', accent: 'bg-emerald-500' },\n 'Filozofie': { bg: 'bg-gray-100 dark:bg-gray-900/40', text: 'text-gray-700 dark:text-gray-300', border: 'border-l-gray-500 dark:border-l-gray-400', accent: 'bg-gray-500' },\n 'Poezie': { bg: 'bg-fuchsia-100 dark:bg-fuchsia-900/40', text: 'text-fuchsia-700 dark:text-fuchsia-300', border: 'border-l-fuchsia-500 dark:border-l-fuchsia-400', accent: 'bg-fuchsia-500' },\n 'Clasic': { bg: 'bg-yellow-100 dark:bg-yellow-900/40', text: 'text-yellow-700 dark:text-yellow-300', border: 'border-l-yellow-500 dark:border-l-yellow-400', accent: 'bg-yellow-500' }\n};\nconst defaultGenreColor = { bg: 'bg-blue-100 dark:bg-blue-900/40', text: 'text-blue-700 dark:text-blue-300', border: 'border-l-blue-500 dark:border-l-blue-400', accent: 'bg-blue-500' };\n\nfunction getGenreColor(genre) {\n return genreColors[genre] || defaultGenreColor;\n}\n\nfunction goToAddBook() {\n sdk.navigate('add-book');\n}\n\nfunction viewBook(id) {\n sdk.navigate('book-detail', { recordId: id });\n}\n\nfunction editBook(id) {\n sdk.navigate('edit-book', { recordId: id });\n}\n\nfunction toggleFilters() {\n const sidebar = document.getElementById('filters-sidebar');\n const chevron = document.getElementById('filter-chevron');\n sidebar.classList.toggle('hidden');\n if (!sidebar.classList.contains('hidden')) {\n chevron.style.transform = 'rotate(180deg)';\n } else {\n chevron.style.transform = '';\n }\n}\n\nfunction updateFilterUI() {\n const search = document.getElementById('search-input').value;\n const genre = document.getElementById('genre-filter').value;\n const rating = document.getElementById('rating-filter').value;\n const resetBtn = document.getElementById('reset-btn');\n const badge = document.getElementById('active-filters-badge');\n const filterInfo = document.getElementById('filter-info');\n const filterInfoText = document.getElementById('filter-info-text');\n\n let activeCount = 0;\n if (search) activeCount++;\n if (genre) activeCount++;\n if (rating) activeCount++;\n\n if (activeCount > 0) {\n resetBtn.classList.remove('hidden');\n badge.classList.remove('hidden');\n badge.textContent = activeCount;\n filterInfo.classList.remove('hidden');\n const parts = [];\n if (search) parts.push('„' + search + '\"');\n if (genre) parts.push(genre);\n if (rating) parts.push('rating ≥ ' + rating);\n filterInfoText.textContent = 'Filtre active: ' + parts.join(', ');\n } else {\n resetBtn.classList.add('hidden');\n badge.classList.add('hidden');\n filterInfo.classList.add('hidden');\n }\n}\n\nfunction resetFilters() {\n document.getElementById('search-input').value = '';\n document.getElementById('genre-filter').value = '';\n document.getElementById('rating-filter').value = '';\n filterBooks();\n}\n\nasync function loadGenres() {\n try {\n const books = await sdk.getRecords('books');\n const genres = [...new Set(books.map(b => b.genre).filter(Boolean))].sort();\n const select = document.getElementById('genre-filter');\n select.innerHTML = '' + genres.map(g => ``).join('');\n } catch (error) {\n console.error(error);\n }\n}\n\nasync function loadBooks() {\n try {\n allBooks = await sdk.getRecords('books');\n loadGenres();\n renderBooks(allBooks);\n updateCount(allBooks.length, allBooks.length);\n } catch (error) {\n console.error('Eroare la încărcarea cărților:', error);\n }\n}\n\nfunction updateCount(filtered, total) {\n const el = document.getElementById('books-count');\n if (filtered === total) {\n el.textContent = total + (total === 1 ? ' carte' : ' cărți');\n } else {\n el.textContent = filtered + ' din ' + total + (total === 1 ? ' carte' : ' cărți');\n }\n}\n\nfunction filterBooks() {\n const search = document.getElementById('search-input').value.toLowerCase();\n const genre = document.getElementById('genre-filter').value;\n const ratingMin = parseInt(document.getElementById('rating-filter').value) || 0;\n\n const filtered = allBooks.filter(b => {\n const matchSearch = !search || (b.title || '').toLowerCase().includes(search) || (b.author || '').toLowerCase().includes(search);\n const matchGenre = !genre || b.genre === genre;\n const matchRating = (b.rating || 0) >= ratingMin;\n return matchSearch && matchGenre && matchRating;\n });\n renderBooks(filtered);\n updateCount(filtered.length, allBooks.length);\n updateFilterUI();\n}\n\nfunction renderBooks(books) {\n const container = document.getElementById('books-grid');\n if (!container) return;\n if (books.length === 0) {\n container.innerHTML = '

Nu s-au găsit cărți

Încearcă să modifici filtrele sau adaugă o carte nouă

';\n return;\n }\n container.innerHTML = books.map(b => {\n const gc = getGenreColor(b.genre);\n const starsFilled = b.rating ? '' + '★'.repeat(b.rating) + '' : '';\n const starsEmpty = b.rating ? '' + '☆'.repeat(5 - b.rating) + '' : '☆☆☆☆☆';\n const dateStr = b['date-read'] ? new Date(b['date-read']).toLocaleDateString('ro-RO', { day: 'numeric', month: 'short', year: 'numeric' }) : '';\n const initials = (b.title || '?').substring(0, 2).toUpperCase();\n return `\n

\n ${initials}\n

${b.title || 'Fără titlu'}

de ${b.author || 'Autor necunoscut'}

\n ${b.genre || 'Neclasificat'}\n ${starsFilled}${starsEmpty}\n

\n ${b.notes ? `

${b.notes}

` : ''}\n

\n ${b['page-count'] ? `${b['page-count']} pag` : ''}\n ${dateStr ? `${dateStr}` : ''}\n

\n \n \n \n

\n `;\n }).join('');\n}\n\nasync function deleteBook(id) {\n if (!confirm('Sigur vrei să ștergi această carte?')) return;\n try {\n await sdk.deleteRecord('books', id);\n sdk.emit('books:changed');\n loadBooks();\n } catch (error) {\n console.error('Eroare la ștergere:', error);\n }\n}\n\nloadBooks();\nsdk.on('books:changed', loadBooks);" }, { "slug": "add-book-form", "component_name": "Add Book Form", "component_description": "Formularul complet pentru adăugarea unei cărți noi", "component_code": "

Adaugă o carte

\n \n

\n Titlu *\n \n

\n Autor *\n \n

\n Gen\n \n

\n Număr pagini\n \n

\n Data citirii\n \n

\n Rating\n

\n \n \n \n \n \n

\n \n

\n Notițe\n \n

\n \n \n

", "component_script": "let currentRating = 0;\n\nfunction goToBooksList() {\n sdk.navigate('books');\n}\n\nfunction setRating(value) {\n currentRating = value;\n document.getElementById('book-rating').value = value;\n const buttons = document.querySelectorAll('.star-btn');\n buttons.forEach((btn, i) => {\n if (i < value) {\n btn.classList.remove('text-gray-300', 'dark:text-gray-600');\n btn.classList.add('text-amber-400');\n } else {\n btn.classList.remove('text-amber-400');\n btn.classList.add('text-gray-300', 'dark:text-gray-600');\n }\n });\n}\n\nasync function handleAddBook(event) {\n event.preventDefault();\n const btn = document.getElementById('submit-btn');\n const msg = document.getElementById('form-message');\n\n const values = {\n title: document.getElementById('book-title').value.trim(),\n author: document.getElementById('book-author').value.trim(),\n genre: document.getElementById('book-genre').value,\n 'page-count': parseInt(document.getElementById('book-pages').value) || 0,\n 'date-read': document.getElementById('book-date').value || null,\n rating: parseInt(document.getElementById('book-rating').value) || 0,\n notes: document.getElementById('book-notes').value.trim()\n };\n\n btn.disabled = true;\n btn.textContent = 'Se salvează...';\n\n try {\n await sdk.createRecord('books', values);\n msg.className = 'text-center text-sm py-2 rounded-lg bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300';\n msg.textContent = 'Cartea a fost adăugată cu succes!';\n msg.classList.remove('hidden');\n sdk.emit('books:changed');\n setTimeout(() => { sdk.navigate('books'); }, 1000);\n } catch (error) {\n msg.className = 'text-center text-sm py-2 rounded-lg bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300';\n msg.textContent = 'A apărut o eroare. Încearcă din nou.';\n msg.classList.remove('hidden');\n btn.disabled = false;\n btn.textContent = 'Salvează cartea';\n console.error(error);\n }\n}" }, { "slug": "edit-book-form", "component_name": "Edit Book Form", "component_description": "Formularul pentru editarea unei cărți existente cu date precompletate", "component_code": "

Editează cartea

\n \n

\n Titlu *\n \n

\n Autor *\n \n

\n Gen\n \n

\n Număr pagini\n \n

\n Data citirii\n \n

\n Rating\n

\n \n \n \n \n \n

\n \n

\n Notițe\n \n

\n \n \n

", "component_script": "let editRating = 0;\n\nfunction goBackToBooks() {\n sdk.navigate('books');\n}\n\nfunction setEditRating(value) {\n editRating = value;\n document.getElementById('edit-rating').value = value;\n const buttons = document.querySelectorAll('.edit-star-btn');\n buttons.forEach((btn, i) => {\n if (i < value) {\n btn.classList.remove('text-gray-300', 'dark:text-gray-600');\n btn.classList.add('text-amber-400');\n } else {\n btn.classList.remove('text-amber-400');\n btn.classList.add('text-gray-300', 'dark:text-gray-600');\n }\n });\n}\n\nasync function loadBookForEdit() {\n const bookId = sdk.getRecordIdFromUrl();\n if (!bookId) {\n sdk.navigate('books');\n return;\n }\n try {\n const book = await sdk.getRecord('books', bookId);\n document.getElementById('edit-book-id').value = book.id;\n document.getElementById('edit-title').value = book.title || '';\n document.getElementById('edit-author').value = book.author || '';\n document.getElementById('edit-genre').value = book.genre || '';\n document.getElementById('edit-pages').value = book['page-count'] || '';\n document.getElementById('edit-date').value = book['date-read'] ? book['date-read'].split('T')[0] : '';\n document.getElementById('edit-notes').value = book.notes || '';\n if (book.rating) {\n setEditRating(book.rating);\n }\n } catch (error) {\n console.error('Eroare la încărcarea cărții:', error);\n sdk.navigate('books');\n }\n}\n\nasync function handleEditBook(event) {\n event.preventDefault();\n const btn = document.getElementById('edit-submit-btn');\n const msg = document.getElementById('edit-form-message');\n const bookId = document.getElementById('edit-book-id').value;\n\n const values = {\n title: document.getElementById('edit-title').value.trim(),\n author: document.getElementById('edit-author').value.trim(),\n genre: document.getElementById('edit-genre').value,\n 'page-count': parseInt(document.getElementById('edit-pages').value) || 0,\n 'date-read': document.getElementById('edit-date').value || null,\n rating: parseInt(document.getElementById('edit-rating').value) || 0,\n notes: document.getElementById('edit-notes').value.trim()\n };\n\n btn.disabled = true;\n btn.textContent = 'Se salvează...';\n\n try {\n await sdk.updateRecord('books', bookId, values);\n msg.className = 'text-center text-sm py-2 rounded-lg bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300';\n msg.textContent = 'Cartea a fost actualizată cu succes!';\n msg.classList.remove('hidden');\n sdk.emit('books:changed');\n setTimeout(() => { sdk.navigate('books'); }, 1000);\n } catch (error) {\n msg.className = 'text-center text-sm py-2 rounded-lg bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300';\n msg.textContent = 'A apărut o eroare. Încearcă din nou.';\n msg.classList.remove('hidden');\n btn.disabled = false;\n btn.textContent = 'Salvează modificările';\n console.error(error);\n }\n}\n\nloadBookForEdit();" }, { "slug": "book-detail-view", "component_name": "Book Detail View", "component_description": "Vizualizarea completă a detaliilor unei cărți cu acțiuni", "component_code": "

\n \n

", "component_script": "const detailGenreColors = {\n 'Ficțiune': { bg: 'bg-violet-100 dark:bg-violet-900/40', text: 'text-violet-700 dark:text-violet-300', accent: 'bg-violet-500' },\n 'Non-ficțiune': { bg: 'bg-cyan-100 dark:bg-cyan-900/40', text: 'text-cyan-700 dark:text-cyan-300', accent: 'bg-cyan-500' },\n 'Science Fiction': { bg: 'bg-indigo-100 dark:bg-indigo-900/40', text: 'text-indigo-700 dark:text-indigo-300', accent: 'bg-indigo-500' },\n 'Fantasy': { bg: 'bg-purple-100 dark:bg-purple-900/40', text: 'text-purple-700 dark:text-purple-300', accent: 'bg-purple-500' },\n 'Thriller': { bg: 'bg-red-100 dark:bg-red-900/40', text: 'text-red-700 dark:text-red-300', accent: 'bg-red-500' },\n 'Mister': { bg: 'bg-slate-100 dark:bg-slate-900/40', text: 'text-slate-700 dark:text-slate-300', accent: 'bg-slate-500' },\n 'Romance': { bg: 'bg-pink-100 dark:bg-pink-900/40', text: 'text-pink-700 dark:text-pink-300', accent: 'bg-pink-500' },\n 'Istorie': { bg: 'bg-amber-100 dark:bg-amber-900/40', text: 'text-amber-700 dark:text-amber-300', accent: 'bg-amber-500' },\n 'Biografie': { bg: 'bg-teal-100 dark:bg-teal-900/40', text: 'text-teal-700 dark:text-teal-300', accent: 'bg-teal-500' },\n 'Dezvoltare personală': { bg: 'bg-emerald-100 dark:bg-emerald-900/40', text: 'text-emerald-700 dark:text-emerald-300', accent: 'bg-emerald-500' },\n 'Filozofie': { bg: 'bg-gray-100 dark:bg-gray-900/40', text: 'text-gray-700 dark:text-gray-300', accent: 'bg-gray-500' },\n 'Poezie': { bg: 'bg-fuchsia-100 dark:bg-fuchsia-900/40', text: 'text-fuchsia-700 dark:text-fuchsia-300', accent: 'bg-fuchsia-500' },\n 'Clasic': { bg: 'bg-yellow-100 dark:bg-yellow-900/40', text: 'text-yellow-700 dark:text-yellow-300', accent: 'bg-yellow-500' }\n};\nconst detailDefaultColor = { bg: 'bg-blue-100 dark:bg-blue-900/40', text: 'text-blue-700 dark:text-blue-300', accent: 'bg-blue-500' };\n\nfunction getDetailGenreColor(genre) {\n return detailGenreColors[genre] || detailDefaultColor;\n}\n\nfunction goBackToBooks() {\n sdk.navigate('books');\n}\n\nfunction goToEditBook(id) {\n sdk.navigate('edit-book', { recordId: id });\n}\n\nasync function deleteBookFromDetail(id) {\n if (!confirm('Sigur vrei să ștergi această carte? Acțiunea este ireversibilă.')) return;\n try {\n await sdk.deleteRecord('books', id);\n sdk.emit('books:changed');\n sdk.navigate('books');\n } catch (error) {\n console.error('Eroare la ștergere:', error);\n }\n}\n\nasync function loadBookDetail() {\n const bookId = sdk.getRecordIdFromUrl();\n if (!bookId) {\n sdk.navigate('books');\n return;\n }\n\n try {\n const book = await sdk.getRecord('books', bookId);\n const container = document.getElementById('book-detail-container');\n const gc = getDetailGenreColor(book.genre);\n const initials = (book.title || '?').substring(0, 2).toUpperCase();\n\n const starsFilled = book.rating ? '' + '★'.repeat(book.rating) + '' : '';\n const starsEmpty = book.rating ? '' + '☆'.repeat(5 - book.rating) + '' : '☆☆☆☆☆';\n\n const dateStr = book['date-read'] ? new Date(book['date-read']).toLocaleDateString('ro-RO', { day: 'numeric', month: 'long', year: 'numeric' }) : '';\n const createdStr = book.createdAt ? new Date(book.createdAt).toLocaleDateString('ro-RO', { day: 'numeric', month: 'long', year: 'numeric' }) : '';\n const editedStr = book.editedAt ? new Date(book.editedAt).toLocaleDateString('ro-RO', { day: 'numeric', month: 'long', year: 'numeric' }) : '';\n\n container.innerHTML = `\n

\n \n

\n\n

\n \n

\n ${initials}\n

${book.title || 'Fără titlu'}

de ${book.author || 'Autor necunoscut'}

\n ${book.genre ? `${book.genre}` : ''}\n ${starsFilled}${starsEmpty}\n

\n\n \n

Detalii

\n \n

Pagini

${book['page-count'] ? book['page-count'] + ' pag' : '–'}

\n \n

Data citirii

${dateStr || '–'}

\n \n

Rating

${book.rating ? book.rating + '/5' : '–'}

\n\n \n ${book.notes ? `\n

Notițe

${book.notes}

\n ` : ''}\n\n \n

\n ${createdStr ? `Adăugat: ${createdStr}` : ''}\n ${editedStr ? `Modificat: ${editedStr}` : ''}\n

\n\n \n

\n \n \n

\n `;\n } catch (error) {\n console.error('Eroare la încărcarea detaliilor:', error);\n const container = document.getElementById('book-detail-container');\n container.innerHTML = `\n

\n \n

Cartea nu a fost găsită

Este posibil să fi fost ștearsă sau ID-ul este invalid.

\n `;\n }\n}\n\nloadBookDetail();" } ], "pages": [ { "slug": "dashboard", "title": "Dashboard", "description": "Pagina principală cu statistici despre cărțile citite", "components": [ "navbar", { "componentRef": "page-layout", "children": [ { "slot": "content", "componentRef": "stats-cards" }, { "slot": "content", "componentRef": "recent-books" }, { "slot": "content", "componentRef": "genre-chart" } ] } ] }, { "slug": "books", "title": "Cărțile mele", "description": "Lista completă a cărților citite cu filtrare și căutare", "components": [ "navbar", { "componentRef": "page-layout", "children": [ { "slot": "content", "componentRef": "books-content" } ] } ] }, { "slug": "add-book", "title": "Adaugă carte", "description": "Formular pentru adăugarea unei noi cărți", "components": [ "navbar", { "componentRef": "page-layout", "children": [ { "slot": "content", "componentRef": "add-book-form" } ] } ] }, { "slug": "edit-book", "title": "Editează carte", "description": "Formular pentru editarea unei cărți existente", "components": [ "navbar", { "componentRef": "page-layout", "children": [ { "slot": "content", "componentRef": "edit-book-form" } ] } ] }, { "slug": "book-detail", "title": "Detalii carte", "description": "Pagina de previzualizare completă a unei cărți", "components": [ "navbar", { "componentRef": "page-layout", "children": [ { "slot": "content", "componentRef": "book-detail-view" } ] } ] } ], "tables": [ { "slug": "books", "name": "Cărți", "description": "Tabela cu cărțile citite", "fields": [ { "slug": "title", "name": "Titlu", "type": "String" }, { "slug": "author", "name": "Autor", "type": "String" }, { "slug": "genre", "name": "Gen", "type": "String" }, { "slug": "page-count", "name": "Număr pagini", "type": "Number" }, { "slug": "date-read", "name": "Data citirii", "type": "Date" }, { "slug": "rating", "name": "Rating", "type": "Number" }, { "slug": "notes", "name": "Notițe", "type": "String" } ] } ] }

Dashboard

Components (1)

Navigation Bar