feat: UI에 display_name 및 variant 정보 표시

- 입고 상세 모달에 display_name과 variant 뱃지 표시
- 재고 상세 모달에 품명 컬럼 추가
- 조제 시 원산지 선택에 display_name 표시
- 형태, 가공, 등급 정보를 색상별 뱃지로 구분

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

static/app.js

@@ -1231,6 +1231,7 @@ $(document).ready(function() {
                                     <thead>
                                         <tr>
                                             <th>로트ID</th>
+                                            <th>품명</th>
                                             <th>수량</th>
                                             <th>단가</th>
                                             <th>입고일</th>
@@ -1240,9 +1241,19 @@ $(document).ready(function() {
                                     <tbody>`;
 
                     origin.lots.forEach(lot => {
+                        // variant 속성들을 뱃지로 표시
+                        let variantBadges = '';
+                        if (lot.form) variantBadges += `<span class="badge bg-info ms-1">${lot.form}</span>`;
+                        if (lot.processing) variantBadges += `<span class="badge bg-warning ms-1">${lot.processing}</span>`;
+                        if (lot.grade) variantBadges += `<span class="badge bg-success ms-1">${lot.grade}</span>`;
+
                         originsHtml += `
                             <tr>
                                 <td>#${lot.lot_id}</td>
+                                <td>
+                                    ${lot.display_name ? `<small class="text-primary">${lot.display_name}</small>` : '-'}
+                                    ${variantBadges}
+                                </td>
                                 <td>${lot.quantity_onhand.toFixed(1)}g</td>
                                 <td>${formatCurrency(lot.unit_price_per_g)}</td>
                                 <td>${lot.received_date}</td>
@@ -1389,9 +1400,22 @@ $(document).ready(function() {
                 let linesHtml = '';
 
                 data.lines.forEach(line => {
+                    // display_name이 있으면 표시, 없으면 herb_name
+                    const displayName = line.display_name || line.herb_name;
+
+                    // variant 속성들을 뱃지로 표시
+                    let variantBadges = '';
+                    if (line.form) variantBadges += `<span class="badge bg-info ms-1">${line.form}</span>`;
+                    if (line.processing) variantBadges += `<span class="badge bg-warning ms-1">${line.processing}</span>`;
+                    if (line.grade) variantBadges += `<span class="badge bg-success ms-1">${line.grade}</span>`;
+
                     linesHtml += `
                         <tr>
-                            <td>${line.herb_name}</td>
+                            <td>
+                                <div>${line.herb_name}</div>
+                                ${line.display_name ? `<small class="text-primary">${line.display_name}</small>` : ''}
+                                ${variantBadges}
+                            </td>
                             <td>${line.insurance_code || '-'}</td>
                             <td>${line.origin_country || '-'}</td>
                             <td>${line.quantity_g}g</td>
@@ -1705,11 +1729,28 @@ $(document).ready(function() {
                     origins.forEach(origin => {
                         const stockStatus = origin.total_quantity >= requiredQty ? '' : ' (재고 부족)';
                         const priceInfo = `${formatCurrency(origin.min_price)}/g`;
+
+                        // 해당 원산지의 display_name 목록 생성
+                        let displayNames = [];
+                        if (origin.lots && origin.lots.length > 0) {
+                            origin.lots.forEach(lot => {
+                                if (lot.display_name) {
+                                    displayNames.push(lot.display_name);
+                                }
+                            });
+                        }
+
+                        // 고유한 display_name만 표시 (중복 제거)
+                        const uniqueDisplayNames = [...new Set(displayNames)];
+                        const displayNameText = uniqueDisplayNames.length > 0
+                            ? ` [${uniqueDisplayNames.join(', ')}]`
+                            : '';
+
                         const option = `<option value="${origin.origin_country}"
                                               data-price="${origin.min_price}"
                                               data-available="${origin.total_quantity}"
                                               ${origin.total_quantity < requiredQty ? 'disabled' : ''}>
-                                        ${origin.origin_country} - ${priceInfo} (재고: ${origin.total_quantity.toFixed(1)}g)${stockStatus}
+                                        ${origin.origin_country}${displayNameText} - ${priceInfo} (재고: ${origin.total_quantity.toFixed(1)}g)${stockStatus}
                                       </option>`;
                         selectElement.append(option);
                     });