diff --git a/backend/templates/admin_return_management.html b/backend/templates/admin_return_management.html index af04976..e63a61c 100644 --- a/backend/templates/admin_return_management.html +++ b/backend/templates/admin_return_management.html @@ -96,7 +96,7 @@ padding: 24px; } - /* ══════════════════ 통계 카드 ══════════════════ */ + /* ══════════════════ 통계 카드 (2줄) ══════════════════ */ .stats-row { display: flex; gap: 16px; @@ -129,17 +129,38 @@ .stat-card.purple::before { background: var(--accent-purple); } .stat-card.gold::before { background: var(--accent-gold); } - .stat-icon { font-size: 20px; margin-bottom: 8px; } - .stat-value { font-size: 24px; font-weight: 700; letter-spacing: -1px; margin-bottom: 2px; } - .stat-value.small { font-size: 18px; } + .stat-icon { + font-size: 20px; + margin-bottom: 8px; + } + .stat-value { + font-size: 24px; + font-weight: 700; + letter-spacing: -1px; + margin-bottom: 2px; + } + .stat-value.small { + font-size: 18px; + } .stat-card.rose .stat-value { color: var(--accent-rose); } .stat-card.amber .stat-value { color: var(--accent-amber); } .stat-card.cyan .stat-value { color: var(--accent-cyan); } .stat-card.emerald .stat-value { color: var(--accent-emerald); } .stat-card.purple .stat-value { color: var(--accent-purple); } .stat-card.gold .stat-value { color: var(--accent-gold); } - .stat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } - .stat-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; } + + .stat-label { + font-size: 11px; + font-weight: 600; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.5px; + } + .stat-sub { + font-size: 10px; + color: var(--text-muted); + margin-top: 2px; + } /* ══════════════════ 필터 바 ══════════════════ */ .filter-bar { @@ -153,8 +174,18 @@ flex-wrap: wrap; align-items: flex-end; } - .filter-group { display: flex; flex-direction: column; gap: 6px; } - .filter-group label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } + .filter-group { + display: flex; + flex-direction: column; + gap: 6px; + } + .filter-group label { + font-size: 11px; + font-weight: 600; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.5px; + } .filter-group select, .filter-group input { padding: 10px 14px; background: var(--bg-primary); @@ -182,10 +213,17 @@ cursor: pointer; transition: all 0.2s; } - .filter-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4); } + .filter-btn:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4); + } /* ══════════════════ 긴급도 탭 ══════════════════ */ - .urgency-tabs { display: flex; gap: 8px; margin-bottom: 16px; } + .urgency-tabs { + display: flex; + gap: 8px; + margin-bottom: 16px; + } .urgency-tab { padding: 10px 20px; border-radius: 10px; @@ -200,10 +238,23 @@ align-items: center; gap: 6px; } - .urgency-tab:hover { border-color: var(--text-muted); } - .urgency-tab.active { background: linear-gradient(135deg, var(--accent-orange), #ea580c); border-color: transparent; color: #fff; } - .urgency-tab .count { background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 100px; font-size: 11px; } - .urgency-tab.active .count { background: rgba(255,255,255,0.3); } + .urgency-tab:hover { + border-color: var(--text-muted); + } + .urgency-tab.active { + background: linear-gradient(135deg, var(--accent-orange), #ea580c); + border-color: transparent; + color: #fff; + } + .urgency-tab .count { + background: rgba(255,255,255,0.2); + padding: 2px 8px; + border-radius: 100px; + font-size: 11px; + } + .urgency-tab.active .count { + background: rgba(255,255,255,0.3); + } /* ══════════════════ 테이블 ══════════════════ */ .table-wrap { @@ -212,7 +263,10 @@ border: 1px solid var(--border); overflow: hidden; } - .data-table { width: 100%; border-collapse: collapse; } + .data-table { + width: 100%; + border-collapse: collapse; + } .data-table th { padding: 14px 12px; font-size: 11px; @@ -229,15 +283,38 @@ } .data-table th.center { text-align: center; } .data-table th.right { text-align: right; } - .data-table td { padding: 12px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; } - .data-table tr:hover { background: rgba(255,255,255,0.02); } - .data-table tr.urgent-critical { background: rgba(244, 63, 94, 0.08); } - .data-table tr.urgent-warning { background: rgba(249, 115, 22, 0.05); } + .data-table td { + padding: 12px; + font-size: 13px; + border-bottom: 1px solid rgba(255,255,255,0.05); + vertical-align: middle; + } + .data-table tr:hover { + background: rgba(255,255,255,0.02); + } + .data-table tr.urgent-critical { + background: rgba(244, 63, 94, 0.08); + } + .data-table tr.urgent-warning { + background: rgba(249, 115, 22, 0.05); + } /* 약품 셀 */ - .drug-cell { display: flex; flex-direction: column; gap: 2px; } - .drug-name { font-weight: 600; color: var(--text-primary); font-size: 12px; } - .drug-code { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); } + .drug-cell { + display: flex; + flex-direction: column; + gap: 2px; + } + .drug-name { + font-weight: 600; + color: var(--text-primary); + font-size: 12px; + } + .drug-code { + font-family: 'JetBrains Mono', monospace; + font-size: 10px; + color: var(--text-muted); + } /* 위치 셀 */ .location-cell { text-align: center; } @@ -254,13 +331,36 @@ .location-empty { color: var(--text-muted); font-size: 12px; } /* 긴급도 배지 */ - .urgency-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; } - .urgency-badge.critical { background: rgba(244, 63, 94, 0.2); color: var(--accent-rose); } - .urgency-badge.warning { background: rgba(249, 115, 22, 0.2); color: var(--accent-orange); } - .urgency-badge.normal { background: rgba(100, 116, 139, 0.2); color: var(--text-muted); } + .urgency-badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px 8px; + border-radius: 6px; + font-size: 10px; + font-weight: 600; + } + .urgency-badge.critical { + background: rgba(244, 63, 94, 0.2); + color: var(--accent-rose); + } + .urgency-badge.warning { + background: rgba(249, 115, 22, 0.2); + color: var(--accent-orange); + } + .urgency-badge.normal { + background: rgba(100, 116, 139, 0.2); + color: var(--text-muted); + } /* 상태 배지 */ - .status-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; } + .status-badge { + display: inline-block; + padding: 4px 10px; + border-radius: 6px; + font-size: 11px; + font-weight: 600; + } .status-badge.pending { background: rgba(249, 115, 22, 0.2); color: var(--accent-orange); } .status-badge.reviewed { background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); } .status-badge.returned { background: rgba(16, 185, 129, 0.2); color: var(--accent-emerald); } @@ -269,48 +369,141 @@ .status-badge.resolved { background: rgba(100, 116, 139, 0.2); color: var(--text-muted); } /* 수량/날짜/금액 셀 */ - .qty-cell { font-family: 'JetBrains Mono', monospace; font-weight: 600; text-align: center; font-size: 12px; } - .date-cell { font-size: 11px; color: var(--text-secondary); } - .months-cell { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; } + .qty-cell { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + text-align: center; + font-size: 12px; + } + .date-cell { + font-size: 11px; + color: var(--text-secondary); + } + .months-cell { + font-family: 'JetBrains Mono', monospace; + font-weight: 700; + font-size: 12px; + } .months-cell.critical { color: var(--accent-rose); } .months-cell.warning { color: var(--accent-orange); } .months-cell.normal { color: var(--text-muted); } - .amount-cell { font-family: 'JetBrains Mono', monospace; font-weight: 600; text-align: right; font-size: 12px; color: var(--accent-gold); } - .amount-cell.zero { color: var(--text-muted); } + + .amount-cell { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + text-align: right; + font-size: 12px; + color: var(--accent-gold); + } + .amount-cell.zero { + color: var(--text-muted); + } /* 액션 버튼 */ - .action-btn { padding: 6px 12px; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; } - .action-btn.primary { background: linear-gradient(135deg, var(--accent-orange), #ea580c); color: #fff; } - .action-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4); } + .action-btn { + padding: 6px 12px; + border: none; + border-radius: 6px; + font-size: 11px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; + } + .action-btn.primary { + background: linear-gradient(135deg, var(--accent-orange), #ea580c); + color: #fff; + } + .action-btn.primary:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4); + } /* ══════════════════ 페이지네이션 ══════════════════ */ - .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 20px; } - .page-btn { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; } + .pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + padding: 20px; + } + .page-btn { + padding: 8px 14px; + border: 1px solid var(--border); + border-radius: 8px; + background: var(--bg-secondary); + color: var(--text-secondary); + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; + } .page-btn:hover { border-color: var(--accent-orange); color: var(--accent-orange); } .page-btn.active { background: linear-gradient(135deg, var(--accent-orange), #ea580c); border-color: transparent; color: #fff; } .page-btn:disabled { opacity: 0.3; cursor: not-allowed; } .page-info { color: var(--text-muted); font-size: 13px; } /* ══════════════════ 모달 ══════════════════ */ - .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 1000; } + .modal-overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.7); + display: none; + align-items: center; + justify-content: center; + z-index: 1000; + } .modal-overlay.open { display: flex; } - .modal { background: var(--bg-card); border-radius: 20px; padding: 28px; width: 90%; max-width: 500px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } - .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } + .modal { + background: var(--bg-card); + border-radius: 20px; + padding: 28px; + width: 90%; + max-width: 500px; + border: 1px solid var(--border); + box-shadow: 0 20px 60px rgba(0,0,0,0.5); + } + .modal-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; + } .modal-title { font-size: 18px; font-weight: 700; } .modal-close { background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; } .modal-body { margin-bottom: 24px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; } - .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--text-primary); } + .form-group select, .form-group textarea { + width: 100%; + padding: 12px 16px; + background: var(--bg-primary); + border: 1px solid var(--border); + border-radius: 10px; + font-size: 14px; + font-family: inherit; + color: var(--text-primary); + } .form-group textarea { min-height: 100px; resize: vertical; } .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-orange); } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; } - .modal-btn { padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } + .modal-btn { + padding: 12px 24px; + border-radius: 10px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; + } .modal-btn.cancel { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); } .modal-btn.submit { background: linear-gradient(135deg, var(--accent-orange), #ea580c); border: none; color: #fff; } .modal-btn.submit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4); } - .drug-detail { background: var(--bg-secondary); border-radius: 12px; padding: 16px; margin-bottom: 20px; } + .drug-detail { + background: var(--bg-secondary); + border-radius: 12px; + padding: 16px; + margin-bottom: 20px; + } .drug-detail-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .drug-detail-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; } .drug-detail-item { display: flex; justify-content: space-between; } @@ -319,45 +512,184 @@ /* ══════════════════ 로딩/빈 상태 ══════════════════ */ .loading-state, .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } - .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent-orange); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 16px; } + .loading-spinner { + width: 40px; height: 40px; + border: 3px solid var(--border); + border-top-color: var(--accent-orange); + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 16px; + } @keyframes spin { to { transform: rotate(360deg); } } .empty-icon { font-size: 48px; margin-bottom: 16px; } /* ══════════════════ 토스트 ══════════════════ */ - .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 14px 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; color: var(--text-primary); font-size: 14px; font-weight: 500; box-shadow: 0 8px 32px rgba(0,0,0,0.3); opacity: 0; transition: all 0.3s; z-index: 300; } + .toast { + position: fixed; + bottom: 32px; + left: 50%; + transform: translateX(-50%) translateY(20px); + padding: 14px 28px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + color: var(--text-primary); + font-size: 14px; + font-weight: 500; + box-shadow: 0 8px 32px rgba(0,0,0,0.3); + opacity: 0; + transition: all 0.3s; + z-index: 300; + } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.success { border-color: var(--accent-emerald); } .toast.error { border-color: var(--accent-rose); } /* ══════════════════ 반응형 ══════════════════ */ - @media (max-width: 1200px) { .stats-row { flex-wrap: wrap; } .stat-card { min-width: calc(33% - 12px); } } - @media (max-width: 768px) { .stat-card { min-width: calc(50% - 8px); } .header-nav { display: none; } .filter-bar { flex-direction: column; } .filter-group { width: 100%; } .filter-group select, .filter-group input { width: 100%; } .urgency-tabs { flex-wrap: wrap; } } + @media (max-width: 1200px) { + .stats-row { flex-wrap: wrap; } + .stat-card { min-width: calc(33% - 12px); } + } + @media (max-width: 768px) { + .stat-card { min-width: calc(50% - 8px); } + .header-nav { display: none; } + .filter-bar { flex-direction: column; } + .filter-group { width: 100%; } + .filter-group select, .filter-group input { width: 100%; } + .urgency-tabs { flex-wrap: wrap; } + } /* ══════════════════ 입고이력 모달 ══════════════════ */ - .purchase-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 1100; backdrop-filter: blur(4px); } + .purchase-modal { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.8); + display: none; + align-items: center; + justify-content: center; + z-index: 1100; + backdrop-filter: blur(4px); + } .purchase-modal.open { display: flex; } - .purchase-modal-content { background: var(--bg-card); border-radius: 20px; width: 95%; max-width: 650px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } - .purchase-modal-header { padding: 20px 24px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: #fff; } - .purchase-modal-header h3 { margin: 0 0 6px 0; font-size: 18px; display: flex; align-items: center; gap: 8px; } - .purchase-modal-header .drug-name { font-size: 14px; opacity: 0.9; } - .purchase-modal-body { padding: 16px 24px 24px; overflow-y: auto; flex: 1; } - .purchase-history-table { width: 100%; border-collapse: collapse; } - .purchase-history-table th { background: var(--bg-secondary); padding: 12px 10px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: left; border-bottom: 2px solid var(--border); position: sticky; top: 0; } - .purchase-history-table td { padding: 14px 10px; font-size: 13px; border-bottom: 1px solid var(--border); color: var(--text-primary); } - .purchase-history-table tr:hover td { background: var(--bg-card-hover); } - .supplier-name { font-weight: 600; color: var(--accent-cyan); } - .supplier-tel { font-size: 12px; color: var(--accent-blue); cursor: pointer; } - .supplier-tel:hover { text-decoration: underline; } - .purchase-date { color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 12px; } - .purchase-qty { font-weight: 600; color: var(--accent-emerald); } - .purchase-price { color: var(--accent-gold); font-family: 'JetBrains Mono', monospace; } - .purchase-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); } - .purchase-empty .icon { font-size: 40px; margin-bottom: 12px; } - .purchase-modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; } - .purchase-modal-btn { padding: 10px 24px; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 14px; background: var(--bg-secondary); color: var(--text-secondary); transition: all 0.15s; } - .purchase-modal-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); } - #dataTableBody tr { cursor: pointer; } - #dataTableBody tr:active { background: var(--bg-card-hover) !important; } + .purchase-modal-content { + background: var(--bg-card); + border-radius: 20px; + width: 95%; + max-width: 650px; + max-height: 80vh; + overflow: hidden; + display: flex; + flex-direction: column; + border: 1px solid var(--border); + box-shadow: 0 20px 60px rgba(0,0,0,0.5); + } + .purchase-modal-header { + padding: 20px 24px; + background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); + color: #fff; + } + .purchase-modal-header h3 { + margin: 0 0 6px 0; + font-size: 18px; + display: flex; + align-items: center; + gap: 8px; + } + .purchase-modal-header .drug-name { + font-size: 14px; + opacity: 0.9; + } + .purchase-modal-body { + padding: 16px 24px 24px; + overflow-y: auto; + flex: 1; + } + .purchase-history-table { + width: 100%; + border-collapse: collapse; + } + .purchase-history-table th { + background: var(--bg-secondary); + padding: 12px 10px; + font-size: 12px; + font-weight: 600; + color: var(--text-secondary); + text-align: left; + border-bottom: 2px solid var(--border); + position: sticky; + top: 0; + } + .purchase-history-table td { + padding: 14px 10px; + font-size: 13px; + border-bottom: 1px solid var(--border); + color: var(--text-primary); + } + .purchase-history-table tr:hover td { + background: var(--bg-card-hover); + } + .supplier-name { + font-weight: 600; + color: var(--accent-cyan); + } + .supplier-tel { + font-size: 12px; + color: var(--accent-blue); + cursor: pointer; + } + .supplier-tel:hover { + text-decoration: underline; + } + .purchase-date { + color: var(--text-secondary); + font-family: 'JetBrains Mono', monospace; + font-size: 12px; + } + .purchase-qty { + font-weight: 600; + color: var(--accent-emerald); + } + .purchase-price { + color: var(--accent-gold); + font-family: 'JetBrains Mono', monospace; + } + .purchase-empty { + text-align: center; + padding: 40px 20px; + color: var(--text-muted); + } + .purchase-empty .icon { + font-size: 40px; + margin-bottom: 12px; + } + .purchase-modal-footer { + padding: 16px 24px; + border-top: 1px solid var(--border); + display: flex; + justify-content: flex-end; + } + .purchase-modal-btn { + padding: 10px 24px; + border: none; + border-radius: 8px; + cursor: pointer; + font-weight: 500; + font-size: 14px; + background: var(--bg-secondary); + color: var(--text-secondary); + transition: all 0.15s; + } + .purchase-modal-btn:hover { + background: var(--bg-card-hover); + color: var(--text-primary); + } + /* 테이블 행 더블클릭 가능 표시 */ + #dataTableBody tr { + cursor: pointer; + } + #dataTableBody tr:active { + background: var(--bg-card-hover) !important; + }
@@ -413,20 +745,20 @@