= step.id
+ className={`flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${currentStep >= step.id
? "bg-orange-500 border-orange-500 text-white shadow-lg"
: currentStep === step.id - 1
? "border-orange-300 text-orange-400"
: "border-white/30 text-white/40"
- }`}
+ }`}
>
{step.id}
= step.id ? "text-orange-400" : "text-white/60"
- }`}
+ className={`text-sm font-semibold ${currentStep >= step.id ? "text-orange-400" : "text-white/60"
+ }`}
>
{step.name}
@@ -1152,11 +1155,10 @@ function ArchitectureDesignerStep({ recommendations, onBack }: { recommendations
diff --git a/src/hooks/useTemplates.ts b/src/hooks/useTemplates.ts
index de8502b..ae8d748 100644
--- a/src/hooks/useTemplates.ts
+++ b/src/hooks/useTemplates.ts
@@ -60,7 +60,7 @@ export function useTemplates() {
}
// Convert database templates to the format expected by the UI
- const getTemplatesForUI = () => {
+ const getTemplatesForUI = async () => {
const allTemplates: Array
= []
- Object.entries(templates).forEach(([category, categoryTemplates]) => {
- categoryTemplates.forEach((template) => {
- // Convert database template to UI format
- const uiTemplate = {
- ...template,
- features: [], // Will be populated when template is selected
- complexity: 3, // Default complexity
- timeEstimate: "2-4 weeks", // Default time estimate
- techStack: ["Next.js", "PostgreSQL", "Tailwind CSS"], // Default tech stack
- popularity: template.avg_rating ? Math.round(template.avg_rating * 20) : 75, // Convert rating to popularity
- lastUpdated: template.updated_at ? new Date(template.updated_at).toISOString().split('T')[0] : undefined,
- featureCount: (template as any).feature_count ?? 0
+ for (const [category, categoryTemplates] of Object.entries(templates)) {
+ for (const template of categoryTemplates) {
+ try {
+ // Fetch features for this template
+ const features = await templateService.getFeaturesForTemplate(template.id)
+ const featureNames = features.map(f => f.name)
+
+ // Convert database template to UI format
+ const uiTemplate = {
+ ...template,
+ features: featureNames, // Use actual features from API
+ complexity: 3, // Default complexity
+ timeEstimate: "2-4 weeks", // Default time estimate
+ techStack: ["Next.js", "PostgreSQL", "Tailwind CSS"], // Default tech stack
+ popularity: template.avg_rating ? Math.round(template.avg_rating * 20) : 75, // Convert rating to popularity
+ lastUpdated: template.updated_at ? new Date(template.updated_at).toISOString().split('T')[0] : undefined,
+ featureCount: featureNames.length
+ }
+ allTemplates.push(uiTemplate)
+ } catch (error) {
+ console.error(`Error fetching features for template ${template.id}:`, error)
+ // Fallback with empty features
+ const uiTemplate = {
+ ...template,
+ features: [],
+ complexity: 3,
+ timeEstimate: "2-4 weeks",
+ techStack: ["Next.js", "PostgreSQL", "Tailwind CSS"],
+ popularity: template.avg_rating ? Math.round(template.avg_rating * 20) : 75,
+ lastUpdated: template.updated_at ? new Date(template.updated_at).toISOString().split('T')[0] : undefined,
+ featureCount: 0
+ }
+ allTemplates.push(uiTemplate)
}
- allTemplates.push(uiTemplate)
- })
- })
+ }
+ }
return allTemplates
}
diff --git a/src/lib/template-service.ts b/src/lib/template-service.ts
index 5593c4f..2596e70 100644
--- a/src/lib/template-service.ts
+++ b/src/lib/template-service.ts
@@ -149,15 +149,20 @@ class TemplateService {
}
try {
- const merged = await this.makeRequest(`/api/features/templates/${templateId}/merged`)
+ const merged = await this.makeRequest(`/api/templates/${templateId}/features`)
return dedupe(merged)
} catch {
// Fallback to default-only if merged endpoint unsupported
- const defaults = await this.makeRequest(`/api/templates/${templateId}/features`)
+ const defaults = await this.makeRequest(`/api/features/templates/${templateId}/merged`)
return dedupe(defaults)
}
}
+ // Default-only features for template (does not include custom/merged)
+ // async getDefaultFeaturesForTemplate(templateId: string): Promise {
+ // return this.makeRequest(`/api/templates/${templateId}/features`)
+ // }
+
async searchFeatures(searchTerm: string, templateId?: string): Promise {
const q = encodeURIComponent(searchTerm)
const extra = templateId ? `&template_id=${encodeURIComponent(templateId)}` : ''