adding brand management
This commit is contained in:
fahed
336
client/src/pages/Brands.jsx
Normal file
336
client/src/pages/Brands.jsx
Normal file
@@ -0,0 +1,336 @@
|
||||
import { useState, useEffect, useContext, useRef } from 'react'
|
||||
import { Tag, Plus, Edit2, Trash2, Upload, Image } from 'lucide-react'
|
||||
import { api } from '../utils/api'
|
||||
import { useLanguage } from '../i18n/LanguageContext'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import { AppContext } from '../App'
|
||||
import Modal from '../components/Modal'
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:3001/api'
|
||||
|
||||
const EMPTY_BRAND = { name: '', name_ar: '', priority: 2, icon: '' }
|
||||
|
||||
export default function Brands() {
|
||||
const { t, lang } = useLanguage()
|
||||
const { user } = useAuth()
|
||||
const { getBrandName } = useContext(AppContext)
|
||||
const isSuperadminOrManager = user?.role === 'superadmin' || user?.role === 'manager'
|
||||
|
||||
const [brands, setBrands] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [editingBrand, setEditingBrand] = useState(null)
|
||||
const [brandForm, setBrandForm] = useState(EMPTY_BRAND)
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
const [brandToDelete, setBrandToDelete] = useState(null)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const fileInputRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
loadBrands()
|
||||
}, [])
|
||||
|
||||
const loadBrands = async () => {
|
||||
try {
|
||||
const data = await api.get('/brands')
|
||||
setBrands(Array.isArray(data) ? data : (data.data || []))
|
||||
} catch (err) {
|
||||
console.error('Failed to load brands:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const openNewBrand = () => {
|
||||
setEditingBrand(null)
|
||||
setBrandForm(EMPTY_BRAND)
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const openEditBrand = (brand) => {
|
||||
setEditingBrand(brand)
|
||||
setBrandForm({
|
||||
name: brand.name || '',
|
||||
name_ar: brand.name_ar || '',
|
||||
priority: brand.priority ?? 2,
|
||||
icon: brand.icon || '',
|
||||
})
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const saveBrand = async () => {
|
||||
try {
|
||||
const data = {
|
||||
name: brandForm.name,
|
||||
name_ar: brandForm.name_ar || null,
|
||||
priority: brandForm.priority ? Number(brandForm.priority) : 2,
|
||||
icon: brandForm.icon || null,
|
||||
}
|
||||
if (editingBrand) {
|
||||
await api.patch(`/brands/${editingBrand.Id || editingBrand._id || editingBrand.id}`, data)
|
||||
} else {
|
||||
await api.post('/brands', data)
|
||||
}
|
||||
setShowModal(false)
|
||||
setEditingBrand(null)
|
||||
loadBrands()
|
||||
} catch (err) {
|
||||
console.error('Failed to save brand:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDelete = async () => {
|
||||
if (!brandToDelete) return
|
||||
try {
|
||||
await api.delete(`/brands/${brandToDelete.Id || brandToDelete._id || brandToDelete.id}`)
|
||||
setBrandToDelete(null)
|
||||
setShowDeleteModal(false)
|
||||
loadBrands()
|
||||
} catch (err) {
|
||||
console.error('Failed to delete brand:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogoUpload = async (brand, file) => {
|
||||
const brandId = brand.Id || brand._id || brand.id
|
||||
setUploading(true)
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const res = await fetch(`${API_BASE}/brands/${brandId}/logo`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
credentials: 'include',
|
||||
})
|
||||
if (!res.ok) throw new Error('Upload failed')
|
||||
loadBrands()
|
||||
} catch (err) {
|
||||
console.error('Failed to upload logo:', err)
|
||||
} finally {
|
||||
setUploading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getBrandId = (brand) => brand.Id || brand._id || brand.id
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="w-8 h-8 border-3 border-brand-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-text-primary flex items-center gap-3">
|
||||
<Tag className="w-7 h-7 text-brand-primary" />
|
||||
{t('brands.title')}
|
||||
</h1>
|
||||
<p className="text-sm text-text-tertiary mt-1">{t('brands.manageBrands')}</p>
|
||||
</div>
|
||||
{isSuperadminOrManager && (
|
||||
<button
|
||||
onClick={openNewBrand}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
{t('brands.addBrand')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Brand Cards Grid */}
|
||||
{brands.length === 0 ? (
|
||||
<div className="bg-white rounded-xl border border-border py-16 text-center">
|
||||
<Tag className="w-12 h-12 text-text-quaternary mx-auto mb-3" />
|
||||
<p className="text-sm text-text-tertiary">{t('brands.noBrands')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{brands.map(brand => {
|
||||
const displayName = lang === 'ar' && brand.name_ar ? brand.name_ar : brand.name
|
||||
return (
|
||||
<div
|
||||
key={getBrandId(brand)}
|
||||
className={`bg-white rounded-xl border border-border overflow-hidden hover:shadow-md transition-all ${isSuperadminOrManager ? 'cursor-pointer' : ''}`}
|
||||
onClick={() => isSuperadminOrManager && openEditBrand(brand)}
|
||||
>
|
||||
{/* Logo area */}
|
||||
<div className="h-32 bg-surface-secondary flex items-center justify-center relative">
|
||||
{brand.logo ? (
|
||||
<img
|
||||
src={`${API_BASE}/uploads/${brand.logo}`}
|
||||
alt={displayName}
|
||||
className="w-full h-full object-contain p-4"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-4xl">
|
||||
{brand.icon || <Image className="w-12 h-12 text-text-quaternary" />}
|
||||
</div>
|
||||
)}
|
||||
{isSuperadminOrManager && (
|
||||
<div className="absolute top-2 right-2 flex gap-1" onClick={e => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={() => openEditBrand(brand)}
|
||||
className="p-1.5 bg-white/90 hover:bg-white rounded-lg text-text-tertiary hover:text-text-primary shadow-sm"
|
||||
title={t('common.edit')}
|
||||
>
|
||||
<Edit2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setBrandToDelete(brand); setShowDeleteModal(true) }}
|
||||
className="p-1.5 bg-white/90 hover:bg-white rounded-lg text-text-tertiary hover:text-red-500 shadow-sm"
|
||||
title={t('common.delete')}
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card body */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
{brand.icon && <span className="text-lg">{brand.icon}</span>}
|
||||
<h3 className="text-sm font-semibold text-text-primary truncate">{displayName}</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-[11px] text-text-tertiary">
|
||||
{brand.name && <span>EN: {brand.name}</span>}
|
||||
{brand.name_ar && <span>AR: {brand.name_ar}</span>}
|
||||
<span>Priority: {brand.priority ?? '—'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create/Edit Modal */}
|
||||
<Modal
|
||||
isOpen={showModal}
|
||||
onClose={() => { setShowModal(false); setEditingBrand(null) }}
|
||||
title={editingBrand ? t('brands.editBrand') : t('brands.addBrand')}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandName')} *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={brandForm.name}
|
||||
onChange={e => setBrandForm(f => ({ ...f, name: e.target.value }))}
|
||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
|
||||
placeholder="Brand name in English"
|
||||
dir="ltr"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandNameAr')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={brandForm.name_ar}
|
||||
onChange={e => setBrandForm(f => ({ ...f, name_ar: e.target.value }))}
|
||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
|
||||
placeholder="اسم العلامة بالعربي"
|
||||
dir="rtl"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandPriority')}</label>
|
||||
<input
|
||||
type="number"
|
||||
value={brandForm.priority}
|
||||
onChange={e => setBrandForm(f => ({ ...f, priority: e.target.value }))}
|
||||
min="1"
|
||||
max="10"
|
||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandIcon')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={brandForm.icon}
|
||||
onChange={e => setBrandForm(f => ({ ...f, icon: e.target.value }))}
|
||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
|
||||
placeholder="emoji"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logo upload — only for existing brands */}
|
||||
{editingBrand && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-1">{t('brands.logo')}</label>
|
||||
{editingBrand.logo && (
|
||||
<div className="mb-2 p-2 bg-surface-secondary rounded-lg inline-block">
|
||||
<img
|
||||
src={`${API_BASE}/uploads/${editingBrand.logo}`}
|
||||
alt="Logo"
|
||||
className="h-16 object-contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={e => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) handleLogoUpload(editingBrand, file)
|
||||
e.target.value = ''
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploading}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border border-border rounded-lg hover:bg-surface-secondary transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Upload className="w-3.5 h-3.5" />
|
||||
{uploading ? t('common.loading') : editingBrand.logo ? t('brands.changeLogo') : t('brands.uploadLogo')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
|
||||
<button
|
||||
onClick={() => { setShowModal(false); setEditingBrand(null) }}
|
||||
className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
|
||||
>
|
||||
{t('common.cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={saveBrand}
|
||||
disabled={!brandForm.name}
|
||||
className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
|
||||
>
|
||||
{t('common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Delete Confirmation */}
|
||||
<Modal
|
||||
isOpen={showDeleteModal}
|
||||
onClose={() => { setShowDeleteModal(false); setBrandToDelete(null) }}
|
||||
title={t('brands.deleteBrand')}
|
||||
isConfirm
|
||||
danger
|
||||
confirmText={t('common.delete')}
|
||||
onConfirm={confirmDelete}
|
||||
>
|
||||
{t('brands.deleteBrandConfirm')}
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user