[KAMINO-749] display therapies

src/app/api/analyze/route.ts

@@ -95,7 +95,8 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({
       lesionName: lesionData.name,
       lesionMessage: lesionData.lesionMessage,
-      therapyMessage: lesionData.therapyMessage
+      therapyMessage: lesionData.therapyMessage,
+      products: lesionData.products
     });  } catch (error) {
     console.error('Analysis error:', error);
 

src/app/page.module.css

@@ -145,4 +145,69 @@
 
 .results p:last-child {
   margin-bottom: 0;
+}
+
+.productsContainer {
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 1px solid #d0e7ff;
+}
+
+.productsContainer h3 {
+  color: #333;
+  font-size: 1.3rem;
+  margin-bottom: 1.5rem;
+}
+
+.productsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.productCard {
+  background: white;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.2s;
+}
+
+.productCard:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.productCard a {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+
+.productImagePlaceholder {
+  width: 100%;
+  height: 200px;
+  background: #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 0.75rem;
+}
+
+.productName {
+  display: block;
+  font-weight: 600;
+  color: #0070f3;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
+.productCard a:hover .productName {
+  text-decoration: underline;
+}
+
+.productDescription {
+  font-size: 0.9rem;
+  color: #666;
+  line-height: 1.5;
+  margin-top: 0.5rem;
+  margin-bottom: 0;
 }

src/app/page.tsx

@@ -2,11 +2,13 @@
 
 import { useState } from 'react';
 import styles from './page.module.css';
+import type { ProductInfo } from '@/types/skincare-data.types';
 
 interface AnalysisResult {
   lesionName: string;
   lesionMessage: string;
   therapyMessage: string;
+  products: ProductInfo[];
 }
 
 export default function Home() {
@@ -161,6 +163,23 @@ export default function Home() {
             <p>It looks like you might have <strong>{result.lesionName}</strong>.</p>
           )}
           <p>{result.therapyMessage}</p>
+
+          {result.products && result.products.length > 0 && (
+            <div className={styles.productsContainer}>
+              <h3>Recommended Products</h3>
+              <div className={styles.productsGrid}>
+                {result.products.map((product) => (
+                  <div key={product.productId} className={styles.productCard}>
+                    <a href={product.purchaseLink} target="_blank" rel="noopener noreferrer">
+                      <div className={styles.productImagePlaceholder}></div>
+                      <span className={styles.productName}>{product.productName}</span>
+                    </a>
+                    <p className={styles.productDescription}>{product.description}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>

src/lib/lesion-info.ts

@@ -1,9 +1,41 @@
 import { lesionsData } from './lesions-data';
+import { therapiesData } from './therapies-data';
+import { productsData } from './products-data';
+import type { ProductInfo, LesionInfo } from '@/types/skincare-data.types';
 
-interface LesionInfo {
-  name: string;
-  lesionMessage: string;
-  therapyMessage: string;
+// Helper function to get products from therapy IDs
+function getProductsFromTherapyIds(therapyIdsString: any): ProductInfo[] {
+  if (!therapyIdsString || typeof therapyIdsString !== 'string') {
+    return [];
+  }
+
+  const therapyIds = therapyIdsString.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id));
+  const productIds = new Set<number>();
+
+  // Get all product IDs from the therapies
+  therapyIds.forEach(therapyId => {
+    const therapy = therapiesData.find(t => t.therapyid === therapyId);
+    if (therapy && therapy.productIds) {
+      const ids = therapy.productIds.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id));
+      ids.forEach(id => productIds.add(id));
+    }
+  });
+
+  // Get product details
+  const products: ProductInfo[] = [];
+  productIds.forEach(productId => {
+    const product = productsData.find(p => p.productId === productId);
+    if (product) {
+      products.push({
+        productId: product.productId,
+        productName: product.productName,
+        description: product.description,
+        purchaseLink: product.purchaseLink
+      });
+    }
+  });
+
+  return products;
 }
 
 // Build lookup maps from the lesions data for faster access
@@ -12,10 +44,15 @@ const lesionDatabaseById: Record<number, LesionInfo> = {};
 
 lesionsData.forEach((lesion) => {
   if (lesion.lesionName && lesion.therapyMessage) {
+    const therapyIds = typeof lesion.therapyIds === 'string' ? lesion.therapyIds.split(',').map(id => id.trim()) : [];
+    const products = getProductsFromTherapyIds(lesion.therapyIds);
+
     const lesionInfo: LesionInfo = {
       name: lesion.lesionName,
       lesionMessage: typeof lesion.lesionMessage === 'string' ? lesion.lesionMessage : '',
-      therapyMessage: lesion.therapyMessage
+      therapyMessage: lesion.therapyMessage,
+      therapyIds: therapyIds,
+      products: products
     };
 
     // Index by name (normalized)
@@ -32,7 +69,9 @@ lesionsData.forEach((lesion) => {
 const defaultResponse: LesionInfo = {
   name: "I'm not sure what the condition of your skin is",
   lesionMessage: "I'm not sure what the condition of your skin is",
-  therapyMessage: "Just to be safe, get this checked out by a dermatologist."
+  therapyMessage: "Just to be safe, get this checked out by a dermatologist.",
+  therapyIds: [],
+  products: []
 };
 
 export function getLesionData(lesionName: string | undefined): LesionInfo {

src/types/skincare-data.types.ts

@@ -27,6 +27,23 @@ export interface ProductData {
   productUrl?: string | null;
 }
 
+/** Product info for recommendations (matches actual data structure) */
+export interface ProductInfo {
+  productId: number;
+  productName: string;
+  description: string;
+  purchaseLink: string;
+}
+
+/** Lesion info with resolved products */
+export interface LesionInfo {
+  name: string;
+  lesionMessage: string;
+  therapyMessage: string;
+  therapyIds: string[];
+  products: ProductInfo[];
+}
+
 /** Combined dataset structure (for convenience) */
 export interface SkincareDataset {
   lesions: LesionData[];