diff --git a/src/components/admin/admin-templates-list.tsx b/src/components/admin/admin-templates-list.tsx index 1446803..b8b3bad 100644 --- a/src/components/admin/admin-templates-list.tsx +++ b/src/components/admin/admin-templates-list.tsx @@ -24,6 +24,7 @@ import { X } from 'lucide-react' import { adminApi, formatDate, getComplexityColor } from '@/lib/api/admin' +import { getApiUrl } from '@/config/backend' import { AdminTemplate, AdminStats } from '@/types/admin.types' import { AdminFeatureSelection } from './admin-feature-selection' @@ -136,8 +137,8 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps updated_at: new Date().toISOString() } - // Call API to create template (you'll need to implement this endpoint) - const response = await fetch('/api/templates', { + // Call API to create template using backend base URL + const response = await fetch(getApiUrl('/api/templates'), { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -177,20 +178,35 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps // Get category icon const getCategoryIcon = (category: string) => { switch (category.toLowerCase()) { - case 'marketing': - return Zap - case 'software': - return Code - case 'seo': - return BarChart3 + case 'food delivery': + return ShoppingCart + case 'e-commerce': case 'ecommerce': return ShoppingCart - case 'portfolio': + case 'saas platform': + return Code + case 'mobile app': + return Code + case 'dashboard': + return BarChart3 + case 'crm system': return Briefcase - case 'business': - return Briefcase - case 'education': + case 'learning platform': return GraduationCap + case 'healthcare': + return AlertCircle + case 'real estate': + return Globe + case 'travel': + return Globe + case 'entertainment': + return Zap + case 'finance': + return BarChart3 + case 'social media': + return Zap + case 'marketplace': + return ShoppingCart default: return Globe } @@ -198,37 +214,69 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps // Get category stats for filters const getCategoryStats = () => { + // Start with "All Templates" const categoryStats = [ - { id: 'all', name: 'All Templates', count: templates.length, icon: Globe }, - { id: 'marketing', name: 'Marketing', count: 0, icon: Zap }, - { id: 'software', name: 'Software', count: 0, icon: Code }, - { id: 'seo', name: 'SEO', count: 0, icon: BarChart3 }, - { id: 'ecommerce', name: 'E-commerce', count: 0, icon: ShoppingCart }, - { id: 'portfolio', name: 'Portfolio', count: 0, icon: Briefcase }, - { id: 'business', name: 'Business', count: 0, icon: Briefcase }, - { id: 'education', name: 'Education', count: 0, icon: GraduationCap } + { id: 'all', name: 'All Templates', count: templates.length, icon: Globe } ] + // Add categories based on your actual categories array + categories.forEach(category => { + if (category !== 'Other') { // Skip 'Other' as it will be handled separately + categoryStats.push({ + id: category.toLowerCase().replace(/\s+/g, '-'), + name: category, + count: 0, + icon: getCategoryIcon(category) + }) + } + }) + + // Add 'Other' category at the end + categoryStats.push({ + id: 'other', + name: 'Other', + count: 0, + icon: Globe + }) + // Count templates by category templates.forEach(template => { - const categoryId = template.category?.toLowerCase() - const categoryItem = categoryStats.find(cat => cat.id === categoryId) - if (categoryItem) { - categoryItem.count++ + const templateCategory = template.category + if (templateCategory) { + const categoryItem = categoryStats.find(cat => + cat.name.toLowerCase() === templateCategory.toLowerCase() || + cat.id === templateCategory.toLowerCase().replace(/\s+/g, '-') + ) + if (categoryItem) { + categoryItem.count++ + } else { + // If category doesn't match any predefined category, add to 'Other' + const otherCategory = categoryStats.find(cat => cat.id === 'other') + if (otherCategory) { + otherCategory.count++ + } + } } }) return categoryStats } - // Filter templates based on search + // Filter templates based on search and category const filteredTemplates = templates.filter(template => { const matchesSearch = !searchQuery || template.title?.toLowerCase().includes(searchQuery.toLowerCase()) || template.description?.toLowerCase().includes(searchQuery.toLowerCase()) || template.type?.toLowerCase().includes(searchQuery.toLowerCase()) - return matchesSearch + const matchesCategory = categoryFilter === 'all' || + template.category?.toLowerCase() === categoryFilter.toLowerCase() || + template.category?.toLowerCase().replace(/\s+/g, '-') === categoryFilter || + (categoryFilter === 'other' && !categories.some(cat => + cat.toLowerCase() === template.category?.toLowerCase() + )) + + return matchesSearch && matchesCategory }) const TemplateCard = ({ template }: { template: AdminTemplate }) => ( @@ -427,30 +475,7 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps - {/* Category Filters */} -
- {getCategoryStats().map((category) => { - const Icon = category.icon - const active = categoryFilter === category.id - return ( - - ) - })} -
+ {/* Category Filters removed; using only dropdown above */} {/* Create Template Modal */}