Files
tk-factory-services/system3-nonconformance/web/issues-dashboard.html
Hyungi Ahn b3012b8320 feat: AI 서비스 및 AI 어시스턴트 전용 페이지 추가
- ai-service: Ollama 기반 AI 서비스 (분류, 시맨틱 검색, RAG Q&A, 패턴 분석)
- AI 어시스턴트 페이지: 채팅형 Q&A, 시맨틱 검색, 패턴 분석, 분류 테스트
- 권한 시스템에 ai_assistant 페이지 등록 (기본 비활성)
- 기존 페이지에 AI 기능 통합 (대시보드, 수신함, 관리함)
- docker-compose, gateway, nginx 설정 업데이트

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-06 09:38:30 +09:00

629 lines
35 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부적합 현황판</title>
<script>if(window.innerWidth<=768)window.location.replace('/m/dashboard.html');</script>
<link rel="preload" href="https://cdn.tailwindcss.com" as="script">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkqc-common.css?v=20260213">
<link rel="stylesheet" href="/static/css/issues-dashboard.css?v=20260213">
</head>
<body>
<!-- 로딩 스크린 -->
<div id="loadingScreen" class="fixed inset-0 bg-white z-50 flex items-center justify-center">
<div class="text-center">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
<p class="text-gray-600">현황판을 불러오는 중...</p>
</div>
</div>
<!-- 로그인 스크린 -->
<div id="loginScreen" class="hidden fixed inset-0 bg-gray-100 z-40 flex items-center justify-center">
<div class="bg-white p-8 rounded-xl shadow-lg max-w-md w-full mx-4">
<h2 class="text-2xl font-bold text-center mb-6 text-gray-800">로그인</h2>
<form id="loginForm">
<div class="mb-4">
<input type="text" id="username" placeholder="사용자명" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="mb-6">
<input type="password" id="password" placeholder="비밀번호" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors">
로그인
</button>
</form>
</div>
</div>
<!-- 메인 콘텐츠 -->
<div id="mainContent" class="min-h-screen">
<!-- 공통 헤더 -->
<div id="commonHeader"></div>
<!-- 메인 콘텐츠 -->
<main class="container mx-auto px-4 py-8 content-fade-in" style="padding-top: 72px;">
<!-- 페이지 헤더 -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-gray-900 flex items-center">
<i class="fas fa-chart-line text-blue-500 mr-3"></i>
부적합 현황판
</h1>
<p class="text-gray-600 mt-1">진행 중인 부적합 사항을 프로젝트별로 한눈에 확인하세요</p>
</div>
</div>
</div>
<!-- 전체 통계 대시보드 -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-blue-500 text-white p-6 rounded-xl dashboard-card">
<div class="flex items-center justify-between">
<div>
<p class="text-blue-100 text-sm flex items-center space-x-1">
<span>전체 진행 중</span>
<div class="w-1.5 h-1.5 bg-blue-200 rounded-full animate-pulse"></div>
</p>
<p class="text-3xl font-bold" id="totalInProgress">0</p>
</div>
<i class="fas fa-tasks text-4xl text-blue-200"></i>
</div>
</div>
<div class="bg-emerald-500 text-white p-6 rounded-xl dashboard-card">
<div class="flex items-center justify-between">
<div>
<p class="text-emerald-100 text-sm flex items-center space-x-1">
<span>오늘 신규</span>
<div class="w-1.5 h-1.5 bg-emerald-200 rounded-full animate-pulse"></div>
</p>
<p class="text-3xl font-bold" id="todayNew">0</p>
</div>
<i class="fas fa-plus-circle text-4xl text-emerald-200"></i>
</div>
</div>
<div class="bg-amber-500 text-white p-6 rounded-xl dashboard-card">
<div class="flex items-center justify-between">
<div>
<p class="text-amber-100 text-sm flex items-center space-x-1">
<span>완료 대기</span>
<div class="w-1.5 h-1.5 bg-amber-200 rounded-full animate-pulse"></div>
</p>
<p class="text-3xl font-bold" id="pendingCompletion">0</p>
</div>
<i class="fas fa-hourglass-half text-4xl text-amber-200"></i>
</div>
</div>
<div class="bg-slate-500 text-white p-6 rounded-xl dashboard-card">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-200 text-sm flex items-center space-x-1">
<span>지연 중</span>
<div class="w-1.5 h-1.5 bg-slate-300 rounded-full animate-pulse"></div>
</p>
<p class="text-3xl font-bold" id="overdue">0</p>
</div>
<i class="fas fa-clock text-4xl text-slate-300"></i>
</div>
</div>
</div>
<!-- AI 시맨틱 검색 -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex items-center mb-3">
<i class="fas fa-robot text-purple-500 mr-2"></i>
<h3 class="text-sm font-semibold text-gray-700">AI 유사 부적합 검색</h3>
</div>
<div class="flex space-x-2">
<input type="text" id="aiSearchQuery"
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
placeholder="부적합 내용을 자연어로 검색하세요... (예: 볼트 누락, 용접 불량)"
onkeydown="if(event.key==='Enter') aiSemanticSearch()">
<button onclick="aiSemanticSearch()"
class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors whitespace-nowrap">
<i class="fas fa-search mr-1"></i>AI 검색
</button>
</div>
<div id="aiSearchLoading" class="hidden mt-3 text-center">
<i class="fas fa-spinner fa-spin text-purple-500 mr-1"></i>
<span class="text-sm text-gray-500">AI 검색 중...</span>
</div>
<div id="aiSearchResults" class="hidden mt-3 space-y-2">
<!-- 검색 결과 -->
</div>
<!-- RAG Q&A -->
<div class="mt-4 pt-4 border-t border-gray-200">
<div class="flex items-center mb-2">
<i class="fas fa-comments text-indigo-500 mr-2"></i>
<h4 class="text-sm font-semibold text-gray-700">AI Q&A (과거 사례 기반)</h4>
</div>
<div class="flex space-x-2">
<input type="text" id="aiQaQuestion"
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
placeholder="질문하세요... (예: 최근 자재 누락이 왜 많아?, 용접 불량 해결방법은?)"
onkeydown="if(event.key==='Enter') aiAskQuestion()">
<button onclick="aiAskQuestion()"
class="px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors whitespace-nowrap">
<i class="fas fa-paper-plane mr-1"></i>질문
</button>
</div>
<div id="aiQaLoading" class="hidden mt-3 text-center">
<i class="fas fa-spinner fa-spin text-indigo-500 mr-1"></i>
<span class="text-sm text-gray-500">과거 사례 분석 중...</span>
</div>
<div id="aiQaResult" class="hidden mt-3 bg-indigo-50 border border-indigo-200 rounded-lg p-4">
<div id="aiQaAnswer" class="text-sm text-gray-700 whitespace-pre-line"></div>
<div id="aiQaSources" class="mt-2 text-xs text-indigo-500"></div>
</div>
</div>
</div>
<!-- 프로젝트 선택 및 필터 -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
<div class="flex items-center space-x-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">프로젝트 선택</label>
<select id="projectFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-w-[200px]" onchange="filterByProject()">
<option value="">전체 프로젝트</option>
</select>
</div>
</div>
<div class="flex items-center space-x-2">
<button onclick="refreshDashboard()" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
<i class="fas fa-sync-alt mr-2"></i>새로고침
</button>
</div>
</div>
</div>
<!-- 프로젝트별 현황 -->
<div id="projectDashboard" class="space-y-6">
<!-- 동적으로 생성될 프로젝트 카드들 -->
</div>
<!-- 빈 상태 -->
<div id="emptyState" class="hidden text-center py-12">
<i class="fas fa-chart-line text-6xl text-gray-300 mb-4"></i>
<h3 class="text-lg font-medium text-gray-900 mb-2">진행 중인 부적합이 없습니다</h3>
<p class="text-gray-500">새로운 부적합이 등록되면 여기에 표시됩니다.</p>
</div>
</main>
</div>
<!-- 답글 추가 모달 -->
<div id="replyModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
<div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
<div class="p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-reply text-blue-500 mr-2"></i>
답글 추가
</h3>
<button onclick="closeReplyModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<form onsubmit="submitReply(event)" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
<i class="fas fa-pen text-blue-500 mr-1"></i>
답글 내용
</label>
<textarea id="replyText" rows="3"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
placeholder="댓글에 대한 답글을 입력하세요..."
required></textarea>
</div>
<div class="flex space-x-3 pt-4">
<button type="button" onclick="closeReplyModal()"
class="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
취소
</button>
<button type="submit"
class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
<i class="fas fa-paper-plane mr-2"></i>답글 추가
</button>
</div>
</form>
</div>
</div>
</div>
<!-- 댓글 수정 모달 -->
<div id="editCommentModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
<div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
<div class="p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-edit text-green-500 mr-2"></i>
댓글 수정
</h3>
<button onclick="closeEditCommentModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<form onsubmit="submitEditComment(event)" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
<i class="fas fa-lightbulb text-green-500 mr-1"></i>
댓글 내용
</label>
<textarea id="editCommentText" rows="3"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 resize-none"
placeholder="수정할 댓글 내용을 입력하세요..."
required></textarea>
</div>
<div class="flex space-x-3 pt-4">
<button type="button" onclick="closeEditCommentModal()"
class="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
취소
</button>
<button type="submit"
class="flex-1 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
<i class="fas fa-save mr-2"></i>수정 완료
</button>
</div>
</form>
</div>
</div>
</div>
<!-- 답글 수정 모달 -->
<div id="editReplyModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
<div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
<div class="p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-edit text-green-500 mr-2"></i>
답글 수정
</h3>
<button onclick="closeEditReplyModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<form onsubmit="submitEditReply(event)" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
<i class="fas fa-lightbulb text-green-500 mr-1"></i>
답글 내용
</label>
<textarea id="editReplyText" rows="3"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 resize-none"
placeholder="수정할 답글 내용을 입력하세요..."
required></textarea>
</div>
<div class="flex space-x-3 pt-4">
<button type="button" onclick="closeEditReplyModal()"
class="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
취소
</button>
<button type="submit"
class="flex-1 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
<i class="fas fa-save mr-2"></i>수정 완료
</button>
</div>
</form>
</div>
</div>
</div>
<!-- 댓글 추가 모달 -->
<div id="commentModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
<div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
<div class="p-6">
<!-- 모달 헤더 -->
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-comment text-blue-500 mr-2"></i>
댓글 추가
</h3>
<button onclick="closeCommentModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<!-- 모달 내용 -->
<form onsubmit="submitComment(event)" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
<i class="fas fa-pen text-blue-500 mr-1"></i>
댓글 내용
</label>
<textarea id="commentText" rows="3"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
placeholder="의견에 대한 댓글을 입력하세요..."
required></textarea>
</div>
<!-- 버튼 -->
<div class="flex space-x-3 pt-4">
<button type="button" onclick="closeCommentModal()"
class="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
취소
</button>
<button type="submit"
class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
<i class="fas fa-paper-plane mr-2"></i>댓글 추가
</button>
</div>
</form>
</div>
</div>
</div>
<!-- 의견 수정 모달 -->
<div id="editOpinionModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
<div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
<div class="p-6">
<!-- 모달 헤더 -->
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-edit text-green-500 mr-2"></i>
의견 수정
</h3>
<button onclick="closeEditOpinionModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<!-- 모달 내용 -->
<form onsubmit="submitEditOpinion(event)" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
<i class="fas fa-lightbulb text-green-500 mr-1"></i>
의견 내용
</label>
<textarea id="editOpinionText" rows="5"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 resize-none"
placeholder="수정할 의견 내용을 입력하세요..."
required></textarea>
</div>
<!-- 안내 메시지 -->
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
<div class="flex items-start">
<i class="fas fa-info-circle text-blue-500 mt-0.5 mr-2"></i>
<div class="text-sm text-blue-700">
<p>댓글은 유지되며 본문만 수정됩니다.</p>
</div>
</div>
</div>
<!-- 버튼 -->
<div class="flex space-x-3 pt-4">
<button type="button" onclick="closeEditOpinionModal()"
class="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
취소
</button>
<button type="submit"
class="flex-1 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
<i class="fas fa-save mr-2"></i>수정 완료
</button>
</div>
</form>
</div>
</div>
</div>
<!-- 의견 제시 모달 -->
<div id="opinionModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
<div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
<div class="p-6">
<!-- 모달 헤더 -->
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-comment-medical text-green-500 mr-2"></i>
해결 방안 의견 제시
</h3>
<button onclick="closeOpinionModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<!-- 모달 내용 -->
<form onsubmit="submitOpinion(event)" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
<i class="fas fa-lightbulb text-green-500 mr-1"></i>
의견 내용
</label>
<textarea id="opinionText" rows="5"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 resize-none"
placeholder="해결 방안에 대한 의견을 입력하세요..."
required></textarea>
</div>
<!-- 안내 메시지 -->
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
<div class="flex items-start">
<i class="fas fa-info-circle text-blue-500 mt-0.5 mr-2"></i>
<div class="text-sm text-blue-700">
<p class="font-medium mb-1">의견 제시 안내</p>
<p>입력하신 의견은 <strong>[작성자] (날짜시간)</strong> 형식으로 해결 방안에 추가됩니다.</p>
<p class="mt-1">최신 의견이 맨 위에 표시됩니다.</p>
</div>
</div>
</div>
<!-- 버튼 -->
<div class="flex space-x-3 pt-4">
<button type="button" onclick="closeOpinionModal()"
class="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
취소
</button>
<button type="submit"
class="flex-1 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
<i class="fas fa-paper-plane mr-2"></i>의견 제출
</button>
</div>
</form>
</div>
</div>
</div>
<!-- 완료 신청 반려 모달 -->
<div id="rejectionModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
<div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
<div class="p-6">
<!-- 모달 헤더 -->
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-times-circle text-red-500 mr-2"></i>
완료 신청 반려
</h3>
<button onclick="closeRejectionModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<!-- 모달 내용 -->
<form onsubmit="submitRejection(event)" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
<i class="fas fa-exclamation-triangle text-red-500 mr-1"></i>
반려 사유
</label>
<textarea id="rejectionReason" rows="5"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 resize-none"
placeholder="완료 신청을 반려하는 사유를 입력하세요..."
required></textarea>
</div>
<!-- 안내 메시지 -->
<div class="bg-red-50 border border-red-200 rounded-lg p-3">
<div class="flex items-start">
<i class="fas fa-info-circle text-red-500 mt-0.5 mr-2"></i>
<div class="text-sm text-red-700">
<p class="font-medium mb-1">반려 안내</p>
<p>반려 사유는 담당자에게 전달되며, 해당 이슈는 다시 진행 중 상태로 변경됩니다.</p>
</div>
</div>
</div>
<!-- 버튼 -->
<div class="flex space-x-3 pt-4">
<button type="button" onclick="closeRejectionModal()"
class="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
취소
</button>
<button type="submit"
class="flex-1 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
<i class="fas fa-times-circle mr-2"></i>반려하기
</button>
</div>
</form>
</div>
</div>
</div>
<!-- 완료 신청 모달 -->
<div id="completionRequestModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
<div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto">
<div class="p-6">
<!-- 모달 헤더 -->
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
완료 신청
</h3>
<button onclick="closeCompletionRequestModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<!-- 모달 내용 -->
<form id="completionRequestForm" class="space-y-4">
<!-- 완료 사진 업로드 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
<i class="fas fa-camera text-green-500 mr-1"></i>
완료 사진 (필수)
</label>
<div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-green-400 transition-colors">
<input type="file" id="completionPhoto" accept="image/*" capture="environment" class="hidden" onchange="handleCompletionPhotoUpload(event)">
<div id="photoUploadArea" onclick="document.getElementById('completionPhoto').click()" class="cursor-pointer">
<i class="fas fa-cloud-upload-alt text-gray-400 text-2xl mb-2"></i>
<p class="text-sm text-gray-600">클릭하여 완료 사진을 업로드하세요</p>
<p class="text-xs text-gray-500 mt-1">JPG, PNG 파일만 가능</p>
</div>
<div id="photoPreview" class="hidden mt-3">
<img id="previewImage" class="max-w-full h-32 object-cover rounded-lg mx-auto">
<p class="text-sm text-green-600 mt-2">✓ 사진이 업로드되었습니다</p>
</div>
</div>
</div>
<!-- 완료 코멘트 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
<i class="fas fa-comment text-blue-500 mr-1"></i>
완료 코멘트 (선택사항)
</label>
<textarea id="completionComment" rows="3"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 resize-none"
placeholder="완료 상황에 대한 간단한 설명을 입력하세요..."></textarea>
</div>
<!-- 안내 메시지 -->
<div class="bg-green-50 border border-green-200 rounded-lg p-3">
<div class="flex items-start">
<i class="fas fa-info-circle text-green-500 mt-0.5 mr-2"></i>
<div class="text-sm text-green-700">
<p class="font-medium mb-1">완료 신청 안내</p>
<p>완료 사진과 함께 신청하시면 관리자 승인 후 완료 처리됩니다.</p>
</div>
</div>
</div>
<!-- 버튼 -->
<div class="flex space-x-3 pt-4">
<button type="button" onclick="closeCompletionRequestModal()"
class="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
취소
</button>
<button type="submit"
class="flex-1 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
<i class="fas fa-paper-plane mr-2"></i>완료 신청
</button>
</div>
</form>
</div>
</div>
</div>
<!-- AI 이슈 상세 모달 -->
<div id="aiIssueModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center" onclick="if(event.target===this)this.classList.add('hidden')">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-lg mx-4 max-h-[80vh] overflow-y-auto">
<div class="sticky top-0 bg-white border-b px-5 py-3 flex justify-between items-center rounded-t-xl">
<h3 id="aiIssueModalTitle" class="font-bold text-gray-800"></h3>
<button onclick="document.getElementById('aiIssueModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
<div id="aiIssueModalBody" class="p-5 text-sm text-gray-700 space-y-3"></div>
</div>
</div>
<!-- 스크립트 -->
<script src="/static/js/core/permissions.js?v=20260306"></script>
<script src="/static/js/components/common-header.js?v=20260306"></script>
<script src="/static/js/core/page-manager.js?v=20260306"></script>
<script src="/static/js/core/auth-manager.js?v=20260306"></script>
<script src="/static/js/utils/issue-helpers.js?v=20260306"></script>
<script src="/static/js/utils/photo-modal.js?v=20260306"></script>
<script src="/static/js/utils/toast.js?v=20260306"></script>
<script src="/static/js/components/mobile-bottom-nav.js?v=20260306"></script>
<script src="/static/js/api.js?v=20260306"></script>
<script src="/static/js/pages/issues-dashboard.js?v=20260306"></script>
</body>
</html>