dvirlabs
437fe72e48
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
1900 lines
73 KiB
JavaScript
1900 lines
73 KiB
JavaScript
import React, { useState, useEffect, useContext } from 'react'
|
||
import { useNavigate, Link } from 'react-router-dom'
|
||
import api from '../api'
|
||
import { AuthContext } from '../context/AuthContext'
|
||
import Toast from '../components/Toast'
|
||
import '../styles/global.css'
|
||
|
||
export default function Admin() {
|
||
const navigate = useNavigate()
|
||
const { user, token } = useContext(AuthContext)
|
||
const [toast, setToast] = useState(null)
|
||
const [products, setProducts] = useState([])
|
||
const [categories, setCategories] = useState([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [showForm, setShowForm] = useState(false)
|
||
const [editingProduct, setEditingProduct] = useState(null)
|
||
const [formData, setFormData] = useState({
|
||
name: '',
|
||
slug: '',
|
||
description: '',
|
||
price: '',
|
||
discount_price: '',
|
||
category_id: '',
|
||
model_id: '',
|
||
gender: 'men',
|
||
brand: '',
|
||
sizes: '',
|
||
stock: '',
|
||
images: '',
|
||
is_featured: false,
|
||
is_on_sale: false,
|
||
override_price: '',
|
||
override_sizes: '',
|
||
})
|
||
const [uploadingImage, setUploadingImage] = useState(false)
|
||
const [uploadedImages, setUploadedImages] = useState([])
|
||
const [models, setModels] = useState([])
|
||
const [activeTab, setActiveTab] = useState('products') // products, categories, brands, models, messages
|
||
const [showCategoryForm, setShowCategoryForm] = useState(false)
|
||
const [editingCategory, setEditingCategory] = useState(null)
|
||
const [categoryFormData, setCategoryFormData] = useState({
|
||
name: '',
|
||
slug: '',
|
||
description: '',
|
||
image: '',
|
||
})
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
const [filterBrand, setFilterBrand] = useState('')
|
||
const [filterCategory, setFilterCategory] = useState('')
|
||
const [filterModel, setFilterModel] = useState('')
|
||
const [brands, setBrands] = useState([])
|
||
const [allProducts, setAllProducts] = useState([]) // Store all products for filtering
|
||
const [showBrandForm, setShowBrandForm] = useState(false)
|
||
const [editingBrand, setEditingBrand] = useState(null)
|
||
const [brandFormData, setBrandFormData] = useState({ name: '' })
|
||
const [brandsList, setBrandsList] = useState([]) // Separate list for brand management
|
||
const [showModelForm, setShowModelForm] = useState(false)
|
||
const [editingModel, setEditingModel] = useState(null)
|
||
const [modelFormData, setModelFormData] = useState({
|
||
name: '',
|
||
category_id: '',
|
||
brand: '',
|
||
base_price: '',
|
||
sizes: '',
|
||
stock: '',
|
||
description: '',
|
||
})
|
||
|
||
// Contact Messages state
|
||
const [contactMessages, setContactMessages] = useState([])
|
||
const [filteredMessages, setFilteredMessages] = useState([])
|
||
const [unreadCount, setUnreadCount] = useState(0)
|
||
const [messageFilter, setMessageFilter] = useState('all') // all, new, read, replied
|
||
const [selectedMessage, setSelectedMessage] = useState(null)
|
||
const [showMessageModal, setShowMessageModal] = useState(false)
|
||
const [messageNotes, setMessageNotes] = useState('')
|
||
|
||
// Redirect if not admin
|
||
useEffect(() => {
|
||
if (!user?.is_admin) {
|
||
navigate('/')
|
||
}
|
||
}, [user, navigate])
|
||
|
||
useEffect(() => {
|
||
fetchProducts()
|
||
fetchCategories()
|
||
fetchModels()
|
||
fetchBrands()
|
||
fetchContactMessages()
|
||
fetchUnreadCount()
|
||
}, [])
|
||
|
||
const fetchProducts = async () => {
|
||
try {
|
||
const response = await api.get('/products')
|
||
setAllProducts(response.data)
|
||
setProducts(response.data)
|
||
} catch (error) {
|
||
console.error('Error fetching products:', error)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const fetchCategories = async () => {
|
||
try {
|
||
const response = await api.get('/categories')
|
||
setCategories(response.data)
|
||
} catch (error) {
|
||
console.error('Error fetching categories:', error)
|
||
}
|
||
}
|
||
|
||
const fetchModels = async () => {
|
||
try {
|
||
const response = await api.get('/models')
|
||
setModels(response.data)
|
||
} catch (error) {
|
||
console.error('Error fetching models:', error)
|
||
}
|
||
}
|
||
|
||
const fetchBrands = async () => {
|
||
try {
|
||
const response = await api.get('/brands')
|
||
setBrands(response.data.map(b => b.name).sort())
|
||
setBrandsList(response.data)
|
||
} catch (error) {
|
||
console.error('Error fetching brands:', error)
|
||
}
|
||
}
|
||
|
||
const fetchContactMessages = async () => {
|
||
try {
|
||
const response = await api.get('/admin/contact-messages')
|
||
setContactMessages(response.data)
|
||
setFilteredMessages(response.data)
|
||
} catch (error) {
|
||
console.error('Error fetching contact messages:', error)
|
||
}
|
||
}
|
||
|
||
const fetchUnreadCount = async () => {
|
||
try {
|
||
const response = await api.get('/admin/contact-messages/unread-count')
|
||
setUnreadCount(response.data.unread_count)
|
||
} catch (error) {
|
||
console.error('Error fetching unread count:', error)
|
||
}
|
||
}
|
||
|
||
// Filter contact messages based on status
|
||
useEffect(() => {
|
||
if (messageFilter === 'all') {
|
||
setFilteredMessages(contactMessages)
|
||
} else {
|
||
setFilteredMessages(contactMessages.filter(m => m.status === messageFilter))
|
||
}
|
||
}, [messageFilter, contactMessages])
|
||
|
||
// Filter products based on search and filters
|
||
useEffect(() => {
|
||
let filtered = [...allProducts]
|
||
|
||
// Search filter
|
||
if (searchQuery) {
|
||
filtered = filtered.filter(p =>
|
||
p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
p.brand?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
p.description?.toLowerCase().includes(searchQuery.toLowerCase())
|
||
)
|
||
}
|
||
|
||
// Brand filter
|
||
if (filterBrand) {
|
||
filtered = filtered.filter(p => p.brand === filterBrand)
|
||
}
|
||
|
||
// Category filter
|
||
if (filterCategory) {
|
||
filtered = filtered.filter(p => p.category_id === parseInt(filterCategory))
|
||
}
|
||
|
||
// Model filter
|
||
if (filterModel) {
|
||
filtered = filtered.filter(p => p.model_id === parseInt(filterModel))
|
||
}
|
||
|
||
setProducts(filtered)
|
||
}, [searchQuery, filterBrand, filterCategory, filterModel, allProducts])
|
||
|
||
const handleChange = (e) => {
|
||
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value
|
||
setFormData({
|
||
...formData,
|
||
[e.target.name]: value,
|
||
})
|
||
}
|
||
|
||
const handleImageUpload = async (e) => {
|
||
const files = e.target.files
|
||
if (!files || files.length === 0) return
|
||
|
||
setUploadingImage(true)
|
||
const newImages = [...uploadedImages]
|
||
|
||
try {
|
||
for (let i = 0; i < files.length; i++) {
|
||
const file = files[i]
|
||
const formDataUpload = new FormData()
|
||
formDataUpload.append('file', file)
|
||
|
||
const response = await api.post('/products/upload-image', formDataUpload, {
|
||
headers: {
|
||
'Content-Type': 'multipart/form-data',
|
||
},
|
||
})
|
||
|
||
// Backend now returns full URLs
|
||
newImages.push(response.data.url)
|
||
}
|
||
|
||
setUploadedImages(newImages)
|
||
// Update form data with new images
|
||
const currentImages = formData.images ? formData.images.split(',').map(s => s.trim()).filter(s => s) : []
|
||
const allImages = [...currentImages, ...newImages.map(url => url)]
|
||
setFormData({ ...formData, images: allImages.join(', ') })
|
||
|
||
setToast({ type: 'success', message: 'Images uploaded successfully!' })
|
||
} catch (error) {
|
||
console.error('Error uploading image:', error)
|
||
setToast({ type: 'error', message: 'Error uploading image: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
} finally {
|
||
setUploadingImage(false)
|
||
}
|
||
}
|
||
|
||
const removeImage = (imageUrl) => {
|
||
const currentImages = formData.images.split(',').map(s => s.trim()).filter(s => s)
|
||
const filtered = currentImages.filter(img => img !== imageUrl)
|
||
setFormData({ ...formData, images: filtered.join(', ') })
|
||
setUploadedImages(uploadedImages.filter(img => img !== imageUrl))
|
||
}
|
||
|
||
const handleSubmit = async (e) => {
|
||
e.preventDefault()
|
||
|
||
const productData = {
|
||
...formData,
|
||
price: formData.price ? parseFloat(formData.price) : null, // Allow null - inherits from model
|
||
discount_price: formData.discount_price ? parseFloat(formData.discount_price) : null,
|
||
category_id: parseInt(formData.category_id),
|
||
model_id: formData.model_id ? parseInt(formData.model_id) : null,
|
||
stock: formData.stock ? parseInt(formData.stock) : null,
|
||
sizes: formData.sizes ? formData.sizes.split(',').map(s => s.trim()).filter(s => s) : [],
|
||
images: formData.images.split(',').map(i => i.trim()).filter(i => i),
|
||
override_price: formData.override_price ? parseFloat(formData.override_price) : null,
|
||
override_sizes: formData.override_sizes ? formData.override_sizes.split(',').map(s => s.trim()) : null,
|
||
}
|
||
|
||
try {
|
||
if (editingProduct) {
|
||
await api.put(`/products/${editingProduct.id}`, productData)
|
||
setToast({ type: 'success', message: 'Product updated successfully!' })
|
||
} else {
|
||
await api.post('/products', productData)
|
||
setToast({ type: 'success', message: 'Product created successfully!' })
|
||
}
|
||
|
||
setShowForm(false)
|
||
setEditingProduct(null)
|
||
resetForm()
|
||
fetchProducts()
|
||
} catch (error) {
|
||
console.error('Error saving product:', error)
|
||
setToast({ type: 'error', message: 'Error saving product: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
}
|
||
}
|
||
|
||
const handleEdit = (product) => {
|
||
console.log('Edit clicked for product:', product)
|
||
try {
|
||
setEditingProduct(product)
|
||
const imageList = Array.isArray(product.images) ? product.images : []
|
||
console.log('Setting form data...')
|
||
setFormData({
|
||
name: product.name || '',
|
||
slug: product.slug || '',
|
||
description: product.description || '',
|
||
price: product.price || '',
|
||
discount_price: product.discount_price || '',
|
||
category_id: product.category_id || '',
|
||
model_id: product.model_id || '',
|
||
gender: product.gender || 'men',
|
||
brand: product.brand || '',
|
||
sizes: Array.isArray(product.sizes) ? product.sizes.join(', ') : '',
|
||
stock: product.stock || '',
|
||
images: imageList.join(', '),
|
||
is_featured: product.is_featured || false,
|
||
is_on_sale: product.is_on_sale || false,
|
||
override_price: product.override_price || '',
|
||
override_sizes: Array.isArray(product.override_sizes) ? product.override_sizes.join(', ') : '',
|
||
})
|
||
setUploadedImages(imageList)
|
||
console.log('Showing form...')
|
||
setShowForm(true)
|
||
console.log('Form should now be visible')
|
||
|
||
// Scroll to top to show the form
|
||
setTimeout(() => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}, 100)
|
||
} catch (error) {
|
||
console.error('Error in handleEdit:', error)
|
||
setToast({ type: 'error', message: 'Error loading product: ' + error.message })
|
||
}
|
||
}
|
||
|
||
const handleDelete = async (id) => {
|
||
if (!confirm('Are you sure you want to delete this product?')) return
|
||
|
||
try {
|
||
await api.delete(`/products/${id}`)
|
||
setToast({ type: 'success', message: 'Product deleted successfully!' })
|
||
fetchProducts()
|
||
} catch (error) {
|
||
console.error('Error deleting product:', error)
|
||
setToast({ type: 'error', message: 'Error deleting product' })
|
||
}
|
||
}
|
||
|
||
const resetForm = () => {
|
||
setFormData({
|
||
name: '',
|
||
slug: '',
|
||
description: '',
|
||
price: '',
|
||
discount_price: '',
|
||
category_id: '',
|
||
model_id: '',
|
||
gender: 'men',
|
||
brand: '',
|
||
sizes: '',
|
||
stock: '',
|
||
images: '',
|
||
is_featured: false,
|
||
is_on_sale: false,
|
||
override_price: '',
|
||
override_sizes: '',
|
||
})
|
||
setUploadedImages([])
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
setShowForm(false)
|
||
setEditingProduct(null)
|
||
resetForm()
|
||
}
|
||
|
||
// Category Management Functions
|
||
const handleCategoryChange = (e) => {
|
||
const { name, value } = e.target
|
||
setCategoryFormData({ ...categoryFormData, [name]: value })
|
||
}
|
||
|
||
const handleCategoryImageUpload = async (e) => {
|
||
const file = e.target.files[0]
|
||
if (!file) return
|
||
|
||
setUploadingImage(true)
|
||
const formData = new FormData()
|
||
formData.append('file', file)
|
||
|
||
try {
|
||
const response = await api.post('/categories/upload-image', formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' }
|
||
})
|
||
// Backend now returns full URLs
|
||
setCategoryFormData({ ...categoryFormData, image: response.data.url })
|
||
setToast({ type: 'success', message: 'Image uploaded successfully!' })
|
||
} catch (error) {
|
||
console.error('Error uploading image:', error)
|
||
setToast({ type: 'error', message: 'Error uploading image' })
|
||
} finally {
|
||
setUploadingImage(false)
|
||
}
|
||
}
|
||
|
||
const handleCategorySubmit = async (e) => {
|
||
e.preventDefault()
|
||
|
||
try {
|
||
if (editingCategory) {
|
||
await api.put(`/categories/${editingCategory.id}`, categoryFormData)
|
||
setToast({ type: 'success', message: 'Category updated successfully!' })
|
||
} else {
|
||
await api.post('/categories', categoryFormData)
|
||
setToast({ type: 'success', message: 'Category created successfully!' })
|
||
}
|
||
setShowCategoryForm(false)
|
||
setEditingCategory(null)
|
||
resetCategoryForm()
|
||
fetchCategories()
|
||
} catch (error) {
|
||
console.error('Error saving category:', error)
|
||
setToast({ type: 'error', message: 'Error saving category: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
}
|
||
}
|
||
|
||
const handleEditCategory = (category) => {
|
||
setEditingCategory(category)
|
||
setCategoryFormData({
|
||
name: category.name || '',
|
||
slug: category.slug || '',
|
||
description: category.description || '',
|
||
image: category.image || '',
|
||
})
|
||
setShowCategoryForm(true)
|
||
setTimeout(() => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}, 100)
|
||
}
|
||
|
||
const handleDeleteCategory = async (id) => {
|
||
if (!confirm('Are you sure you want to delete this category?')) return
|
||
|
||
try {
|
||
await api.delete(`/categories/${id}`)
|
||
setToast({ type: 'success', message: 'Category deleted successfully!' })
|
||
fetchCategories()
|
||
} catch (error) {
|
||
console.error('Error deleting category:', error)
|
||
setToast({ type: 'error', message: 'Error deleting category: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
}
|
||
}
|
||
|
||
const resetCategoryForm = () => {
|
||
setCategoryFormData({
|
||
name: '',
|
||
slug: '',
|
||
description: '',
|
||
image: '',
|
||
})
|
||
}
|
||
|
||
// Brand management handlers
|
||
const handleAddBrand = async () => {
|
||
const newBrand = brandFormData.name.trim()
|
||
|
||
if (!newBrand) {
|
||
setToast({ type: 'error', message: 'Please enter a brand name' })
|
||
return
|
||
}
|
||
|
||
try {
|
||
await api.post('/brands', { name: newBrand })
|
||
setShowBrandForm(false)
|
||
setBrandFormData({ name: '' })
|
||
fetchBrands()
|
||
setToast({ type: 'success', message: 'Brand added successfully!' })
|
||
} catch (error) {
|
||
console.error('Error adding brand:', error)
|
||
setToast({ type: 'error', message: 'Error adding brand: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
}
|
||
}
|
||
|
||
const handleUpdateBrand = async () => {
|
||
const oldBrand = editingBrand
|
||
const newBrand = brandFormData.name.trim()
|
||
|
||
if (!newBrand) {
|
||
setToast({ type: 'error', message: 'Please enter a brand name' })
|
||
return
|
||
}
|
||
|
||
if (oldBrand === newBrand) {
|
||
setShowBrandForm(false)
|
||
setEditingBrand(null)
|
||
return
|
||
}
|
||
|
||
if (!confirm(`Update brand from "${oldBrand}" to "${newBrand}"?`)) {
|
||
return
|
||
}
|
||
|
||
try {
|
||
// Find the brand ID
|
||
const brandToUpdate = brandsList.find(b => b.name === oldBrand)
|
||
if (!brandToUpdate) {
|
||
setToast({ type: 'error', message: 'Brand not found' })
|
||
return
|
||
}
|
||
|
||
// Update the brand
|
||
await api.put(`/brands/${brandToUpdate.id}`, { name: newBrand })
|
||
|
||
// Update all products with this brand
|
||
const productsToUpdate = allProducts.filter(p => p.brand === oldBrand)
|
||
for (const product of productsToUpdate) {
|
||
await api.put(`/products/${product.id}`, { ...product, brand: newBrand })
|
||
}
|
||
|
||
// Update all models with this brand
|
||
const modelsToUpdate = models.filter(m => m.brand === oldBrand)
|
||
for (const model of modelsToUpdate) {
|
||
await api.put(`/models/${model.id}`, { ...model, brand: newBrand })
|
||
}
|
||
|
||
setShowBrandForm(false)
|
||
setEditingBrand(null)
|
||
setBrandFormData({ name: '' })
|
||
|
||
// Refresh data
|
||
fetchBrands()
|
||
fetchProducts()
|
||
fetchModels()
|
||
|
||
setToast({ type: 'success', message: 'Brand updated successfully!' })
|
||
} catch (error) {
|
||
console.error('Error updating brand:', error)
|
||
setToast({ type: 'error', message: 'Error updating brand: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
}
|
||
}
|
||
|
||
const handleDeleteBrand = async (brand) => {
|
||
const productCount = allProducts.filter(p => p.brand === brand).length
|
||
const modelCount = models.filter(m => m.brand === brand).length
|
||
|
||
if (productCount > 0 || modelCount > 0) {
|
||
setToast({ type: 'error', message: `Cannot delete "${brand}". It is used in ${productCount} product(s) and ${modelCount} model(s).` })
|
||
return
|
||
}
|
||
|
||
if (!confirm(`Are you sure you want to delete the brand "${brand}"?`)) {
|
||
return
|
||
}
|
||
|
||
try {
|
||
// Find the brand ID
|
||
const brandToDelete = brandsList.find(b => b.name === brand)
|
||
if (!brandToDelete) {
|
||
setToast({ type: 'error', message: 'Brand not found' })
|
||
return
|
||
}
|
||
|
||
await api.delete(`/brands/${brandToDelete.id}`)
|
||
fetchBrands()
|
||
setToast({ type: 'success', message: 'Brand deleted successfully!' })
|
||
} catch (error) {
|
||
console.error('Error deleting brand:', error)
|
||
setToast({ type: 'error', message: 'Error deleting brand: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
}
|
||
}
|
||
|
||
// Model management functions
|
||
const handleModelChange = (e) => {
|
||
const { name, value } = e.target
|
||
setModelFormData({ ...modelFormData, [name]: value })
|
||
}
|
||
|
||
const handleModelSubmit = async (e) => {
|
||
e.preventDefault()
|
||
|
||
const modelData = {
|
||
...modelFormData,
|
||
category_id: parseInt(modelFormData.category_id),
|
||
base_price: modelFormData.base_price ? parseFloat(modelFormData.base_price) : null,
|
||
sizes: modelFormData.sizes ? modelFormData.sizes.split(',').map(s => s.trim()) : [],
|
||
stock: modelFormData.stock ? parseInt(modelFormData.stock) : null,
|
||
}
|
||
|
||
try {
|
||
if (editingModel) {
|
||
await api.put(`/models/${editingModel.id}`, modelData)
|
||
setToast({ type: 'success', message: 'Model updated successfully!' })
|
||
} else {
|
||
await api.post('/models', modelData)
|
||
setToast({ type: 'success', message: 'Model created successfully!' })
|
||
}
|
||
setShowModelForm(false)
|
||
setEditingModel(null)
|
||
resetModelForm()
|
||
fetchModels()
|
||
} catch (error) {
|
||
console.error('Error saving model:', error)
|
||
setToast({ type: 'error', message: 'Error saving model: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
}
|
||
}
|
||
|
||
const handleModelEdit = (model) => {
|
||
setEditingModel(model)
|
||
setModelFormData({
|
||
name: model.name || '',
|
||
category_id: model.category_id || '',
|
||
brand: model.brand || '',
|
||
base_price: model.base_price || '',
|
||
sizes: Array.isArray(model.sizes) ? model.sizes.join(', ') : '',
|
||
stock: model.stock || '',
|
||
description: model.description || '',
|
||
})
|
||
setShowModelForm(true)
|
||
setTimeout(() => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}, 100)
|
||
}
|
||
|
||
const handleModelDelete = async (id) => {
|
||
if (!confirm('Are you sure you want to delete this model? This will unlink all associated products.')) return
|
||
|
||
try {
|
||
await api.delete(`/models/${id}`)
|
||
setToast({ type: 'success', message: 'Model deleted successfully!' })
|
||
fetchModels()
|
||
} catch (error) {
|
||
console.error('Error deleting model:', error)
|
||
setToast({ type: 'error', message: 'Error deleting model: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
}
|
||
}
|
||
|
||
const resetModelForm = () => {
|
||
setModelFormData({
|
||
name: '',
|
||
category_id: '',
|
||
brand: '',
|
||
base_price: '',
|
||
sizes: '',
|
||
stock: '',
|
||
description: '',
|
||
})
|
||
}
|
||
|
||
const handleModelCancel = () => {
|
||
setShowModelForm(false)
|
||
setEditingModel(null)
|
||
resetModelForm()
|
||
}
|
||
|
||
// Contact Message Handlers
|
||
const handleUpdateMessage = async (messageId) => {
|
||
try {
|
||
await api.put(`/admin/contact-messages/${messageId}`, {
|
||
status: selectedMessage.status,
|
||
admin_notes: messageNotes,
|
||
is_read: true
|
||
})
|
||
setToast({ type: 'success', message: 'Message updated successfully!' })
|
||
setShowMessageModal(false)
|
||
fetchContactMessages()
|
||
fetchUnreadCount()
|
||
} catch (error) {
|
||
console.error('Error updating message:', error)
|
||
setToast({ type: 'error', message: 'Error updating message: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
}
|
||
}
|
||
|
||
const handleDeleteMessage = async (messageId) => {
|
||
if (!confirm('Are you sure you want to delete this message?')) return
|
||
|
||
try {
|
||
await api.delete(`/admin/contact-messages/${messageId}`)
|
||
setToast({ type: 'success', message: 'Message deleted successfully!' })
|
||
fetchContactMessages()
|
||
fetchUnreadCount()
|
||
if (showMessageModal) {
|
||
setShowMessageModal(false)
|
||
}
|
||
} catch (error) {
|
||
console.error('Error deleting message:', error)
|
||
setToast({ type: 'error', message: 'Error deleting message: ' + (error.response?.data?.detail || 'Unknown error') })
|
||
}
|
||
}
|
||
|
||
const getCategoryName = (categoryId) => {
|
||
const category = categories.find(c => c.id === categoryId)
|
||
return category ? category.name : 'Unknown'
|
||
}
|
||
|
||
if (!user?.is_admin) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div className="admin-page" style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
||
<h1 style={{ marginBottom: '1.5rem' }}>Admin Dashboard</h1>
|
||
|
||
{/* Tab Navigation */}
|
||
<div style={{ marginBottom: '2rem', borderBottom: '2px solid #ddd' }}>
|
||
<button
|
||
onClick={() => setActiveTab('products')}
|
||
style={{
|
||
padding: '0.75rem 1.5rem',
|
||
marginRight: '0.5rem',
|
||
border: 'none',
|
||
borderBottom: activeTab === 'products' ? '3px solid #007bff' : '3px solid transparent',
|
||
backgroundColor: 'transparent',
|
||
cursor: 'pointer',
|
||
fontWeight: activeTab === 'products' ? 'bold' : 'normal',
|
||
fontSize: '1rem'
|
||
}}
|
||
>
|
||
Products
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('categories')}
|
||
style={{
|
||
padding: '0.75rem 1.5rem',
|
||
marginRight: '0.5rem',
|
||
border: 'none',
|
||
borderBottom: activeTab === 'categories' ? '3px solid #007bff' : '3px solid transparent',
|
||
backgroundColor: 'transparent',
|
||
cursor: 'pointer',
|
||
fontWeight: activeTab === 'categories' ? 'bold' : 'normal',
|
||
fontSize: '1rem'
|
||
}}
|
||
>
|
||
Categories
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('brands')}
|
||
style={{
|
||
padding: '0.75rem 1.5rem',
|
||
marginRight: '0.5rem',
|
||
border: 'none',
|
||
borderBottom: activeTab === 'brands' ? '3px solid #007bff' : '3px solid transparent',
|
||
backgroundColor: 'transparent',
|
||
cursor: 'pointer',
|
||
fontWeight: activeTab === 'brands' ? 'bold' : 'normal',
|
||
fontSize: '1rem'
|
||
}}
|
||
>
|
||
Brands
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('models')}
|
||
style={{
|
||
padding: '0.75rem 1.5rem',
|
||
marginRight: '0.5rem',
|
||
border: 'none',
|
||
borderBottom: activeTab === 'models' ? '3px solid #007bff' : '3px solid transparent',
|
||
backgroundColor: 'transparent',
|
||
cursor: 'pointer',
|
||
fontWeight: activeTab === 'models' ? 'bold' : 'normal',
|
||
fontSize: '1rem'
|
||
}}
|
||
>
|
||
Models
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('messages')}
|
||
style={{
|
||
padding: '0.75rem 1.5rem',
|
||
marginRight: '0.5rem',
|
||
border: 'none',
|
||
borderBottom: activeTab === 'messages' ? '3px solid #007bff' : '3px solid transparent',
|
||
backgroundColor: 'transparent',
|
||
cursor: 'pointer',
|
||
fontWeight: activeTab === 'messages' ? 'bold' : 'normal',
|
||
fontSize: '1rem',
|
||
position: 'relative'
|
||
}}
|
||
>
|
||
Contact Messages
|
||
{unreadCount > 0 && (
|
||
<span style={{
|
||
position: 'absolute',
|
||
top: '5px',
|
||
right: '5px',
|
||
backgroundColor: '#dc3545',
|
||
color: 'white',
|
||
borderRadius: '50%',
|
||
padding: '2px 6px',
|
||
fontSize: '0.7rem',
|
||
fontWeight: 'bold'
|
||
}}>
|
||
{unreadCount}
|
||
</span>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Products Section */}
|
||
{activeTab === 'products' && (
|
||
<>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
|
||
<h2>Manage Products</h2>
|
||
<button
|
||
className="btn btn-primary"
|
||
onClick={() => {
|
||
setShowForm(!showForm)
|
||
setEditingProduct(null)
|
||
resetForm()
|
||
}}
|
||
>
|
||
{showForm ? 'Cancel' : '+ Add New Product'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Search and Filters */}
|
||
<div style={{
|
||
backgroundColor: '#f8f9fa',
|
||
padding: '1.5rem',
|
||
borderRadius: '8px',
|
||
marginBottom: '2rem',
|
||
display: 'grid',
|
||
gridTemplateColumns: '2fr 1fr 1fr 1fr',
|
||
gap: '1rem',
|
||
alignItems: 'end'
|
||
}}>
|
||
<div>
|
||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>Search</label>
|
||
<input
|
||
type="text"
|
||
placeholder="Search by name, brand, description..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.5rem',
|
||
border: '1px solid #ddd',
|
||
borderRadius: '4px'
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>Brand</label>
|
||
<select
|
||
value={filterBrand}
|
||
onChange={(e) => setFilterBrand(e.target.value)}
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.5rem',
|
||
border: '1px solid #ddd',
|
||
borderRadius: '4px'
|
||
}}
|
||
>
|
||
<option value="">All Brands</option>
|
||
{brands.map(brand => (
|
||
<option key={brand} value={brand}>{brand}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>Category</label>
|
||
<select
|
||
value={filterCategory}
|
||
onChange={(e) => setFilterCategory(e.target.value)}
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.5rem',
|
||
border: '1px solid #ddd',
|
||
borderRadius: '4px'
|
||
}}
|
||
>
|
||
<option value="">All Categories</option>
|
||
{categories.map(cat => (
|
||
<option key={cat.id} value={cat.id}>{cat.name}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>Model</label>
|
||
<select
|
||
value={filterModel}
|
||
onChange={(e) => setFilterModel(e.target.value)}
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.5rem',
|
||
border: '1px solid #ddd',
|
||
borderRadius: '4px'
|
||
}}
|
||
>
|
||
<option value="">All Models</option>
|
||
{models.map(model => (
|
||
<option key={model.id} value={model.id}>
|
||
{model.brand} {model.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{showForm && (
|
||
<div style={{ backgroundColor: '#f5f5f5', padding: '2rem', borderRadius: '8px', marginBottom: '2rem' }}>
|
||
<h2>{editingProduct ? 'Edit Product' : 'Create New Product'}</h2>
|
||
<form onSubmit={handleSubmit}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
|
||
<div className="form-group">
|
||
<label>Name *</label>
|
||
<input type="text" name="name" value={formData.name} onChange={handleChange} required />
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Brand</label>
|
||
<select name="brand" value={formData.brand} onChange={handleChange}>
|
||
<option value="">Select Brand</option>
|
||
{brands.map(brand => (
|
||
<option key={brand} value={brand}>{brand}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||
<label>SEO-Friendly URL (Slug)</label>
|
||
<input
|
||
type="text"
|
||
name="slug"
|
||
value={formData.slug}
|
||
onChange={handleChange}
|
||
placeholder="Leave empty to auto-generate from brand and name"
|
||
style={{ backgroundColor: '#f9f9f9' }}
|
||
/>
|
||
{(formData.brand || formData.name) && !formData.slug && (
|
||
<small style={{ color: '#666', marginTop: '0.25rem', display: 'block' }}>
|
||
Will generate: {(formData.brand + ' ' + formData.name).toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-')}
|
||
</small>
|
||
)}
|
||
</div>
|
||
|
||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||
<label>Description</label>
|
||
<textarea name="description" value={formData.description} onChange={handleChange} rows="3" />
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>
|
||
Price {formData.model_id && models.find(m => m.id === parseInt(formData.model_id))?.base_price ? '(Optional - inherits from model)' : '*'}
|
||
</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
name="price"
|
||
value={formData.price}
|
||
onChange={handleChange}
|
||
required={!formData.model_id || !models.find(m => m.id === parseInt(formData.model_id))?.base_price}
|
||
placeholder={
|
||
formData.model_id && models.find(m => m.id === parseInt(formData.model_id))?.base_price
|
||
? `Model price: ₪${parseFloat(models.find(m => m.id === parseInt(formData.model_id)).base_price).toFixed(2)}`
|
||
: 'Enter price'
|
||
}
|
||
/>
|
||
{formData.model_id && models.find(m => m.id === parseInt(formData.model_id))?.base_price && (
|
||
<small style={{ color: '#666', fontSize: '0.85em' }}>
|
||
Leave empty to use model's base price of ₪{parseFloat(models.find(m => m.id === parseInt(formData.model_id)).base_price).toFixed(2)}
|
||
</small>
|
||
)}
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Discount Price</label>
|
||
<input type="number" step="0.01" name="discount_price" value={formData.discount_price} onChange={handleChange} />
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Category *</label>
|
||
<select name="category_id" value={formData.category_id} onChange={handleChange} required>
|
||
<option value="">Select category</option>
|
||
{categories.map(cat => (
|
||
<option key={cat.id} value={cat.id}>{cat.name}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Model (Optional - for shared attributes)</label>
|
||
<select name="model_id" value={formData.model_id} onChange={handleChange}>
|
||
<option value="">None - Standalone Product</option>
|
||
{models
|
||
.filter(m => {
|
||
const categoryMatch = !formData.category_id || m.category_id === parseInt(formData.category_id)
|
||
const brandMatch = !formData.brand || m.brand === formData.brand
|
||
return categoryMatch && brandMatch
|
||
})
|
||
.map(model => (
|
||
<option key={model.id} value={model.id}>
|
||
{model.brand} {model.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<small style={{ color: '#666', fontSize: '0.85em' }}>
|
||
{formData.brand ? `Showing models for ${formData.brand}` : 'Select a brand to see related models'}
|
||
</small>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Gender</label>
|
||
<select name="gender" value={formData.gender} onChange={handleChange}>
|
||
<option value="men">Men</option>
|
||
<option value="women">Women</option>
|
||
<option value="unisex">Unisex</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Stock (Optional)</label>
|
||
<input type="number" name="stock" value={formData.stock} onChange={handleChange} placeholder="Leave empty to hide from customers" />
|
||
</div>
|
||
|
||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||
<label>
|
||
Override Price (Leave empty to use model default)
|
||
{formData.model_id && <span style={{ color: '#007bff', marginLeft: '0.5rem' }}>Using Model Default</span>}
|
||
</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
name="override_price"
|
||
value={formData.override_price}
|
||
onChange={handleChange}
|
||
placeholder={formData.model_id ? "Model default will be used" : "Override price for this product"}
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||
<label>
|
||
Sizes (comma separated)
|
||
{formData.model_id ? ' - Override model default' : ' *'}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="sizes"
|
||
value={formData.sizes}
|
||
onChange={handleChange}
|
||
placeholder={formData.model_id ? "Leave empty to use model sizes" : "S, M, L, XL"}
|
||
required={!formData.model_id}
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||
<label>Product Images</label>
|
||
|
||
{/* Image Upload - Multiple Files */}
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<input
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
onChange={handleImageUpload}
|
||
disabled={uploadingImage}
|
||
style={{ display: 'block', marginBottom: '0.5rem' }}
|
||
/>
|
||
<small style={{ color: '#666', fontSize: '0.85em' }}>
|
||
Tip: Select multiple images or upload a folder
|
||
</small>
|
||
{uploadingImage && <p style={{ color: '#666' }}>Uploading images...</p>}
|
||
</div>
|
||
|
||
{/* Image Preview */}
|
||
{formData.images && (
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: '1rem' }}>
|
||
{formData.images.split(',').map((img, idx) => {
|
||
const imgUrl = img.trim()
|
||
if (!imgUrl) return null
|
||
return (
|
||
<div key={idx} style={{ position: 'relative', border: '1px solid #ddd', borderRadius: '4px', padding: '0.5rem' }}>
|
||
<img
|
||
src={imgUrl}
|
||
alt={`Product ${idx + 1}`}
|
||
style={{ width: '100%', height: '100px', objectFit: 'cover', borderRadius: '4px' }}
|
||
onError={(e) => {
|
||
e.target.src = 'https://via.placeholder.com/100?text=Invalid'
|
||
}}
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => removeImage(imgUrl)}
|
||
style={{
|
||
position: 'absolute',
|
||
top: '0.25rem',
|
||
right: '0.25rem',
|
||
background: 'red',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '50%',
|
||
width: '24px',
|
||
height: '24px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
lineHeight: '1'
|
||
}}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Manual URL input (optional) */}
|
||
<details style={{ marginTop: '1rem' }}>
|
||
<summary style={{ cursor: 'pointer', color: '#666' }}>Or add image URLs manually</summary>
|
||
<input
|
||
type="text"
|
||
name="images"
|
||
value={formData.images}
|
||
onChange={handleChange}
|
||
placeholder="https://example.com/image1.jpg, https://..."
|
||
style={{ marginTop: '0.5rem', width: '100%' }}
|
||
/>
|
||
</details>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||
<input type="checkbox" name="is_featured" checked={formData.is_featured} onChange={handleChange} />
|
||
Featured Product
|
||
</label>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||
<input type="checkbox" name="is_on_sale" checked={formData.is_on_sale} onChange={handleChange} />
|
||
On Sale
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem' }}>
|
||
<button type="submit" className="btn btn-primary">
|
||
{editingProduct ? 'Update Product' : 'Create Product'}
|
||
</button>
|
||
<button type="button" className="btn" onClick={handleCancel} style={{ background: '#666' }}>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<h2>Products ({products.length})</h2>
|
||
{loading ? (
|
||
<p>Loading...</p>
|
||
) : (
|
||
<div style={{ overflowX: 'auto' }}>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', marginTop: '1rem' }}>
|
||
<thead>
|
||
<tr style={{ backgroundColor: '#f0f0f0', textAlign: 'left' }}>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>ID</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Name</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Brand</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Slug</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Price</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Stock</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Featured</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>On Sale</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{products.map(product => (
|
||
<tr key={product.id}>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{product.id}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{product.name}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{product.brand}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd', fontSize: '0.85em', color: '#666' }}>
|
||
{product.slug || '-'}
|
||
</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>₪{product.price}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{product.stock ?? 'Hidden'}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{product.is_featured ? '✓' : '-'}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{product.is_on_sale ? '✓' : '-'}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>
|
||
<button
|
||
onClick={() => handleEdit(product)}
|
||
style={{ marginRight: '0.5rem', padding: '0.25rem 0.75rem', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
|
||
>
|
||
Edit
|
||
</button>
|
||
<button
|
||
onClick={() => handleDelete(product.id)}
|
||
style={{ padding: '0.25rem 0.75rem', backgroundColor: '#f44336', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
|
||
>
|
||
Delete
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Categories Section */}
|
||
{activeTab === 'categories' && (
|
||
<>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
|
||
<h2>Manage Categories</h2>
|
||
<button
|
||
className="btn btn-primary"
|
||
onClick={() => {
|
||
setShowCategoryForm(!showCategoryForm)
|
||
setEditingCategory(null)
|
||
resetCategoryForm()
|
||
}}
|
||
>
|
||
{showCategoryForm ? 'Cancel' : '+ Add New Category'}
|
||
</button>
|
||
</div>
|
||
|
||
{showCategoryForm && (
|
||
<div style={{ backgroundColor: '#f5f5f5', padding: '2rem', borderRadius: '8px', marginBottom: '2rem' }}>
|
||
<h2>{editingCategory ? 'Edit Category' : 'Create New Category'}</h2>
|
||
<form onSubmit={handleCategorySubmit}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
|
||
<div className="form-group">
|
||
<label>Name *</label>
|
||
<input
|
||
type="text"
|
||
name="name"
|
||
value={categoryFormData.name}
|
||
onChange={handleCategoryChange}
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Slug *</label>
|
||
<input
|
||
type="text"
|
||
name="slug"
|
||
value={categoryFormData.slug}
|
||
onChange={handleCategoryChange}
|
||
placeholder="e.g., shoes, shirts, pants"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||
<label>Description</label>
|
||
<textarea
|
||
name="description"
|
||
value={categoryFormData.description}
|
||
onChange={handleCategoryChange}
|
||
rows="3"
|
||
placeholder="Category description"
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||
<label>Category Image</label>
|
||
<input
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={handleCategoryImageUpload}
|
||
disabled={uploadingImage}
|
||
style={{ display: 'block', marginBottom: '0.5rem' }}
|
||
/>
|
||
{uploadingImage && <p style={{ color: '#666' }}>Uploading image...</p>}
|
||
{categoryFormData.image && (
|
||
<div style={{ marginTop: '1rem' }}>
|
||
<img
|
||
src={categoryFormData.image}
|
||
alt="Category preview"
|
||
style={{ maxWidth: '200px', maxHeight: '200px', objectFit: 'cover', borderRadius: '8px' }}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginTop: '1.5rem' }}>
|
||
<button type="submit" className="btn btn-primary" style={{ marginRight: '1rem' }}>
|
||
{editingCategory ? 'Update Category' : 'Create Category'}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-secondary"
|
||
onClick={() => {
|
||
setShowCategoryForm(false)
|
||
setEditingCategory(null)
|
||
resetCategoryForm()
|
||
}}
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<h3>Categories ({categories.length})</h3>
|
||
{loading ? (
|
||
<p>Loading...</p>
|
||
) : (
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '1.5rem', marginTop: '1rem' }}>
|
||
{categories.map(category => (
|
||
<div key={category.id} style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1rem', backgroundColor: 'white' }}>
|
||
{category.image && (
|
||
<img
|
||
src={category.image}
|
||
alt={category.name}
|
||
style={{ width: '100%', height: '150px', objectFit: 'cover', borderRadius: '4px', marginBottom: '1rem' }}
|
||
/>
|
||
)}
|
||
<h4 style={{ margin: '0.5rem 0' }}>{category.name}</h4>
|
||
<p style={{ fontSize: '0.85em', color: '#666', margin: '0.25rem 0' }}>Slug: {category.slug}</p>
|
||
{category.description && (
|
||
<p style={{ fontSize: '0.9em', color: '#555', margin: '0.5rem 0' }}>{category.description}</p>
|
||
)}
|
||
<div style={{ marginTop: '1rem', display: 'flex', gap: '0.5rem' }}>
|
||
<button
|
||
onClick={() => handleEditCategory(category)}
|
||
style={{ flex: 1, padding: '0.5rem', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
|
||
>
|
||
Edit
|
||
</button>
|
||
<button
|
||
onClick={() => handleDeleteCategory(category.id)}
|
||
style={{ flex: 1, padding: '0.5rem', backgroundColor: '#f44336', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Brands Section */}
|
||
{activeTab === 'brands' && (
|
||
<>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
|
||
<h2>Manage Brands</h2>
|
||
<button
|
||
className="btn btn-primary"
|
||
onClick={() => {
|
||
setShowBrandForm(!showBrandForm)
|
||
setEditingBrand(null)
|
||
setBrandFormData({ name: '' })
|
||
}}
|
||
>
|
||
{showBrandForm ? 'Cancel' : '+ Add New Brand'}
|
||
</button>
|
||
</div>
|
||
|
||
{showBrandForm && (
|
||
<div style={{ backgroundColor: '#f5f5f5', padding: '2rem', borderRadius: '8px', marginBottom: '2rem' }}>
|
||
<h2>{editingBrand ? 'Edit Brand' : 'Add New Brand'}</h2>
|
||
<form onSubmit={(e) => {
|
||
e.preventDefault()
|
||
if (editingBrand) {
|
||
handleUpdateBrand()
|
||
} else {
|
||
handleAddBrand()
|
||
}
|
||
}}>
|
||
<div className="form-group">
|
||
<label>Brand Name *</label>
|
||
<input
|
||
type="text"
|
||
name="name"
|
||
value={brandFormData.name}
|
||
onChange={(e) => setBrandFormData({ name: e.target.value })}
|
||
placeholder="e.g., Nike, Adidas, New Balance"
|
||
required
|
||
style={{ width: '100%', maxWidth: '400px' }}
|
||
/>
|
||
</div>
|
||
|
||
<div style={{ marginTop: '1.5rem' }}>
|
||
<button type="submit" className="btn btn-primary" style={{ marginRight: '1rem' }}>
|
||
{editingBrand ? 'Update Brand' : 'Add Brand'}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-secondary"
|
||
onClick={() => {
|
||
setShowBrandForm(false)
|
||
setEditingBrand(null)
|
||
setBrandFormData({ name: '' })
|
||
}}
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<h3>Brands ({brands.length})</h3>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '1rem', marginTop: '1rem' }}>
|
||
{brands.map((brand, index) => {
|
||
const productCount = allProducts.filter(p => p.brand === brand).length
|
||
const modelCount = models.filter(m => m.brand === brand).length
|
||
|
||
return (
|
||
<div key={index} style={{
|
||
border: '1px solid #ddd',
|
||
borderRadius: '8px',
|
||
padding: '1rem',
|
||
backgroundColor: 'white',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'space-between'
|
||
}}>
|
||
<div>
|
||
<h4 style={{ margin: '0 0 0.5rem 0' }}>{brand}</h4>
|
||
<p style={{ fontSize: '0.85em', color: '#666', margin: '0.25rem 0' }}>
|
||
{productCount} product{productCount !== 1 ? 's' : ''}
|
||
</p>
|
||
<p style={{ fontSize: '0.85em', color: '#666', margin: '0.25rem 0' }}>
|
||
{modelCount} model{modelCount !== 1 ? 's' : ''}
|
||
</p>
|
||
</div>
|
||
<div style={{ marginTop: '1rem', display: 'flex', gap: '0.5rem' }}>
|
||
<button
|
||
onClick={() => {
|
||
setEditingBrand(brand)
|
||
setBrandFormData({ name: brand })
|
||
setShowBrandForm(true)
|
||
setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 100)
|
||
}}
|
||
style={{ flex: 1, padding: '0.5rem', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
|
||
>
|
||
Edit
|
||
</button>
|
||
<button
|
||
onClick={() => handleDeleteBrand(brand)}
|
||
style={{ flex: 1, padding: '0.5rem', backgroundColor: '#f44336', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
|
||
disabled={productCount > 0 || modelCount > 0}
|
||
title={productCount > 0 || modelCount > 0 ? 'Cannot delete brand in use' : 'Delete brand'}
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Models Section */}
|
||
{activeTab === 'models' && (
|
||
<>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
|
||
<h2>Manage Models</h2>
|
||
<button
|
||
className="btn btn-primary"
|
||
onClick={() => {
|
||
setShowModelForm(!showModelForm)
|
||
setEditingModel(null)
|
||
resetModelForm()
|
||
}}
|
||
>
|
||
{showModelForm ? 'Cancel' : '+ Add New Model'}
|
||
</button>
|
||
</div>
|
||
|
||
{showModelForm && (
|
||
<div style={{ backgroundColor: '#f5f5f5', padding: '2rem', borderRadius: '8px', marginBottom: '2rem' }}>
|
||
<h2>{editingModel ? 'Edit Model' : 'Create New Model'}</h2>
|
||
<form onSubmit={handleModelSubmit}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
|
||
<div className="form-group">
|
||
<label>Model Name * (e.g., 9060, Air Max 90)</label>
|
||
<input
|
||
type="text"
|
||
name="name"
|
||
value={modelFormData.name}
|
||
onChange={handleModelChange}
|
||
placeholder="9060"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Brand *</label>
|
||
<select
|
||
name="brand"
|
||
value={modelFormData.brand}
|
||
onChange={handleModelChange}
|
||
required
|
||
>
|
||
<option value="">Select Brand</option>
|
||
{brands.map(brand => (
|
||
<option key={brand} value={brand}>{brand}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Category *</label>
|
||
<select name="category_id" value={modelFormData.category_id} onChange={handleModelChange} required>
|
||
<option value="">Select Category</option>
|
||
{categories.map(category => (
|
||
<option key={category.id} value={category.id}>
|
||
{category.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Base Price (Default for all products)</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
name="base_price"
|
||
value={modelFormData.base_price}
|
||
onChange={handleModelChange}
|
||
placeholder="129.99"
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Stock (Optional)</label>
|
||
<input
|
||
type="number"
|
||
name="stock"
|
||
value={modelFormData.stock}
|
||
onChange={handleModelChange}
|
||
placeholder="0"
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||
<label>Default Sizes (comma separated)</label>
|
||
<input
|
||
type="text"
|
||
name="sizes"
|
||
value={modelFormData.sizes}
|
||
onChange={handleModelChange}
|
||
placeholder="7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12"
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||
<label>Description</label>
|
||
<textarea
|
||
name="description"
|
||
value={modelFormData.description}
|
||
onChange={handleModelChange}
|
||
rows="4"
|
||
placeholder="Model description..."
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginTop: '1.5rem' }}>
|
||
<button type="submit" className="btn btn-primary" style={{ marginRight: '1rem' }}>
|
||
{editingModel ? 'Update Model' : 'Create Model'}
|
||
</button>
|
||
<button type="button" className="btn btn-secondary" onClick={handleModelCancel}>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<h2>Models ({models.length})</h2>
|
||
{loading ? (
|
||
<p>Loading...</p>
|
||
) : (
|
||
<div style={{ overflowX: 'auto' }}>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', marginTop: '1rem' }}>
|
||
<thead>
|
||
<tr style={{ backgroundColor: '#f0f0f0', textAlign: 'left' }}>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>ID</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Model Name</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Brand</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Category</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Base Price</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Stock</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Sizes</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd' }}>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{models.map(model => (
|
||
<tr key={model.id}>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{model.id}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{model.name}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{model.brand}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{getCategoryName(model.category_id)}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>
|
||
{model.base_price ? `₪${parseFloat(model.base_price).toFixed(2)}` : '-'}
|
||
</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>
|
||
{model.stock ?? '-'}
|
||
</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd', fontSize: '0.85em' }}>
|
||
{model.sizes ? model.sizes.join(', ') : '-'}
|
||
</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>
|
||
<button
|
||
onClick={() => handleModelEdit(model)}
|
||
style={{
|
||
marginRight: '0.5rem',
|
||
padding: '0.25rem 0.75rem',
|
||
backgroundColor: '#4CAF50',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer'
|
||
}}
|
||
>
|
||
Edit
|
||
</button>
|
||
<button
|
||
onClick={() => handleModelDelete(model.id)}
|
||
style={{
|
||
padding: '0.25rem 0.75rem',
|
||
backgroundColor: '#f44336',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer'
|
||
}}
|
||
>
|
||
Delete
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Contact Messages Section */}
|
||
{activeTab === 'messages' && (
|
||
<>
|
||
<div style={{ marginBottom: '2rem' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
|
||
<h2>Contact Messages</h2>
|
||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||
<select
|
||
value={messageFilter}
|
||
onChange={(e) => setMessageFilter(e.target.value)}
|
||
style={{
|
||
padding: '0.5rem 1rem',
|
||
borderRadius: '4px',
|
||
border: '1px solid #ddd'
|
||
}}
|
||
>
|
||
<option value="all">All Messages</option>
|
||
<option value="new">New</option>
|
||
<option value="read">Read</option>
|
||
<option value="replied">Replied</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{filteredMessages.length === 0 ? (
|
||
<p style={{ textAlign: 'center', color: '#666' }}>No messages found.</p>
|
||
) : (
|
||
<div style={{ overflowX: 'auto' }}>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', backgroundColor: 'white', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
|
||
<thead>
|
||
<tr style={{ backgroundColor: '#f8f9fa' }}>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd', textAlign: 'left' }}>ID</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd', textAlign: 'left' }}>Name</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd', textAlign: 'left' }}>Email</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd', textAlign: 'left' }}>Phone</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd', textAlign: 'left' }}>Subject</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd', textAlign: 'left' }}>Date</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd', textAlign: 'left' }}>Status</th>
|
||
<th style={{ padding: '0.75rem', border: '1px solid #ddd', textAlign: 'left' }}>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{filteredMessages.map(msg => (
|
||
<tr
|
||
key={msg.id}
|
||
style={{
|
||
backgroundColor: !msg.is_read ? '#fff3cd' : 'white',
|
||
cursor: 'pointer'
|
||
}}
|
||
onClick={() => {
|
||
setSelectedMessage(msg)
|
||
setMessageNotes(msg.admin_notes || '')
|
||
setShowMessageModal(true)
|
||
}}
|
||
>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>
|
||
{!msg.is_read && <span style={{ color: '#dc3545', marginRight: '5px', fontWeight: 'bold' }}>●</span>}
|
||
{msg.id}
|
||
</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{msg.full_name}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{msg.email}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{msg.phone || '-'}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>{msg.subject}</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>
|
||
{new Date(msg.created_at).toLocaleDateString()}
|
||
</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>
|
||
<span style={{
|
||
padding: '0.25rem 0.5rem',
|
||
borderRadius: '12px',
|
||
fontSize: '0.85rem',
|
||
fontWeight: 'bold',
|
||
backgroundColor: msg.status === 'new' ? '#dc3545' : msg.status === 'read' ? '#ffc107' : '#28a745',
|
||
color: 'white'
|
||
}}>
|
||
{msg.status.toUpperCase()}
|
||
</span>
|
||
</td>
|
||
<td style={{ padding: '0.75rem', border: '1px solid #ddd' }}>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleDeleteMessage(msg.id)
|
||
}}
|
||
style={{
|
||
padding: '0.25rem 0.75rem',
|
||
backgroundColor: '#f44336',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer'
|
||
}}
|
||
>
|
||
Delete
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
|
||
{/* Message Modal */}
|
||
{showMessageModal && selectedMessage && (
|
||
<div style={{
|
||
position: 'fixed',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
zIndex: 1000
|
||
}}>
|
||
<div style={{
|
||
backgroundColor: 'white',
|
||
padding: '2rem',
|
||
borderRadius: '8px',
|
||
maxWidth: '600px',
|
||
width: '90%',
|
||
maxHeight: '80vh',
|
||
overflowY: 'auto'
|
||
}}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
|
||
<h2>Message Details</h2>
|
||
<button
|
||
onClick={() => setShowMessageModal(false)}
|
||
style={{
|
||
padding: '0.5rem 1rem',
|
||
backgroundColor: '#6c757d',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer'
|
||
}}
|
||
>
|
||
Close
|
||
</button>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<strong>From:</strong> {selectedMessage.full_name}
|
||
</div>
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<strong>Email:</strong> {selectedMessage.email}
|
||
</div>
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<strong>Phone:</strong> {selectedMessage.phone || 'Not provided'}
|
||
</div>
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<strong>Subject:</strong> {selectedMessage.subject}
|
||
</div>
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<strong>Date:</strong> {new Date(selectedMessage.created_at).toLocaleString()}
|
||
</div>
|
||
<div style={{ marginBottom: '1.5rem' }}>
|
||
<strong>Message:</strong>
|
||
<div style={{
|
||
marginTop: '0.5rem',
|
||
padding: '1rem',
|
||
backgroundColor: '#f8f9fa',
|
||
borderRadius: '4px',
|
||
whiteSpace: 'pre-wrap'
|
||
}}>
|
||
{selectedMessage.message}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 'bold' }}>
|
||
Status:
|
||
</label>
|
||
<select
|
||
value={selectedMessage.status}
|
||
onChange={(e) => setSelectedMessage({ ...selectedMessage, status: e.target.value })}
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.5rem',
|
||
borderRadius: '4px',
|
||
border: '1px solid #ddd'
|
||
}}
|
||
>
|
||
<option value="new">New</option>
|
||
<option value="read">Read</option>
|
||
<option value="replied">Replied</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '1.5rem' }}>
|
||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 'bold' }}>
|
||
Admin Notes:
|
||
</label>
|
||
<textarea
|
||
value={messageNotes}
|
||
onChange={(e) => setMessageNotes(e.target.value)}
|
||
placeholder="Add internal notes about this message..."
|
||
rows="4"
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.5rem',
|
||
borderRadius: '4px',
|
||
border: '1px solid #ddd',
|
||
resize: 'vertical'
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||
<button
|
||
onClick={() => handleUpdateMessage(selectedMessage.id)}
|
||
style={{
|
||
flex: 1,
|
||
padding: '0.75rem',
|
||
backgroundColor: '#28a745',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
fontWeight: 'bold'
|
||
}}
|
||
>
|
||
Save Changes
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
handleDeleteMessage(selectedMessage.id)
|
||
setShowMessageModal(false)
|
||
}}
|
||
style={{
|
||
padding: '0.75rem 1.5rem',
|
||
backgroundColor: '#dc3545',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer'
|
||
}}
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{toast && (
|
||
<Toast
|
||
message={toast.message}
|
||
type={toast.type}
|
||
onClose={() => setToast(null)}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|