frontend new admin changes

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)
+      // Call API to create template using backend base URL
-      const response = await fetch('/api/templates', {
+      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':
+      case 'food delivery':
-        return Zap
+        return ShoppingCart
-      case 'software':
+      case 'e-commerce':
-        return Code
-      case 'seo':
-        return BarChart3
       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':
+      case 'learning platform':
-        return Briefcase
-      case 'education':
         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: '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 }
     ]
 
+    // 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 templateCategory = template.category
-      const categoryItem = categoryStats.find(cat => cat.id === categoryId)
+      if (templateCategory) {
-      if (categoryItem) {
+        const categoryItem = categoryStats.find(cat => 
-        categoryItem.count++
+          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
         </Select>
       </div>
 
-      {/* Category Filters */}
+      {/* Category Filters removed; using only dropdown above */}
-      <div className="flex flex-wrap gap-4">
-        {getCategoryStats().map((category) => {
-          const Icon = category.icon
-          const active = categoryFilter === category.id
-          return (
-            <button
-              key={category.id}
-              onClick={() => setCategoryFilter(category.id)}
-              className={`flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all ${
-                active
-                  ? "bg-orange-500 text-black border-orange-500"
-                  : "bg-white/5 text-white/80 border-white/10 hover:bg-white/10"
-              }`}
-            >
-              <Icon className="h-4 w-4" />
-              <span className="font-medium">{category.name}</span>
-              <Badge variant="secondary" className="ml-1 bg-white/10 text-white">
-                {category.count}
-              </Badge>
-            </button>
-          )
-        })}
-      </div>
 
       {/* Create Template Modal */}
       <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>