754 lines
50 KiB
PHP
754 lines
50 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>채권추심 프로세스 가이드 | SAM SaaS</title>
|
|
<!-- Favicon -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../img/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon-16x16.png">
|
|
<link rel="shortcut icon" href="../img/favicon.png">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { font-family: 'Noto Sans KR', sans-serif; }
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
.nav-active { background-color: #4f46e5; color: white; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
|
|
.fade-in { animation: fadeIn 0.5s ease-out forwards; }
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.progress-line::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: #e2e8f0;
|
|
z-index: -1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen bg-slate-50">
|
|
<!-- Navigation -->
|
|
<nav class="sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-slate-200">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="flex justify-between items-center h-16">
|
|
<a href="../index.php" class="flex items-center gap-3 cursor-pointer">
|
|
<img src="../img/favicon-32x32.png" alt="SAM" class="w-10 h-10 rounded-xl">
|
|
<div class="flex flex-col">
|
|
<span class="text-lg font-bold text-slate-800 leading-tight">SAM</span>
|
|
<span class="text-xs text-slate-500 leading-tight">Smart Automation Management</span>
|
|
</div>
|
|
</a>
|
|
<div class="flex items-center gap-4">
|
|
<a href="../index.php" class="text-sm font-medium text-slate-600 hover:text-indigo-600 transition-colors">홈</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="max-w-6xl mx-auto p-6">
|
|
<!-- Header & Dashboard Summary -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-8 mb-6 fade-in">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-14 h-14 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200 text-white">
|
|
<i data-lucide="gavel" class="w-7 h-7"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-slate-900">채권추심 프로세스 관리</h1>
|
|
<p class="text-slate-500 text-sm">변호사와 기업 담당자의 실시간 협업 워크플로우</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="px-4 py-2 bg-emerald-50 border border-emerald-100 rounded-lg">
|
|
<p class="text-[10px] text-emerald-600 font-bold uppercase tracking-wider">회수 성공률</p>
|
|
<p class="text-xl font-bold text-emerald-700">84.2%</p>
|
|
</div>
|
|
<div class="px-4 py-2 bg-indigo-50 border border-indigo-100 rounded-lg">
|
|
<p class="text-[10px] text-indigo-600 font-bold uppercase tracking-wider">평균 회수 기간</p>
|
|
<p class="text-xl font-bold text-indigo-700">62일</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Tracking -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-8 mb-6 fade-in" style="animation-delay: 0.1s">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="text-base font-bold text-slate-700">전체 공정 진행률</span>
|
|
<span id="progress-text" class="text-lg font-black text-indigo-600">0%</span>
|
|
</div>
|
|
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden mb-8">
|
|
<div id="progress-bar" class="bg-gradient-to-r from-indigo-500 to-blue-600 h-full transition-all duration-700 ease-out" style="width: 0%"></div>
|
|
</div>
|
|
|
|
<!-- Phase Specific Progress -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 border-t border-slate-50 pt-6">
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">Phase 1. 기초조사</span>
|
|
<span id="phase1-text" class="text-xs font-bold text-indigo-500">0%</span>
|
|
</div>
|
|
<div class="w-full bg-slate-50 rounded-full h-1.5 overflow-hidden">
|
|
<div id="phase1-bar" class="bg-indigo-400 h-full transition-all duration-500" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">Phase 2. 보전처분</span>
|
|
<span id="phase2-text" class="text-xs font-bold text-amber-500">0%</span>
|
|
</div>
|
|
<div class="w-full bg-slate-50 rounded-full h-1.5 overflow-hidden">
|
|
<div id="phase2-bar" class="bg-amber-400 h-full transition-all duration-500" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">Phase 3. 집행권원</span>
|
|
<span id="phase3-text" class="text-xs font-bold text-blue-500">0%</span>
|
|
</div>
|
|
<div class="w-full bg-slate-50 rounded-full h-1.5 overflow-hidden">
|
|
<div id="phase3-bar" class="bg-blue-400 h-full transition-all duration-500" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">Phase 4. 강제집행</span>
|
|
<span id="phase4-text" class="text-xs font-bold text-emerald-500">0%</span>
|
|
</div>
|
|
<div class="w-full bg-slate-50 rounded-full h-1.5 overflow-hidden">
|
|
<div id="phase4-bar" class="bg-emerald-400 h-full transition-all duration-500" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-[11px] text-slate-400 mt-6 text-center italic">* 각 상세 단계의 체크박스를 완료하면 해당 단계 및 전체 진행률에 반영됩니다.</p>
|
|
</div>
|
|
|
|
<!-- Workflow Tab Navigation -->
|
|
<div class="flex gap-2 mb-6 overflow-x-auto pb-2">
|
|
<button onclick="showTab('phase1')" id="tab-phase1" class="tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap nav-active flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center text-[10px]">1</span>
|
|
기초조사 및 독촉
|
|
</button>
|
|
<button onclick="showTab('phase2')" id="tab-phase2" class="tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap bg-white text-slate-600 hover:bg-slate-100 flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-[10px]">2</span>
|
|
보전 처분
|
|
</button>
|
|
<button onclick="showTab('phase3')" id="tab-phase3" class="tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap bg-white text-slate-600 hover:bg-slate-100 flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-[10px]">3</span>
|
|
집행권원 확보
|
|
</button>
|
|
<button onclick="showTab('phase4')" id="tab-phase4" class="tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap bg-white text-slate-600 hover:bg-slate-100 flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-[10px]">4</span>
|
|
강제집행 및 회수
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Main Content Area -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 min-h-[500px]">
|
|
|
|
<!-- Phase 1 Content -->
|
|
<div id="phase1" class="tab-content active space-y-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-lg font-bold text-slate-800">Phase 1. 기초 조사 및 독촉 (Preparation)</h2>
|
|
<div class="flex gap-2">
|
|
<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1">
|
|
<i data-lucide="clock" size="12"></i> 1~2주 소요
|
|
</span>
|
|
<span class="px-2.5 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold">목표: 기초 조사</span>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-xl overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-slate-50 border-b">
|
|
<tr>
|
|
<th class="p-4 text-left font-semibold text-slate-600 w-12">체크</th>
|
|
<th class="p-4 text-left font-semibold text-slate-600">세부 항목</th>
|
|
<th class="p-4 text-center font-semibold text-slate-600">담당</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-slate-800">원인 서류 확보</span><br><span class="text-xs text-slate-500">계약서, 세금계산서, 거래명세서 등</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-1 bg-blue-50 text-blue-600 rounded text-[11px] font-bold">기업</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-slate-800">채무자 소재 조사</span><br><span class="text-xs text-slate-500">사업자 등록증, 휴/폐업 여부 확인</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold">변호사</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-slate-800">신용 상태 조사</span><br><span class="text-xs text-slate-500">주거래은행 및 신용 등급 파악</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold">변호사</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-slate-800">내용증명 발송</span><br><span class="text-xs text-slate-500">최후 독촉 및 증거력 확보</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold">변호사</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 2 Content -->
|
|
<div id="phase2" class="tab-content space-y-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-lg font-bold text-slate-800">Phase 2. 보전 처분 (Provisional Attachment)</h2>
|
|
<div class="flex gap-2">
|
|
<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1">
|
|
<i data-lucide="clock" size="12"></i> 1~2주 소요
|
|
</span>
|
|
<span class="px-2.5 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-bold">목표: 자산 은닉 방지</span>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-xl overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-slate-50 border-b">
|
|
<tr>
|
|
<th class="p-4 text-left font-semibold text-slate-600 w-12">체크</th>
|
|
<th class="p-4 text-left font-semibold text-slate-600">절차 항목</th>
|
|
<th class="p-4 text-center font-semibold text-slate-600">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-slate-800">가압류 대상 목적물 특정</span><br><span class="text-xs text-slate-500">부동산, 채권(은행), 유체동산 등</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold">변호사</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-slate-800">가압류 신청서 접수</span><br><span class="text-xs text-slate-500">관할 법원 전자 접수</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold">변호사</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-slate-800">공탁금 납부 (현금/보증보험)</span><br><span class="text-xs text-slate-500">법원 결정에 따른 담보 제공</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] font-bold">기업</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-slate-800">가압류 결정문 수령</span><br><span class="text-xs text-slate-500">결정 통지 및 효력 발생 확인</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold">변호사</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 3 Content -->
|
|
<div id="phase3" class="tab-content space-y-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-lg font-bold text-slate-800">Phase 3. 집행권원 확보 (Litigation)</h2>
|
|
<div class="flex gap-2">
|
|
<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1">
|
|
<i data-lucide="clock" size="12"></i> 2주~1년 소요
|
|
</span>
|
|
<span class="px-2.5 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">목표: 법적 권리 확정</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="p-5 border rounded-2xl hover:border-indigo-300 transition-all group relative">
|
|
<div class="absolute top-4 right-4">
|
|
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
|
|
</div>
|
|
<h3 class="font-bold text-slate-800 mb-1 flex items-center gap-2">
|
|
<i data-lucide="Zap" size="18" class="text-amber-500"></i>
|
|
지급명령 신청
|
|
</h3>
|
|
<div class="flex items-center gap-1 text-[10px] text-amber-600 font-bold mb-2">
|
|
<i data-lucide="timer" size="10"></i> 평균 2~4주 소요
|
|
</div>
|
|
<p class="text-xs text-slate-500 mb-4 pr-8 leading-relaxed">채무자가 빚을 인정할 때 유리. 가장 신속한 집행권원 확보 방법.</p>
|
|
<div class="flex items-center gap-2 text-[10px] font-bold text-indigo-600 uppercase tracking-wider">
|
|
<span class="px-2 py-0.5 bg-indigo-50 rounded">변호사 담당</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-5 border rounded-2xl hover:border-indigo-300 transition-all group relative">
|
|
<div class="absolute top-4 right-4">
|
|
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
|
|
</div>
|
|
<h3 class="font-bold text-slate-800 mb-1 flex items-center gap-2">
|
|
<i data-lucide="Scale" size="18" class="text-slate-600"></i>
|
|
민사소송 접수
|
|
</h3>
|
|
<div class="flex items-center gap-1 text-[10px] text-slate-500 font-bold mb-2">
|
|
<i data-lucide="timer" size="10"></i> 약 6~12개월 소요
|
|
</div>
|
|
<p class="text-xs text-slate-500 mb-4 pr-8 leading-relaxed">채권채무 다툼이 있거나 지급명령 이의신청 시 본안 소송 진행.</p>
|
|
<div class="flex items-center gap-2 text-[10px] font-bold text-slate-500 uppercase tracking-wider">
|
|
<span class="px-2 py-0.5 bg-slate-100 rounded">변호사 담당</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 4 Content -->
|
|
<div id="phase4" class="tab-content space-y-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-lg font-bold text-slate-800">Phase 4. 강제 집행 및 회수 (Execution)</h2>
|
|
<div class="flex gap-2">
|
|
<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1">
|
|
<i data-lucide="clock" size="12"></i> 1~3개월 소요
|
|
</span>
|
|
<span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs font-bold">목표: 실제 회수 완료</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="p-4 bg-white border border-slate-200 rounded-2xl flex items-center justify-between hover:border-indigo-200 transition-colors">
|
|
<div class="flex items-center gap-4">
|
|
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-0.5">
|
|
<h4 class="text-sm font-bold text-slate-800">재산 명시 및 재산 조회 신청</h4>
|
|
<span class="text-[10px] font-medium text-slate-400 bg-slate-50 px-1.5 rounded">1~2개월</span>
|
|
</div>
|
|
<p class="text-[11px] text-slate-500">법원을 통해 채무자의 숨겨진 재산을 찾아내는 단계</p>
|
|
</div>
|
|
</div>
|
|
<span class="hidden md:block text-[10px] font-bold text-slate-400">Phase 4-1</span>
|
|
</div>
|
|
<div class="p-4 bg-white border border-slate-200 rounded-2xl flex items-center justify-between hover:border-indigo-200 transition-colors">
|
|
<div class="flex items-center gap-4">
|
|
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-0.5">
|
|
<h4 class="text-sm font-bold text-slate-800">강제 집행 (압류/경매) 실시</h4>
|
|
<span class="text-[10px] font-medium text-slate-400 bg-slate-50 px-1.5 rounded">집행 대상별 상이</span>
|
|
</div>
|
|
<p class="text-[11px] text-slate-500">통장 압류, 유체동산 압류(빨간딱지), 부동산 경매 등</p>
|
|
</div>
|
|
</div>
|
|
<span class="hidden md:block text-[10px] font-bold text-slate-400">Phase 4-2</span>
|
|
</div>
|
|
<div class="p-4 bg-emerald-50 border border-emerald-100 rounded-2xl flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-emerald-600 rounded border-slate-300 focus:ring-emerald-500">
|
|
<div>
|
|
<h4 class="text-sm font-bold text-emerald-800">회수 완료 및 성공보수 정산</h4>
|
|
<p class="text-[11px] text-emerald-600">실제 금액 입금 확인 후 사건 최종 종결</p>
|
|
</div>
|
|
</div>
|
|
<i data-lucide="Party-Popper" class="w-5 h-5 text-emerald-400"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar Content -->
|
|
<div class="space-y-6">
|
|
<!-- Financial Summary Card -->
|
|
<div class="bg-slate-900 rounded-3xl p-6 text-white shadow-xl shadow-slate-200 fade-in" style="animation-delay: 0.3s">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="w-10 h-10 bg-indigo-500/20 rounded-xl flex items-center justify-center text-indigo-400">
|
|
<i data-lucide="Credit-Card" size="22"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold">채무 및 상환 현황</h3>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Amount Info -->
|
|
<div class="p-4 bg-white/5 rounded-2xl border border-white/10">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs text-slate-400">총 청구 금액 (원금)</span>
|
|
<span class="text-sm font-bold">50,000,000원</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs text-slate-400">법정 이율 (연 12%)</span>
|
|
<span class="text-sm font-bold text-amber-400">+ 6,000,000원</span>
|
|
</div>
|
|
<div class="mt-3 pt-3 border-t border-white/10 flex justify-between items-center">
|
|
<span class="text-sm font-bold">최종 회수 목표액</span>
|
|
<span class="text-lg font-black text-indigo-400">56,000,000원</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Repayment Plan -->
|
|
<div class="space-y-4">
|
|
<label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest pl-1">상환 방식 및 시작일 설정</label>
|
|
|
|
<!-- Start Date Selection -->
|
|
<div class="p-3 bg-white/5 rounded-xl border border-white/10 flex items-center justify-between group">
|
|
<span class="text-[11px] text-slate-400">회수 시작일</span>
|
|
<input type="date" id="recovery-start-date" onchange="generateSchedule()"
|
|
class="bg-transparent text-xs font-bold text-indigo-400 border-none outline-none focus:ring-0 p-0 text-right w-28">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<button onclick="setPaymentType('full')" id="btn-pay-full" class="p-3 bg-white/5 rounded-xl border border-white/10 flex flex-col items-center gap-1 group transition-all hover:bg-white/10">
|
|
<span class="text-[11px] text-slate-400">일시납</span>
|
|
<span class="text-xs font-bold font-mono">FULL PAID</span>
|
|
</button>
|
|
<button onclick="setPaymentType('split')" id="btn-pay-split" class="p-3 bg-indigo-500/20 rounded-xl border border-indigo-500/30 flex flex-col items-center gap-1 transition-all">
|
|
<span class="text-[11px] text-indigo-300">분할 납부</span>
|
|
<span class="text-xs font-bold font-mono text-white" id="display-months">12회 분할</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Months Slider (Visible when split is selected) -->
|
|
<div id="slider-container" class="space-y-2 px-1">
|
|
<div class="flex justify-between text-[10px] text-slate-500 font-bold">
|
|
<span>분할 기간 설정</span>
|
|
<span id="slider-val" class="text-indigo-400">12개월</span>
|
|
</div>
|
|
<input type="range" id="months-slider" min="2" max="36" value="12" oninput="updateMonths(this.value)"
|
|
class="w-full h-1 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
|
|
<div class="flex justify-between text-[9px] text-slate-600">
|
|
<span>2개월</span>
|
|
<span>36개월</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monthly Repayment (Visible when split is selected) -->
|
|
<div id="monthly-info" class="p-4 bg-indigo-500/5 rounded-2xl border border-indigo-500/10">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs text-slate-400">월 예상 상환액</span>
|
|
<span id="monthly-amount" class="text-sm font-bold text-indigo-300">4,666,667원</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Repayment Schedule List (Dynamic) -->
|
|
<div id="schedule-container" class="space-y-2 mt-4 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar hidden">
|
|
<label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest pl-1">납부 일정 체크리스트</label>
|
|
<div id="schedule-list" class="space-y-2">
|
|
<!-- Dynamic items here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settlement Options -->
|
|
<div class="p-4 bg-amber-500/5 rounded-2xl border border-amber-500/20">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="Handshake" size="14" class="text-amber-400"></i>
|
|
<span class="text-xs font-bold text-amber-200">할인 및 합의 처리</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-[11px] text-slate-400 leading-tight">합의 목표가: <span id="settlement-target-display">51,000,000</span>원<br>수수료 면제 협의 가능</span>
|
|
<button onclick="openSettlementModal()" class="px-3 py-1.5 bg-amber-500/20 text-amber-400 text-[10px] font-bold rounded-lg hover:bg-amber-500/30 transition-colors">
|
|
합의안 작성
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 pt-6 border-t border-white/10">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs text-slate-400">현재 회수 진행 상태</span>
|
|
<span class="text-xs font-bold text-emerald-400 px-2 py-0.5 bg-emerald-500/10 rounded-full">정상 상환 중</span>
|
|
</div>
|
|
<div class="w-full bg-white/5 rounded-full h-1.5 overflow-hidden">
|
|
<div class="bg-emerald-500 w-[45%] h-full rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Helper Card -->
|
|
<div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100 fade-in" style="animation-delay: 0.4s">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center text-blue-500">
|
|
<i data-lucide="Help-Circle" size="22"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-800">도움말</h3>
|
|
</div>
|
|
<p class="text-sm text-slate-500 leading-relaxed mb-6">
|
|
설정된 상환 계획은 법적 효력이 있는 합의서를 기반으로 합니다. 분할 납부 지연 시 <span class="font-bold text-rose-500">기한의 이익</span>이 상실되어 즉시 강제집행 절차로 전환될 수 있습니다.
|
|
</p>
|
|
<button class="w-full py-3 border border-slate-200 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-50 transition-colors flex items-center justify-center gap-2">
|
|
채무 합의서 양식 다운로드
|
|
<i data-lucide="Download" size="14"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Quote Card -->
|
|
<div class="bg-slate-50 rounded-3xl p-6 border border-slate-100 fade-in" style="animation-delay: 0.5s">
|
|
<p class="text-sm text-slate-600 italic text-center leading-relaxed">
|
|
"성공적인 채권 회수는 철저한<br>
|
|
<span class="font-bold text-indigo-600">심리적 전술</span>과 <span class="font-bold text-indigo-600">법적 타이밍</span>의 결합입니다."
|
|
</p>
|
|
<div class="mt-4 flex items-center justify-center gap-2">
|
|
<div class="w-6 h-6 bg-indigo-100 rounded-full"></div>
|
|
<span class="text-xs font-bold text-slate-400">Antigravity Advisor</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-8 text-center">
|
|
<p class="text-[11px] text-slate-400">© 2026 SAM SaaS System. For Legal Professional Collaboration.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settlement Modal -->
|
|
<div id="settlementModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-3xl w-full max-w-md shadow-2xl overflow-hidden fade-in">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-lg font-bold text-slate-800">채무 합의안 작성</h3>
|
|
<button onclick="closeSettlementModal()" class="text-slate-400 hover:text-slate-600 transition-colors">
|
|
<i data-lucide="X" size="24"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-8 space-y-6">
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">현재 최종 목표액</label>
|
|
<div class="text-2xl font-black text-slate-900">56,000,000원</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-bold text-indigo-600 uppercase tracking-wider mb-2">합의 제안 금액 (원)</label>
|
|
<input type="number" id="settlement-input" value="51000000"
|
|
class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-lg font-bold focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
|
|
<p class="mt-2 text-[11px] text-slate-400 leading-relaxed">
|
|
* 합의 금액 수정 시 원금 대비 감면율이 자동으로 계산됩니다.<br>
|
|
* 변호사 검토 후 최종 합의안이 발송됩니다.
|
|
</p>
|
|
</div>
|
|
<div class="bg-amber-50 border border-amber-100 p-4 rounded-2xl flex items-start gap-3">
|
|
<i data-lucide="Alert-Triangle" class="text-amber-500 mt-1 flex-shrink-0" size="18"></i>
|
|
<p class="text-xs text-amber-700 leading-relaxed">
|
|
합의 처리 시 법정 이율 전액 감면 및 원금의 일부가 조정될 수 있습니다. 신중하게 결정해 주시기 바랍니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-slate-50 flex gap-3">
|
|
<button onclick="closeSettlementModal()" class="flex-1 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-100 transition-colors">취소</button>
|
|
<button onclick="saveSettlement()" class="flex-1 py-3 bg-indigo-600 text-white rounded-xl text-sm font-bold shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-colors">합의안 저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Lucide 아이콘 렌더링
|
|
lucide.createIcons();
|
|
|
|
let currentPaymentType = 'full';
|
|
let currentMonths = 12;
|
|
const totalAmount = 56000000;
|
|
|
|
function setPaymentType(type) {
|
|
currentPaymentType = type;
|
|
const btnFull = document.getElementById('btn-pay-full');
|
|
const btnSplit = document.getElementById('btn-pay-split');
|
|
const sliderCont = document.getElementById('slider-container');
|
|
const monthlyInfo = document.getElementById('monthly-info');
|
|
|
|
if (type === 'full') {
|
|
btnFull.classList.remove('bg-white/5', 'border-white/10');
|
|
btnFull.classList.add('bg-indigo-500/20', 'border-indigo-500/30');
|
|
btnFull.querySelector('span:first-child').classList.replace('text-slate-400', 'text-indigo-300');
|
|
|
|
btnSplit.classList.add('bg-white/5', 'border-white/10');
|
|
btnSplit.classList.remove('bg-indigo-500/20', 'border-indigo-500/30');
|
|
btnSplit.querySelector('span:first-child').classList.replace('text-indigo-300', 'text-slate-400');
|
|
btnSplit.querySelector('#display-months').classList.replace('text-white', 'text-slate-400');
|
|
|
|
sliderCont.classList.add('opacity-30', 'pointer-events-none');
|
|
monthlyInfo.classList.add('hidden');
|
|
} else {
|
|
btnSplit.classList.remove('bg-white/5', 'border-white/10');
|
|
btnSplit.classList.add('bg-indigo-500/20', 'border-indigo-500/30');
|
|
btnSplit.querySelector('span:first-child').classList.replace('text-slate-400', 'text-indigo-300');
|
|
btnSplit.querySelector('#display-months').classList.replace('text-slate-400', 'text-white');
|
|
|
|
btnFull.classList.add('bg-white/5', 'border-white/10');
|
|
btnFull.classList.remove('bg-indigo-500/20', 'border-indigo-500/30');
|
|
btnFull.querySelector('span:first-child').classList.replace('text-indigo-300', 'text-slate-400');
|
|
|
|
sliderCont.classList.remove('opacity-30', 'pointer-events-none');
|
|
monthlyInfo.classList.remove('hidden');
|
|
}
|
|
calculateRepayment();
|
|
}
|
|
|
|
function updateMonths(val) {
|
|
currentMonths = val;
|
|
document.getElementById('slider-val').innerText = val + '개월';
|
|
document.getElementById('display-months').innerText = val + '회 분할';
|
|
calculateRepayment();
|
|
}
|
|
|
|
function generateSchedule() {
|
|
const list = document.getElementById('schedule-list');
|
|
const container = document.getElementById('schedule-container');
|
|
const startDateInput = document.getElementById('recovery-start-date');
|
|
|
|
if (!startDateInput.value) {
|
|
const today = new Date();
|
|
startDateInput.value = today.toISOString().split('T')[0];
|
|
}
|
|
|
|
container.classList.remove('hidden');
|
|
list.innerHTML = '';
|
|
|
|
const baseDate = new Date(startDateInput.value);
|
|
|
|
if (currentPaymentType === 'full') {
|
|
const item = document.createElement('div');
|
|
item.className = 'p-4 bg-indigo-500/10 rounded-2xl border border-indigo-500/20 flex items-center justify-between group fade-in';
|
|
item.innerHTML = `
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" onchange="toggleScheduleRow(this)" class="w-5 h-5 rounded border-indigo-400/30 bg-transparent text-indigo-500 focus:ring-indigo-500">
|
|
<div>
|
|
<div class="text-[10px] font-bold text-indigo-300 uppercase tracking-widest">일시납 총액</div>
|
|
<div class="text-sm font-black text-white">${totalAmount.toLocaleString()}원</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-[11px] text-indigo-200 font-mono font-bold">${startDateInput.value}</div>
|
|
<div class="text-[10px] text-indigo-400 font-bold status-label">미납</div>
|
|
</div>
|
|
`;
|
|
list.appendChild(item);
|
|
return;
|
|
}
|
|
|
|
const monthly = Math.round(totalAmount / currentMonths);
|
|
|
|
for (let i = 1; i <= currentMonths; i++) {
|
|
const dueDate = new Date(baseDate);
|
|
dueDate.setMonth(baseDate.getMonth() + (i - 1)); // i-1 because first payment is usually on start date or 1 month after. Let's make it 1 month after as per standard.
|
|
dueDate.setMonth(baseDate.getMonth() + i);
|
|
|
|
const dateStr = dueDate.toISOString().split('T')[0];
|
|
|
|
const item = document.createElement('div');
|
|
item.className = 'p-3 bg-white/5 rounded-xl border border-white/5 flex items-center justify-between group hover:bg-white/10 transition-all';
|
|
item.innerHTML = `
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" onchange="toggleScheduleRow(this)" class="w-4 h-4 rounded border-white/20 bg-transparent text-indigo-500 focus:ring-indigo-500">
|
|
<div>
|
|
<div class="text-[10px] font-bold text-slate-400">${i}회차</div>
|
|
<div class="text-xs font-mono text-white">${monthly.toLocaleString()}원</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-[10px] text-slate-400 font-mono">${dateStr}</div>
|
|
<div class="text-[9px] text-slate-600 font-bold status-label">미납</div>
|
|
</div>
|
|
`;
|
|
list.appendChild(item);
|
|
}
|
|
}
|
|
|
|
function toggleScheduleRow(cb) {
|
|
const row = cb.closest('.group');
|
|
const statusLabel = row.querySelector('.status-label');
|
|
if (cb.checked) {
|
|
row.classList.add('bg-emerald-500/10', 'border-emerald-500/20');
|
|
row.classList.remove('bg-white/5', 'border-white/5');
|
|
statusLabel.innerText = '입금완료';
|
|
statusLabel.classList.add('text-emerald-400');
|
|
statusLabel.classList.remove('text-slate-600');
|
|
} else {
|
|
row.classList.remove('bg-emerald-500/10', 'border-emerald-500/20');
|
|
row.classList.add('bg-white/5', 'border-white/5');
|
|
statusLabel.innerText = '미납';
|
|
statusLabel.classList.remove('text-emerald-400');
|
|
statusLabel.classList.add('text-slate-600');
|
|
}
|
|
}
|
|
|
|
function calculateRepayment() {
|
|
if (currentPaymentType === 'split') {
|
|
const monthly = Math.round(totalAmount / currentMonths);
|
|
document.getElementById('monthly-amount').innerText = monthly.toLocaleString() + '원';
|
|
}
|
|
generateSchedule();
|
|
}
|
|
|
|
// Modal Functions
|
|
function openSettlementModal() {
|
|
document.getElementById('settlementModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeSettlementModal() {
|
|
document.getElementById('settlementModal').classList.add('hidden');
|
|
}
|
|
|
|
function saveSettlement() {
|
|
const newVal = document.getElementById('settlement-input').value;
|
|
document.getElementById('settlement-target-display').innerText = parseInt(newVal).toLocaleString();
|
|
closeSettlementModal();
|
|
|
|
// 시각적 효과
|
|
const targetEl = document.getElementById('settlement-target-display').parentElement;
|
|
targetEl.classList.add('text-indigo-400', 'scale-110', 'transition-all');
|
|
setTimeout(() => {
|
|
targetEl.classList.remove('scale-110');
|
|
}, 300);
|
|
}
|
|
|
|
// Tab Management
|
|
function showTab(tabId) {
|
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
document.getElementById(tabId).classList.add('active');
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.classList.remove('nav-active');
|
|
btn.classList.add('bg-white', 'text-slate-600', 'hover:bg-slate-100');
|
|
const badge = btn.querySelector('span');
|
|
if (badge) {
|
|
badge.classList.remove('bg-white/20');
|
|
badge.classList.add('bg-slate-200');
|
|
}
|
|
});
|
|
|
|
const activeBtn = document.getElementById('tab-' + tabId);
|
|
activeBtn.classList.add('nav-active');
|
|
activeBtn.classList.remove('bg-white', 'text-slate-600', 'hover:bg-slate-100');
|
|
const activeBadge = activeBtn.querySelector('span');
|
|
if (activeBadge) {
|
|
activeBadge.classList.add('bg-white/20');
|
|
activeBadge.classList.remove('bg-slate-200');
|
|
}
|
|
}
|
|
|
|
// Progress Tracking Function
|
|
function updateProgress() {
|
|
// Overall calculation
|
|
const allCheckboxes = document.querySelectorAll('.step-checkbox');
|
|
const total = allCheckboxes.length;
|
|
const checked = Array.from(allCheckboxes).filter(cb => cb.checked).length;
|
|
const overallPercentage = total > 0 ? Math.round((checked / total) * 100) : 0;
|
|
|
|
document.getElementById('progress-bar').style.width = overallPercentage + '%';
|
|
document.getElementById('progress-text').innerText = overallPercentage + '%';
|
|
|
|
// Individual Phase calculation
|
|
['phase1', 'phase2', 'phase3', 'phase4'].forEach(phaseId => {
|
|
const phaseSection = document.getElementById(phaseId);
|
|
const phaseCheckboxes = phaseSection.querySelectorAll('.step-checkbox');
|
|
const pTotal = phaseCheckboxes.length;
|
|
const pChecked = Array.from(phaseCheckboxes).filter(cb => cb.checked).length;
|
|
const pPercentage = pTotal > 0 ? Math.round((pChecked / pTotal) * 100) : 0;
|
|
|
|
const textElem = document.getElementById(phaseId + '-text');
|
|
const barElem = document.getElementById(phaseId + '-bar');
|
|
|
|
if (textElem) textElem.innerText = pPercentage + '%';
|
|
if (barElem) barElem.style.width = pPercentage + '%';
|
|
});
|
|
}
|
|
|
|
// Initialize on load
|
|
window.onload = function() {
|
|
updateProgress();
|
|
setPaymentType('full'); // Set Initial UI state
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |