47578da428
- PayrollController에 generateJournalEntry() 메서드 추가 - 해당월 급여 합산 → 분개 행 자동 구성 (차변 801 급여, 대변 207/205) - 중복 체크 (source_type=payroll, source_key=payroll-YYYY-MM) - 0원 항목 행 제외, 차대 균형 검증 - 급여관리 페이지에 전표 생성 버튼 추가
1420 lines
79 KiB
PHP
1420 lines
79 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '급여관리')
|
|
|
|
@section('content')
|
|
<div class="px-4 py-6">
|
|
{{-- 페이지 헤더 --}}
|
|
<div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">급여관리
|
|
<button type="button" onclick="openPayrollHelpModal()" title="급여계산 도움말"
|
|
class="inline-flex items-center justify-center w-6 h-6 ml-1 text-blue-500 hover:text-blue-700 hover:bg-blue-50 rounded-full transition-colors align-middle">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</button>
|
|
</h1>
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<select id="payrollYear" class="px-2 py-1 border border-gray-300 rounded text-sm text-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
@for($y = now()->year; $y >= now()->year - 2; $y--)
|
|
<option value="{{ $y }}" {{ $stats['year'] == $y ? 'selected' : '' }}>{{ $y }}년</option>
|
|
@endfor
|
|
</select>
|
|
<select id="payrollMonth" class="px-2 py-1 border border-gray-300 rounded text-sm text-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
@for($m = 1; $m <= 12; $m++)
|
|
<option value="{{ $m }}" {{ $stats['month'] == $m ? 'selected' : '' }}>{{ $m }}월</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2 sm:gap-3">
|
|
<button type="button" onclick="openCreatePayrollModal()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
급여 등록
|
|
</button>
|
|
<button type="button" onclick="bulkGeneratePayrolls()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
|
</svg>
|
|
일괄 생성
|
|
</button>
|
|
<button type="button" onclick="copyFromPreviousMonth()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white text-sm font-medium rounded-lg transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"/>
|
|
</svg>
|
|
전월 복사
|
|
</button>
|
|
<button type="button" onclick="exportPayrolls()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium rounded-lg transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
엑셀 다운로드
|
|
</button>
|
|
<button type="button" onclick="generateJournalEntry()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
전표 생성
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 탭 네비게이션 --}}
|
|
<div class="flex items-center gap-1 mb-4 border-b border-gray-200">
|
|
<button type="button" onclick="switchTab('list')" id="tab-list"
|
|
class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-blue-600 text-blue-600">
|
|
급여 목록
|
|
</button>
|
|
<button type="button" onclick="switchTab('settings')" id="tab-settings"
|
|
class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700">
|
|
급여 설정
|
|
</button>
|
|
</div>
|
|
|
|
{{-- 통계 카드 (HTMX 갱신 대상) --}}
|
|
<div id="stats-container" class="mb-4">
|
|
@include('hr.payrolls.partials.stats', ['stats' => $stats])
|
|
</div>
|
|
|
|
{{-- 탭 콘텐츠 영역 --}}
|
|
<div id="payrolls-content">
|
|
{{-- 급여 목록 탭 --}}
|
|
<div id="content-list">
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
{{-- 필터 --}}
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<x-filter-collapsible id="payrollFilter">
|
|
<form id="payrollFilterForm" class="flex flex-wrap gap-3 items-end">
|
|
<div style="flex: 1 1 180px; max-width: 260px;">
|
|
<label class="block text-xs text-gray-500 mb-1">검색</label>
|
|
<input type="text" name="q" placeholder="사원 이름..."
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div style="flex: 0 1 160px;">
|
|
<label class="block text-xs text-gray-500 mb-1">부서</label>
|
|
<select name="department_id"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">전체 부서</option>
|
|
@foreach($departments as $dept)
|
|
<option value="{{ $dept->id }}">{{ $dept->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div style="flex: 0 1 140px;">
|
|
<label class="block text-xs text-gray-500 mb-1">상태</label>
|
|
<select name="status"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">전체 상태</option>
|
|
@foreach($statusMap as $key => $label)
|
|
<option value="{{ $key }}">{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="shrink-0">
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white text-sm rounded-lg transition-colors">
|
|
검색
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</x-filter-collapsible>
|
|
</div>
|
|
|
|
{{-- HTMX 테이블 영역 --}}
|
|
<div id="payrolls-table"
|
|
hx-get="{{ route('api.admin.hr.payrolls.index') }}"
|
|
hx-vals='{"year": "{{ $stats['year'] }}", "month": "{{ $stats['month'] }}"}'
|
|
hx-trigger="load"
|
|
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
|
|
class="min-h-[200px]">
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 급여 설정 탭 --}}
|
|
<div id="content-settings" class="hidden">
|
|
<div id="payroll-settings-container">
|
|
@include('hr.payrolls.partials.settings', ['settings' => $settings])
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 급여 등록/수정 모달 --}}
|
|
<div id="payrollModal" class="fixed inset-0 z-50 hidden">
|
|
<div class="fixed inset-0 bg-black/40" onclick="closePayrollModal()"></div>
|
|
<div class="fixed inset-0 flex items-center justify-center p-4 overflow-y-auto">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl relative my-8">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
|
|
<h3 id="payrollModalTitle" class="text-lg font-semibold text-gray-800">급여 등록</h3>
|
|
<button type="button" onclick="closePayrollModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form id="payrollForm" class="px-6 py-4 space-y-4 max-h-[70vh] overflow-y-auto">
|
|
<input type="hidden" id="payrollId" name="id" value="">
|
|
|
|
{{-- 기본 정보 --}}
|
|
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));">
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">사원 <span class="text-red-500">*</span></label>
|
|
<select id="payrollUserId" name="user_id" required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">사원 선택</option>
|
|
@foreach($employees as $emp)
|
|
<option value="{{ $emp->user_id }}"
|
|
data-salary="{{ $emp->getJsonExtraValue('salary', 0) }}"
|
|
data-dependents="{{ 1 + collect($emp->dependents)->where('is_dependent', true)->count() }}">
|
|
{{ $emp->display_name ?? $emp->user?->name }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">급여 연월</label>
|
|
<div class="flex gap-2">
|
|
<input type="number" id="payrollPayYear" name="pay_year" min="2020" max="2100"
|
|
value="{{ now()->year }}"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<input type="number" id="payrollPayMonth" name="pay_month" min="1" max="12"
|
|
value="{{ now()->month }}"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 지급 항목 --}}
|
|
<div>
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">지급 항목</h4>
|
|
<div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">기본급</label>
|
|
<input type="text" id="payrollBaseSalary" name="base_salary" inputmode="numeric" value="0"
|
|
oninput="formatMoneyInput(this); recalculate()"
|
|
onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
|
|
class="money-input w-full px-3 py-2 border border-gray-300 rounded-lg text-sm text-right focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">고정연장근로수당</label>
|
|
<input type="text" id="payrollOvertimePay" name="overtime_pay" inputmode="numeric" value="0"
|
|
oninput="formatMoneyInput(this); recalculate()"
|
|
onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
|
|
class="money-input w-full px-3 py-2 border border-gray-300 rounded-lg text-sm text-right focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">식대(비과세)</label>
|
|
<input type="text" id="payrollBonus" name="bonus" inputmode="numeric" value="0"
|
|
oninput="formatMoneyInput(this); recalculate()"
|
|
onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
|
|
class="money-input w-full px-3 py-2 border border-gray-300 rounded-lg text-sm text-right focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 수당 (동적 추가) --}}
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h4 class="text-sm font-medium text-gray-700">수당</h4>
|
|
<button type="button" onclick="addAllowanceRow()" class="text-xs text-blue-600 hover:text-blue-800">+ 추가</button>
|
|
</div>
|
|
<div id="allowancesContainer" class="space-y-2"></div>
|
|
</div>
|
|
|
|
{{-- 공제 항목 (자동 계산 + 수동 수정 가능) --}}
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h4 class="text-sm font-medium text-gray-700">공제 항목</h4>
|
|
<button type="button" onclick="resetDeductionOverrides()" class="text-xs text-blue-600 hover:text-blue-800">재계산</button>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-3 space-y-1.5 text-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-500">국민연금</span>
|
|
<input type="text" id="calcPension" inputmode="numeric" value="0"
|
|
oninput="formatMoneyInput(this); markManualOverride(this); updateDeductionTotals()"
|
|
onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
|
|
class="money-input w-28 px-2 py-1 border border-gray-200 rounded text-right text-sm text-gray-700 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-500">건강보험</span>
|
|
<input type="text" id="calcHealth" inputmode="numeric" value="0"
|
|
oninput="formatMoneyInput(this); markManualOverride(this); updateDeductionTotals()"
|
|
onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
|
|
class="money-input w-28 px-2 py-1 border border-gray-200 rounded text-right text-sm text-gray-700 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-500">장기요양보험</span>
|
|
<input type="text" id="calcLongTermCare" inputmode="numeric" value="0"
|
|
oninput="formatMoneyInput(this); markManualOverride(this); updateDeductionTotals()"
|
|
onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
|
|
class="money-input w-28 px-2 py-1 border border-gray-200 rounded text-right text-sm text-gray-700 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-500">고용보험</span>
|
|
<input type="text" id="calcEmployment" inputmode="numeric" value="0"
|
|
oninput="formatMoneyInput(this); markManualOverride(this); updateDeductionTotals()"
|
|
onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
|
|
class="money-input w-28 px-2 py-1 border border-gray-200 rounded text-right text-sm text-gray-700 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-500">근로소득세</span>
|
|
<input type="text" id="calcIncomeTax" inputmode="numeric" value="0"
|
|
oninput="formatMoneyInput(this); markManualOverride(this); updateDeductionTotals()"
|
|
onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
|
|
class="money-input w-28 px-2 py-1 border border-gray-200 rounded text-right text-sm text-gray-700 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-500">지방소득세</span>
|
|
<input type="text" id="calcResidentTax" inputmode="numeric" value="0"
|
|
oninput="formatMoneyInput(this); markManualOverride(this); updateDeductionTotals()"
|
|
onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
|
|
class="money-input w-28 px-2 py-1 border border-gray-200 rounded text-right text-sm text-gray-700 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 추가 공제 (동적) --}}
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h4 class="text-sm font-medium text-gray-700">추가 공제</h4>
|
|
<button type="button" onclick="addDeductionRow()" class="text-xs text-blue-600 hover:text-blue-800">+ 추가</button>
|
|
</div>
|
|
<div id="deductionsContainer" class="space-y-2"></div>
|
|
</div>
|
|
|
|
{{-- 합계 --}}
|
|
<div class="bg-blue-50 rounded-lg p-4 space-y-2">
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-gray-600 font-medium">총 지급액</span>
|
|
<span id="calcGross" class="text-blue-700 font-bold">0</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-gray-400">과세표준 (식대 제외)</span>
|
|
<span id="calcTaxableBase" class="text-gray-500">0</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-gray-400">공제대상가족수</span>
|
|
<span id="calcFamilyCount" class="text-gray-500">1명</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-gray-600 font-medium">총 공제액</span>
|
|
<span id="calcTotalDeductions" class="text-red-600 font-bold">0</span>
|
|
</div>
|
|
<div class="flex justify-between text-base border-t border-blue-200 pt-2">
|
|
<span class="text-gray-800 font-bold">실수령액</span>
|
|
<span id="calcNet" class="text-emerald-600 font-bold">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 비고 --}}
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">비고</label>
|
|
<textarea id="payrollNote" name="note" rows="2"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
|
|
</div>
|
|
</form>
|
|
<div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200">
|
|
<button type="button" onclick="closePayrollModal()"
|
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
|
|
취소
|
|
</button>
|
|
<button type="button" onclick="submitPayroll()"
|
|
class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
|
|
저장
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 급여 상세 모달 --}}
|
|
<div id="payrollDetailModal" class="fixed inset-0 z-50 hidden">
|
|
<div class="fixed inset-0 bg-black/40" onclick="closePayrollDetailModal()"></div>
|
|
<div class="fixed inset-0 flex items-center justify-center p-4 overflow-y-auto">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-lg relative my-8">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-800">급여 상세</h3>
|
|
<button type="button" onclick="closePayrollDetailModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="payrollDetailContent" class="px-6 py-4 max-h-[70vh] overflow-y-auto"></div>
|
|
<div class="flex items-center justify-end px-6 py-4 border-t border-gray-200">
|
|
<button type="button" onclick="closePayrollDetailModal()"
|
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
|
|
닫기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 급여계산 도움말 모달 --}}
|
|
<div id="payrollHelpModal" class="fixed inset-0 z-50 hidden">
|
|
<div class="fixed inset-0 bg-black/40" onclick="closePayrollHelpModal()"></div>
|
|
<div class="fixed inset-0 flex items-center justify-center p-4 overflow-y-auto">
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-3xl relative my-8">
|
|
{{-- 헤더 --}}
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700 rounded-t-xl">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 bg-white/20 rounded-lg flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-white">급여계산 도움말</h3>
|
|
</div>
|
|
<button type="button" onclick="closePayrollHelpModal()" class="text-white/70 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- 본문 --}}
|
|
<div class="px-6 py-5 max-h-[75vh] overflow-y-auto space-y-6 text-sm text-gray-700 leading-relaxed">
|
|
|
|
{{-- 1. 전체 흐름 --}}
|
|
<div>
|
|
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
|
|
<span class="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">1</span>
|
|
급여계산의 전체 흐름
|
|
</h4>
|
|
<div class="bg-gray-50 rounded-lg p-4 font-mono text-xs text-center text-gray-600 leading-loose">
|
|
<span class="text-blue-700 font-bold">기본급 + 수당</span>
|
|
<span class="mx-1">=</span>
|
|
<span class="text-emerald-700 font-bold">총 지급액</span>
|
|
<span class="mx-1">-</span>
|
|
<span class="text-red-600 font-bold">공제액(4대보험+세금)</span>
|
|
<span class="mx-1">=</span>
|
|
<span class="text-violet-700 font-bold">실수령액</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 2. 지급 항목 --}}
|
|
<div>
|
|
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
|
|
<span class="w-6 h-6 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">2</span>
|
|
지급 항목 (회사가 주는 금액)
|
|
</h4>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden">
|
|
<thead>
|
|
<tr class="bg-emerald-50">
|
|
<th class="px-3 py-2 text-left font-semibold text-emerald-800 border-b border-gray-200" style="width: 140px;">항목</th>
|
|
<th class="px-3 py-2 text-left font-semibold text-emerald-800 border-b border-gray-200">설명</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b border-gray-100">
|
|
<td class="px-3 py-2 font-medium">기본급</td>
|
|
<td class="px-3 py-2">근로계약서에 정해진 월 기본 급여입니다.</td>
|
|
</tr>
|
|
<tr class="border-b border-gray-100 bg-gray-50/50">
|
|
<td class="px-3 py-2 font-medium">고정연장근로수당</td>
|
|
<td class="px-3 py-2">매월 고정으로 지급하는 연장근무 수당입니다. 실제 연장근무 여부와 관계없이 정해진 금액을 지급합니다.</td>
|
|
</tr>
|
|
<tr class="border-b border-gray-100">
|
|
<td class="px-3 py-2 font-medium">식대 (비과세)</td>
|
|
<td class="px-3 py-2">월 20만원까지 <span class="text-blue-600 font-semibold">세금이 부과되지 않는</span> 식비 지원금입니다. 총 지급액에는 포함되지만, 세금·보험료 계산에서는 제외됩니다.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-3 py-2 font-medium">추가 수당</td>
|
|
<td class="px-3 py-2">교통비, 직책수당 등 추가로 지급하는 수당입니다. 이 금액은 과세 대상에 포함됩니다.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-3 p-3 bg-blue-50 rounded-lg border border-blue-100">
|
|
<p class="text-blue-800">
|
|
<span class="font-bold">총 지급액</span> = 기본급 + 고정연장근로수당 + 식대 + 추가 수당 합계
|
|
</p>
|
|
<p class="text-blue-700 mt-1">
|
|
<span class="font-bold">과세표준</span> = 총 지급액 - 식대(비과세) <span class="text-xs text-blue-500">← 세금·보험료 계산의 기준 금액</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 3. 공제 항목: 4대보험 --}}
|
|
<div>
|
|
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
|
|
<span class="w-6 h-6 bg-red-100 text-red-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">3</span>
|
|
공제 항목 ① — 4대보험
|
|
</h4>
|
|
<p class="mb-3 text-gray-600">4대보험은 <span class="font-semibold">과세표준</span>을 기준으로 요율을 적용하고, <span class="font-semibold">10원 단위로 절삭</span>합니다.</p>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden">
|
|
<thead>
|
|
<tr class="bg-red-50">
|
|
<th class="px-3 py-2 text-left font-semibold text-red-800 border-b border-gray-200" style="width: 120px;">보험</th>
|
|
<th class="px-3 py-2 text-left font-semibold text-red-800 border-b border-gray-200">계산 방법</th>
|
|
<th class="px-3 py-2 text-left font-semibold text-red-800 border-b border-gray-200" style="width: 120px;">참고</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b border-gray-100">
|
|
<td class="px-3 py-2 font-medium">국민연금</td>
|
|
<td class="px-3 py-2">과세표준 × 요율 (근로자 부담 {{ $settings->pension_rate ?? 4.5 }}%)</td>
|
|
<td class="px-3 py-2 text-xs text-gray-500">상한·하한 적용</td>
|
|
</tr>
|
|
<tr class="border-b border-gray-100 bg-gray-50/50">
|
|
<td class="px-3 py-2 font-medium">건강보험</td>
|
|
<td class="px-3 py-2">과세표준 × 요율 (근로자 부담 {{ $settings->health_insurance_rate ?? 3.545 }}%)</td>
|
|
<td class="px-3 py-2 text-xs text-gray-500"></td>
|
|
</tr>
|
|
<tr class="border-b border-gray-100">
|
|
<td class="px-3 py-2 font-medium">장기요양보험</td>
|
|
<td class="px-3 py-2"><span class="text-blue-600 font-semibold">건강보험료</span> × {{ $settings->long_term_care_rate ?? 12.95 }}%</td>
|
|
<td class="px-3 py-2 text-xs text-gray-500">건강보험료 기준!</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-3 py-2 font-medium">고용보험</td>
|
|
<td class="px-3 py-2">과세표준 × 요율 (근로자 부담 {{ $settings->employment_insurance_rate ?? 0.9 }}%)</td>
|
|
<td class="px-3 py-2 text-xs text-gray-500"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-3 p-3 bg-amber-50 rounded-lg border border-amber-100">
|
|
<p class="text-amber-800 text-xs">
|
|
<span class="font-bold">국민연금 상·하한:</span>
|
|
과세표준이 상한액({{ number_format((int) ($settings->pension_max_salary ?? 6170000)) }}원)을 초과하면 상한액으로, 하한액({{ number_format((int) ($settings->pension_min_salary ?? 390000)) }}원) 미만이면 하한액으로 계산합니다.
|
|
</p>
|
|
<p class="text-amber-800 text-xs mt-1">
|
|
<span class="font-bold">장기요양보험 주의:</span>
|
|
다른 보험과 달리 <span class="underline">건강보험료 금액</span>에 요율을 적용합니다 (과세표준이 아님).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 4. 공제 항목: 세금 --}}
|
|
<div>
|
|
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
|
|
<span class="w-6 h-6 bg-orange-100 text-orange-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">4</span>
|
|
공제 항목 ② — 세금 (근로소득세 + 지방소득세)
|
|
</h4>
|
|
<div class="space-y-3">
|
|
<div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
|
|
<p class="font-semibold text-gray-800 mb-1">근로소득세</p>
|
|
<ul class="list-disc list-inside text-gray-600 space-y-1">
|
|
<li>과세표준과 <span class="font-semibold text-blue-600">공제대상 가족수</span>에 따라 결정됩니다.</li>
|
|
<li>국세청이 고시하는 <span class="font-semibold">간이세액표</span>를 참조합니다.</li>
|
|
<li>가족 수가 많을수록 세금이 줄어듭니다 (기본 1명 = 본인).</li>
|
|
<li>월급 77만원 미만이면 근로소득세가 0원입니다.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
|
|
<p class="font-semibold text-gray-800 mb-1">지방소득세</p>
|
|
<p class="text-gray-600">근로소득세의 <span class="font-semibold text-blue-600">10%</span>를 추가로 납부합니다 (10원 단위 절삭).</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 5. 실수령액 --}}
|
|
<div>
|
|
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
|
|
<span class="w-6 h-6 bg-violet-100 text-violet-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">5</span>
|
|
최종 실수령액
|
|
</h4>
|
|
<div class="bg-gradient-to-r from-violet-50 to-blue-50 rounded-lg p-4 border border-violet-100">
|
|
<div class="text-center space-y-2">
|
|
<p class="text-gray-700">
|
|
<span class="font-bold text-emerald-700">총 지급액</span>
|
|
<span class="mx-2">-</span>
|
|
<span class="font-bold text-red-600">총 공제액</span>
|
|
<span class="mx-2">=</span>
|
|
<span class="font-bold text-violet-700">실수령액</span>
|
|
</p>
|
|
<p class="text-xs text-gray-500">총 공제액 = 4대보험 + 근로소득세 + 지방소득세 + 추가공제</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 6. 예시 --}}
|
|
<div>
|
|
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
|
|
<span class="w-6 h-6 bg-gray-200 text-gray-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">6</span>
|
|
계산 예시
|
|
</h4>
|
|
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200 space-y-2 text-xs">
|
|
<p class="font-semibold text-gray-800 text-sm mb-2">예) 기본급 250만원, 고정연장 30만원, 식대 20만원</p>
|
|
<div class="grid gap-x-6 gap-y-1" style="grid-template-columns: auto 1fr;">
|
|
<span class="text-gray-500 text-right">총 지급액</span>
|
|
<span>= 2,500,000 + 300,000 + 200,000 = <span class="font-bold text-emerald-700">3,000,000원</span></span>
|
|
<span class="text-gray-500 text-right">과세표준</span>
|
|
<span>= 3,000,000 - 200,000(비과세) = <span class="font-bold">2,800,000원</span></span>
|
|
<span class="text-gray-500 text-right">국민연금</span>
|
|
<span>= 2,800,000 × {{ $settings->pension_rate ?? 4.5 }}% = <span class="font-bold text-red-600">{{ number_format(floor(2800000 * ($settings->pension_rate ?? 4.5) / 100 / 10) * 10) }}원</span></span>
|
|
<span class="text-gray-500 text-right">건강보험</span>
|
|
<span>= 2,800,000 × {{ $settings->health_insurance_rate ?? 3.545 }}% = <span class="font-bold text-red-600">{{ number_format(floor(2800000 * ($settings->health_insurance_rate ?? 3.545) / 100 / 10) * 10) }}원</span></span>
|
|
<span class="text-gray-500 text-right">장기요양</span>
|
|
<span>= 건강보험료 × {{ $settings->long_term_care_rate ?? 12.95 }}%</span>
|
|
<span class="text-gray-500 text-right">고용보험</span>
|
|
<span>= 2,800,000 × {{ $settings->employment_insurance_rate ?? 0.9 }}% = <span class="font-bold text-red-600">{{ number_format(floor(2800000 * ($settings->employment_insurance_rate ?? 0.9) / 100 / 10) * 10) }}원</span></span>
|
|
<span class="text-gray-500 text-right">근로소득세</span>
|
|
<span>= 간이세액표 조회 (과세표준 280만원, 가족 1명 기준)</span>
|
|
<span class="text-gray-500 text-right">지방소득세</span>
|
|
<span>= 근로소득세 × 10%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 7. 상태 흐름 --}}
|
|
<div>
|
|
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
|
|
<span class="w-6 h-6 bg-gray-200 text-gray-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">7</span>
|
|
급여 처리 흐름
|
|
</h4>
|
|
<div class="flex items-center justify-center gap-2 flex-wrap py-2">
|
|
<span class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-lg text-xs font-semibold border border-gray-200">작성(draft)</span>
|
|
<svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
|
<span class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg text-xs font-semibold border border-blue-200">확정(confirmed)</span>
|
|
<svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
|
<span class="px-3 py-1.5 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-semibold border border-emerald-200">지급완료(paid)</span>
|
|
</div>
|
|
<ul class="text-xs text-gray-500 space-y-1 mt-2">
|
|
<li><span class="font-medium text-gray-700">작성:</span> 수정, 삭제, 확정이 가능합니다.</li>
|
|
<li><span class="font-medium text-gray-700">확정:</span> 확정 취소 또는 지급 처리할 수 있습니다.</li>
|
|
<li><span class="font-medium text-gray-700">지급완료:</span> 상세 보기만 가능합니다 (수정 불가).</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{{-- 8. 팁 --}}
|
|
<div class="p-4 bg-blue-50 rounded-lg border border-blue-100">
|
|
<p class="font-bold text-blue-800 mb-2 text-sm">알아두면 좋은 팁</p>
|
|
<ul class="text-blue-700 space-y-1.5 text-xs">
|
|
<li><span class="font-semibold">일괄 생성:</span> 재직 중인 전체 사원의 급여를 연봉 정보 기반으로 한 번에 생성합니다.</li>
|
|
<li><span class="font-semibold">전월 복사:</span> 지난달 급여를 복사해 이번 달로 가져옵니다. 동일 조건이 반복될 때 편리합니다.</li>
|
|
<li><span class="font-semibold">수동 수정:</span> 자동 계산된 공제 항목을 수동으로 덮어쓸 수 있습니다. 수정하면 해당 값이 우선 적용됩니다.</li>
|
|
<li><span class="font-semibold">급여 설정:</span> 4대보험 요율, 국민연금 상·하한액은 「급여 설정」 탭에서 변경할 수 있습니다.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 푸터 --}}
|
|
<div class="flex items-center justify-end px-6 py-4 border-t border-gray-200">
|
|
<button type="button" onclick="closePayrollHelpModal()"
|
|
class="px-5 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors font-medium">
|
|
닫기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// ===== 급여계산 도움말 모달 =====
|
|
function openPayrollHelpModal() {
|
|
document.getElementById('payrollHelpModal').classList.remove('hidden');
|
|
}
|
|
function closePayrollHelpModal() {
|
|
document.getElementById('payrollHelpModal').classList.add('hidden');
|
|
}
|
|
|
|
// ===== 현재 탭 상태 =====
|
|
let currentTab = 'list';
|
|
const tabLoaded = { list: true, settings: true };
|
|
|
|
function switchTab(tab) {
|
|
document.getElementById('tab-' + currentTab).className = 'px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700';
|
|
document.getElementById('content-' + currentTab).classList.add('hidden');
|
|
|
|
currentTab = tab;
|
|
document.getElementById('tab-' + tab).className = 'px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-blue-600 text-blue-600';
|
|
document.getElementById('content-' + tab).classList.remove('hidden');
|
|
}
|
|
|
|
// ===== 연월 변경 =====
|
|
document.getElementById('payrollYear').addEventListener('change', onPeriodChange);
|
|
document.getElementById('payrollMonth').addEventListener('change', onPeriodChange);
|
|
|
|
function onPeriodChange() {
|
|
refreshStats();
|
|
refreshTable();
|
|
}
|
|
|
|
function refreshStats() {
|
|
htmx.ajax('GET', '{{ route("api.admin.hr.payrolls.stats") }}', {
|
|
target: '#stats-container',
|
|
swap: 'innerHTML',
|
|
values: {
|
|
year: document.getElementById('payrollYear').value,
|
|
month: document.getElementById('payrollMonth').value,
|
|
},
|
|
});
|
|
}
|
|
|
|
// ===== 필터 =====
|
|
document.getElementById('payrollFilterForm')?.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
refreshTable();
|
|
});
|
|
|
|
function refreshTable() {
|
|
htmx.ajax('GET', '{{ route("api.admin.hr.payrolls.index") }}', {
|
|
target: '#payrolls-table',
|
|
swap: 'innerHTML',
|
|
values: getFilterValues(),
|
|
});
|
|
}
|
|
|
|
function getFilterValues() {
|
|
const form = document.getElementById('payrollFilterForm');
|
|
const formData = new FormData(form);
|
|
const values = {
|
|
year: document.getElementById('payrollYear').value,
|
|
month: document.getElementById('payrollMonth').value,
|
|
};
|
|
for (const [key, value] of formData.entries()) {
|
|
if (value) values[key] = value;
|
|
}
|
|
return values;
|
|
}
|
|
|
|
// ===== 전표 생성 =====
|
|
function generateJournalEntry() {
|
|
const year = document.getElementById('payrollYear').value;
|
|
const month = document.getElementById('payrollMonth').value;
|
|
|
|
if (!confirm(`${year}년 ${month}월 급여 데이터로 일반전표를 생성하시겠습니까?`)) return;
|
|
|
|
fetch('{{ route("api.admin.hr.payrolls.generate-journal-entry") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
},
|
|
body: JSON.stringify({ year: parseInt(year), month: parseInt(month) }),
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
showToast(result.message, 'success');
|
|
} else {
|
|
showToast(result.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showToast('전표 생성 중 오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// ===== 엑셀 다운로드 =====
|
|
function exportPayrolls() {
|
|
const params = new URLSearchParams(getFilterValues());
|
|
window.location.href = '{{ route("api.admin.hr.payrolls.export") }}?' + params.toString();
|
|
}
|
|
|
|
// ===== 급여 등록 모달 =====
|
|
let editingPayrollId = null;
|
|
|
|
function openCreatePayrollModal() {
|
|
editingPayrollId = null;
|
|
document.getElementById('payrollModalTitle').textContent = '급여 등록';
|
|
document.getElementById('payrollForm').reset();
|
|
document.getElementById('payrollId').value = '';
|
|
document.getElementById('payrollPayYear').value = document.getElementById('payrollYear').value;
|
|
document.getElementById('payrollPayMonth').value = document.getElementById('payrollMonth').value;
|
|
document.getElementById('allowancesContainer').innerHTML = '';
|
|
document.getElementById('deductionsContainer').innerHTML = '';
|
|
resetCalculation();
|
|
document.getElementById('payrollModal').classList.remove('hidden');
|
|
}
|
|
|
|
function openEditPayrollModal(id, data) {
|
|
editingPayrollId = id;
|
|
document.getElementById('payrollModalTitle').textContent = '급여 수정';
|
|
document.getElementById('payrollId').value = id;
|
|
document.getElementById('payrollUserId').value = data.user_id;
|
|
document.getElementById('payrollUserId').disabled = true;
|
|
document.getElementById('payrollPayYear').value = document.getElementById('payrollYear').value;
|
|
document.getElementById('payrollPayMonth').value = document.getElementById('payrollMonth').value;
|
|
setMoneyValue(document.getElementById('payrollBaseSalary'), data.base_salary || 0);
|
|
setMoneyValue(document.getElementById('payrollOvertimePay'), data.overtime_pay || 0);
|
|
setMoneyValue(document.getElementById('payrollBonus'), data.bonus || 0);
|
|
document.getElementById('payrollNote').value = data.note || '';
|
|
|
|
// 수당 복원
|
|
document.getElementById('allowancesContainer').innerHTML = '';
|
|
if (data.allowances && data.allowances.length > 0) {
|
|
data.allowances.forEach(a => addAllowanceRow(a.name, a.amount));
|
|
}
|
|
|
|
// 공제 복원
|
|
document.getElementById('deductionsContainer').innerHTML = '';
|
|
if (data.deductions && data.deductions.length > 0) {
|
|
data.deductions.forEach(d => addDeductionRow(d.name, d.amount));
|
|
}
|
|
|
|
// 법정공제 항목: DB에 저장된 값을 그대로 표시
|
|
const savedFields = {
|
|
'calcPension': data.pension, 'calcHealth': data.health_insurance,
|
|
'calcLongTermCare': data.long_term_care, 'calcEmployment': data.employment_insurance,
|
|
'calcIncomeTax': data.income_tax, 'calcResidentTax': data.resident_tax,
|
|
};
|
|
Object.entries(savedFields).forEach(([id, val]) => {
|
|
setMoneyValue(document.getElementById(id), val || 0);
|
|
});
|
|
|
|
// 총 지급액·과세표준 계산 표시
|
|
const baseSalary = Number(data.base_salary) || 0;
|
|
const overtimePay = Number(data.overtime_pay) || 0;
|
|
const bonus = Number(data.bonus) || 0;
|
|
let allowancesTotal = 0;
|
|
if (data.allowances) data.allowances.forEach(a => allowancesTotal += (Number(a.amount) || 0));
|
|
const grossSalary = baseSalary + overtimePay + bonus + allowancesTotal;
|
|
document.getElementById('calcGross').textContent = numberFormat(grossSalary);
|
|
document.getElementById('calcTaxableBase').textContent = numberFormat(grossSalary - bonus);
|
|
updateDeductionTotals();
|
|
|
|
document.getElementById('payrollModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closePayrollModal() {
|
|
document.getElementById('payrollModal').classList.add('hidden');
|
|
document.getElementById('payrollUserId').disabled = false;
|
|
}
|
|
|
|
// ===== 사원 선택 시 기본급 자동 입력 + 가족수 표시 =====
|
|
document.getElementById('payrollUserId').addEventListener('change', function() {
|
|
const selected = this.options[this.selectedIndex];
|
|
const dependents = parseInt(selected.dataset.dependents || 1);
|
|
const fcEl = document.getElementById('calcFamilyCount');
|
|
if (fcEl) fcEl.textContent = dependents + '명';
|
|
|
|
if (editingPayrollId) return;
|
|
const salary = parseInt(selected.dataset.salary || 0);
|
|
if (salary > 0) {
|
|
setMoneyValue(document.getElementById('payrollBaseSalary'), Math.round(salary / 12));
|
|
recalculate();
|
|
}
|
|
});
|
|
|
|
// ===== 수당/공제 동적 행 =====
|
|
function addAllowanceRow(name, amount) {
|
|
const container = document.getElementById('allowancesContainer');
|
|
const div = document.createElement('div');
|
|
div.className = 'flex gap-2 items-center';
|
|
const formattedAmount = amount ? Number(amount).toLocaleString('ko-KR') : '';
|
|
div.innerHTML = `
|
|
<input type="text" placeholder="수당명" value="${name || ''}" class="allowance-name px-3 py-1.5 border border-gray-300 rounded-lg text-sm" style="flex: 1 1 120px;">
|
|
<input type="text" inputmode="numeric" placeholder="금액" value="${formattedAmount}" oninput="formatMoneyInput(this); recalculate()" onfocus="moneyFocus(this)" onblur="moneyBlur(this)" class="money-input allowance-amount px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-right" style="flex: 0 0 120px;">
|
|
<button type="button" onclick="this.parentElement.remove(); recalculate();" class="shrink-0 text-red-400 hover:text-red-600">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
`;
|
|
container.appendChild(div);
|
|
}
|
|
|
|
function addDeductionRow(name, amount) {
|
|
const container = document.getElementById('deductionsContainer');
|
|
const div = document.createElement('div');
|
|
div.className = 'flex gap-2 items-center';
|
|
const formattedAmount = amount ? Number(amount).toLocaleString('ko-KR') : '';
|
|
div.innerHTML = `
|
|
<input type="text" inputmode="numeric" placeholder="공제명" value="${name || ''}" class="deduction-name px-3 py-1.5 border border-gray-300 rounded-lg text-sm" style="flex: 1 1 120px;">
|
|
<input type="text" inputmode="numeric" placeholder="금액" value="${formattedAmount}" oninput="formatMoneyInput(this); recalculate()" onfocus="moneyFocus(this)" onblur="moneyBlur(this)" class="money-input deduction-amount px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-right" style="flex: 0 0 120px;">
|
|
<button type="button" onclick="this.parentElement.remove(); recalculate();" class="shrink-0 text-red-400 hover:text-red-600">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
`;
|
|
container.appendChild(div);
|
|
}
|
|
|
|
// ===== 자동 계산 (서버 호출) =====
|
|
let calcTimer = null;
|
|
function recalculate() {
|
|
clearTimeout(calcTimer);
|
|
calcTimer = setTimeout(doRecalculate, 300);
|
|
}
|
|
|
|
function doRecalculate() {
|
|
const baseSalary = parseMoneyValue(document.getElementById('payrollBaseSalary'));
|
|
const overtimePay = parseMoneyValue(document.getElementById('payrollOvertimePay'));
|
|
const bonus = parseMoneyValue(document.getElementById('payrollBonus'));
|
|
|
|
let allowancesTotal = 0;
|
|
document.querySelectorAll('#allowancesContainer > div').forEach(row => {
|
|
allowancesTotal += parseMoneyValue(row.querySelector('.allowance-amount'));
|
|
});
|
|
|
|
const grossSalary = baseSalary + overtimePay + bonus + allowancesTotal;
|
|
const taxableBase = grossSalary - bonus;
|
|
|
|
document.getElementById('calcGross').textContent = numberFormat(grossSalary);
|
|
document.getElementById('calcTaxableBase').textContent = numberFormat(taxableBase);
|
|
|
|
// 수정 모드: 공제항목은 기존 저장값 유지, 총지급액/실수령액만 재합산
|
|
if (editingPayrollId) {
|
|
updateDeductionTotals();
|
|
return;
|
|
}
|
|
|
|
// 신규 등록 모드: 서버에서 요율 기반 자동 계산
|
|
const allowances = [];
|
|
document.querySelectorAll('#allowancesContainer > div').forEach(row => {
|
|
const name = row.querySelector('.allowance-name').value;
|
|
const amount = parseMoneyValue(row.querySelector('.allowance-amount'));
|
|
if (name && amount > 0) allowances.push({name, amount});
|
|
});
|
|
|
|
const deductions = [];
|
|
document.querySelectorAll('#deductionsContainer > div').forEach(row => {
|
|
const name = row.querySelector('.deduction-name').value;
|
|
const amount = parseMoneyValue(row.querySelector('.deduction-amount'));
|
|
if (name && amount !== 0) deductions.push({name, amount});
|
|
});
|
|
|
|
const data = {
|
|
base_salary: baseSalary,
|
|
overtime_pay: overtimePay,
|
|
bonus: bonus,
|
|
allowances: allowances,
|
|
deductions: deductions,
|
|
user_id: parseInt(document.getElementById('payrollUserId').value) || null,
|
|
};
|
|
|
|
fetch('{{ route("api.admin.hr.payrolls.calculate") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify(data),
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
const d = result.data;
|
|
const fields = {
|
|
'calcPension': d.pension,
|
|
'calcHealth': d.health_insurance,
|
|
'calcLongTermCare': d.long_term_care,
|
|
'calcEmployment': d.employment_insurance,
|
|
'calcIncomeTax': d.income_tax,
|
|
'calcResidentTax': d.resident_tax,
|
|
};
|
|
Object.entries(fields).forEach(([id, val]) => {
|
|
const el = document.getElementById(id);
|
|
if (!el.dataset.manual) setMoneyValue(el, val);
|
|
});
|
|
if (d.family_count) {
|
|
const fcEl = document.getElementById('calcFamilyCount');
|
|
if (fcEl) fcEl.textContent = d.family_count + '명';
|
|
}
|
|
updateDeductionTotals();
|
|
}
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
function resetCalculation() {
|
|
['calcPension','calcHealth','calcLongTermCare','calcEmployment','calcIncomeTax','calcResidentTax'].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
el.value = '0';
|
|
delete el.dataset.manual;
|
|
el.classList.remove('bg-yellow-50', 'border-yellow-300');
|
|
el.classList.add('border-gray-200');
|
|
});
|
|
['calcGross','calcTaxableBase','calcTotalDeductions','calcNet'].forEach(id => {
|
|
document.getElementById(id).textContent = '0';
|
|
});
|
|
}
|
|
|
|
function markManualOverride(el) {
|
|
el.dataset.manual = '1';
|
|
el.classList.remove('border-gray-200');
|
|
el.classList.add('bg-yellow-50', 'border-yellow-300');
|
|
}
|
|
|
|
function resetDeductionOverrides() {
|
|
['calcPension','calcHealth','calcLongTermCare','calcEmployment','calcIncomeTax','calcResidentTax'].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
delete el.dataset.manual;
|
|
el.classList.remove('bg-yellow-50', 'border-yellow-300');
|
|
el.classList.add('border-gray-200');
|
|
});
|
|
// 재계산 버튼: 수정 모드에서도 서버 API 호출하여 최신 요율로 재계산
|
|
forceRecalculate();
|
|
}
|
|
|
|
function forceRecalculate() {
|
|
const baseSalary = parseMoneyValue(document.getElementById('payrollBaseSalary'));
|
|
const overtimePay = parseMoneyValue(document.getElementById('payrollOvertimePay'));
|
|
const bonus = parseMoneyValue(document.getElementById('payrollBonus'));
|
|
|
|
const allowances = [];
|
|
document.querySelectorAll('#allowancesContainer > div').forEach(row => {
|
|
const name = row.querySelector('.allowance-name').value;
|
|
const amount = parseMoneyValue(row.querySelector('.allowance-amount'));
|
|
if (name && amount > 0) allowances.push({name, amount});
|
|
});
|
|
|
|
const deductions = [];
|
|
document.querySelectorAll('#deductionsContainer > div').forEach(row => {
|
|
const name = row.querySelector('.deduction-name').value;
|
|
const amount = parseMoneyValue(row.querySelector('.deduction-amount'));
|
|
if (name && amount !== 0) deductions.push({name, amount});
|
|
});
|
|
|
|
const data = {
|
|
base_salary: baseSalary, overtime_pay: overtimePay, bonus: bonus,
|
|
allowances: allowances, deductions: deductions,
|
|
user_id: parseInt(document.getElementById('payrollUserId').value) || null,
|
|
};
|
|
|
|
fetch('{{ route("api.admin.hr.payrolls.calculate") }}', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
|
|
body: JSON.stringify(data),
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
const d = result.data;
|
|
const fields = {
|
|
'calcPension': d.pension, 'calcHealth': d.health_insurance,
|
|
'calcLongTermCare': d.long_term_care, 'calcEmployment': d.employment_insurance,
|
|
'calcIncomeTax': d.income_tax, 'calcResidentTax': d.resident_tax,
|
|
};
|
|
Object.entries(fields).forEach(([id, val]) => {
|
|
const el = document.getElementById(id);
|
|
if (!el.dataset.manual) setMoneyValue(el, val);
|
|
});
|
|
document.getElementById('calcGross').textContent = numberFormat(d.gross_salary);
|
|
document.getElementById('calcTaxableBase').textContent = numberFormat(d.taxable_base);
|
|
if (d.family_count) {
|
|
const fcEl = document.getElementById('calcFamilyCount');
|
|
if (fcEl) fcEl.textContent = d.family_count + '명';
|
|
}
|
|
updateDeductionTotals();
|
|
}
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
function updateDeductionTotals() {
|
|
const ids = ['calcPension','calcHealth','calcLongTermCare','calcEmployment','calcIncomeTax','calcResidentTax'];
|
|
let statutory = 0;
|
|
ids.forEach(id => { statutory += parseMoneyValue(document.getElementById(id)); });
|
|
|
|
let extra = 0;
|
|
document.querySelectorAll('#deductionsContainer .deduction-amount').forEach(el => {
|
|
extra += parseMoneyValue(el);
|
|
});
|
|
|
|
const totalDeductions = statutory + extra;
|
|
const grossText = document.getElementById('calcGross').textContent;
|
|
const gross = parseFloat(grossText.replace(/,/g, '')) || 0;
|
|
const net = Math.max(0, gross - totalDeductions);
|
|
|
|
document.getElementById('calcTotalDeductions').textContent = numberFormat(totalDeductions);
|
|
document.getElementById('calcNet').textContent = numberFormat(net);
|
|
}
|
|
|
|
function numberFormat(n) {
|
|
return Number(n).toLocaleString('ko-KR');
|
|
}
|
|
|
|
// ===== 금액 입력 포맷팅 =====
|
|
function parseMoneyValue(el) {
|
|
if (typeof el === 'string') return parseFloat(el.replace(/,/g, '')) || 0;
|
|
return parseFloat((el.value || '').replace(/,/g, '')) || 0;
|
|
}
|
|
|
|
function formatMoneyInput(el) {
|
|
const pos = el.selectionStart;
|
|
const oldLen = el.value.length;
|
|
const isNeg = el.value.indexOf('-') === 0;
|
|
const raw = el.value.replace(/[^0-9]/g, '');
|
|
const num = parseInt(raw, 10);
|
|
if (isNaN(num)) { el.value = isNeg ? '-' : ''; return; }
|
|
el.value = (isNeg ? '-' : '') + num.toLocaleString('ko-KR');
|
|
const newLen = el.value.length;
|
|
const newPos = Math.max(0, pos + (newLen - oldLen));
|
|
el.setSelectionRange(newPos, newPos);
|
|
}
|
|
|
|
function moneyFocus(el) {
|
|
if (parseMoneyValue(el) === 0) el.value = '';
|
|
}
|
|
|
|
function moneyBlur(el) {
|
|
if (el.value.trim() === '') el.value = '0';
|
|
}
|
|
|
|
function setMoneyValue(el, val) {
|
|
const num = parseInt(val, 10) || 0;
|
|
el.value = num === 0 ? '0' : Number(num).toLocaleString('ko-KR');
|
|
}
|
|
|
|
// ===== 급여 저장 =====
|
|
function submitPayroll() {
|
|
const allowances = [];
|
|
document.querySelectorAll('#allowancesContainer > div').forEach(row => {
|
|
const name = row.querySelector('.allowance-name').value;
|
|
const amount = parseMoneyValue(row.querySelector('.allowance-amount'));
|
|
if (name && amount > 0) allowances.push({name, amount});
|
|
});
|
|
|
|
const deductions = [];
|
|
document.querySelectorAll('#deductionsContainer > div').forEach(row => {
|
|
const name = row.querySelector('.deduction-name').value;
|
|
const amount = parseMoneyValue(row.querySelector('.deduction-amount'));
|
|
if (name && amount !== 0) deductions.push({name, amount});
|
|
});
|
|
|
|
// 수동 수정된 공제 항목 override
|
|
const overrides = {};
|
|
const overrideMap = {
|
|
'calcPension': 'pension', 'calcHealth': 'health_insurance',
|
|
'calcLongTermCare': 'long_term_care', 'calcEmployment': 'employment_insurance',
|
|
'calcIncomeTax': 'income_tax', 'calcResidentTax': 'resident_tax',
|
|
};
|
|
Object.entries(overrideMap).forEach(([elId, field]) => {
|
|
const el = document.getElementById(elId);
|
|
if (el.dataset.manual) overrides[field] = parseMoneyValue(el);
|
|
});
|
|
|
|
const data = {
|
|
user_id: parseInt(document.getElementById('payrollUserId').value),
|
|
pay_year: parseInt(document.getElementById('payrollPayYear').value),
|
|
pay_month: parseInt(document.getElementById('payrollPayMonth').value),
|
|
base_salary: parseMoneyValue(document.getElementById('payrollBaseSalary')),
|
|
overtime_pay: parseMoneyValue(document.getElementById('payrollOvertimePay')),
|
|
bonus: parseMoneyValue(document.getElementById('payrollBonus')),
|
|
allowances: allowances.length > 0 ? allowances : null,
|
|
deductions: deductions.length > 0 ? deductions : null,
|
|
deduction_overrides: Object.keys(overrides).length > 0 ? overrides : null,
|
|
note: document.getElementById('payrollNote').value || null,
|
|
};
|
|
|
|
const isEdit = !!editingPayrollId;
|
|
const url = isEdit
|
|
? '{{ url("/api/admin/hr/payrolls") }}/' + editingPayrollId
|
|
: '{{ route("api.admin.hr.payrolls.store") }}';
|
|
|
|
fetch(url, {
|
|
method: isEdit ? 'PUT' : 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify(data),
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
closePayrollModal();
|
|
refreshTable();
|
|
refreshStats();
|
|
showToast(result.message, 'success');
|
|
} else {
|
|
showToast(result.message || '오류가 발생했습니다.', 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showToast('오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// ===== 급여 삭제 =====
|
|
function deletePayroll(id) {
|
|
if (!confirm('이 급여를 삭제하시겠습니까?')) return;
|
|
|
|
fetch('{{ url("/api/admin/hr/payrolls") }}/' + id, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
refreshTable();
|
|
refreshStats();
|
|
showToast(result.message, 'success');
|
|
} else {
|
|
showToast(result.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showToast('삭제 중 오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// ===== 급여 확정 =====
|
|
function confirmPayroll(id) {
|
|
if (!confirm('이 급여를 확정하시겠습니까? 확정 후에는 수정할 수 없습니다.')) return;
|
|
|
|
fetch('{{ url("/api/admin/hr/payrolls") }}/' + id + '/confirm', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
refreshTable();
|
|
refreshStats();
|
|
showToast(result.message, 'success');
|
|
} else {
|
|
showToast(result.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showToast('확정 중 오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// ===== 급여 확정 취소 =====
|
|
function unconfirmPayroll(id) {
|
|
if (!confirm('이 급여의 확정을 취소하시겠습니까? 작성중 상태로 되돌아갑니다.')) return;
|
|
|
|
fetch('{{ url("/api/admin/hr/payrolls") }}/' + id + '/unconfirm', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
refreshTable();
|
|
refreshStats();
|
|
showToast(result.message, 'success');
|
|
} else {
|
|
showToast(result.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showToast('확정 취소 중 오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// ===== 급여 지급 =====
|
|
function payPayroll(id) {
|
|
if (!confirm('이 급여를 지급 처리하시겠습니까?')) return;
|
|
|
|
fetch('{{ url("/api/admin/hr/payrolls") }}/' + id + '/pay', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
refreshTable();
|
|
refreshStats();
|
|
showToast(result.message, 'success');
|
|
} else {
|
|
showToast(result.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showToast('지급 처리 중 오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// ===== 일괄 생성 =====
|
|
function bulkGeneratePayrolls() {
|
|
const year = document.getElementById('payrollYear').value;
|
|
const month = document.getElementById('payrollMonth').value;
|
|
|
|
if (!confirm(`${year}년 ${month}월 재직 사원 전체의 급여를 일괄 생성하시겠습니까?`)) return;
|
|
|
|
fetch('{{ route("api.admin.hr.payrolls.bulk-generate") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify({ year: parseInt(year), month: parseInt(month) }),
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
refreshTable();
|
|
refreshStats();
|
|
showToast(result.message, 'success');
|
|
} else {
|
|
showToast(result.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showToast('일괄 생성 중 오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// ===== 전월 복사 =====
|
|
function copyFromPreviousMonth() {
|
|
const year = document.getElementById('payrollYear').value;
|
|
const month = document.getElementById('payrollMonth').value;
|
|
|
|
if (!confirm(`${year}년 ${month}월 급여를 전월 데이터로 복사 등록하시겠습니까?`)) return;
|
|
|
|
fetch('{{ route("api.admin.hr.payrolls.copy-from-previous") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify({ pay_year: parseInt(year), pay_month: parseInt(month) }),
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
showToast(result.message, 'success');
|
|
refreshTable();
|
|
refreshStats();
|
|
} else {
|
|
showToast(result.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showToast('전월 복사 중 오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// ===== 급여 상세 모달 =====
|
|
function openPayrollDetail(id, data) {
|
|
let html = '<div class="space-y-4">';
|
|
html += `<div class="flex items-center gap-3 mb-2">
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-medium">${data.user_name.charAt(0)}</div>
|
|
<div>
|
|
<div class="font-medium text-gray-900">${data.user_name}</div>
|
|
<div class="text-sm text-gray-500">${data.department} / ${data.period}</div>
|
|
</div>
|
|
</div>`;
|
|
|
|
html += '<div class="border rounded-lg overflow-hidden"><table class="w-full text-sm">';
|
|
html += '<tr class="bg-blue-50"><th class="px-4 py-2 text-left text-blue-800 font-medium" colspan="2">지급 항목</th></tr>';
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">기본급</td><td class="px-4 py-2 text-right">${numberFormat(data.base_salary)}</td></tr>`;
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">고정연장근로수당</td><td class="px-4 py-2 text-right">${numberFormat(data.overtime_pay)}</td></tr>`;
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">식대(비과세)</td><td class="px-4 py-2 text-right">${numberFormat(data.bonus)}</td></tr>`;
|
|
|
|
if (data.allowances && data.allowances.length > 0) {
|
|
data.allowances.forEach(a => {
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">${a.name}</td><td class="px-4 py-2 text-right">${numberFormat(a.amount)}</td></tr>`;
|
|
});
|
|
}
|
|
|
|
html += `<tr class="border-t bg-blue-50"><td class="px-4 py-2 font-medium text-blue-800">총 지급액</td><td class="px-4 py-2 text-right font-bold text-blue-700">${numberFormat(data.gross_salary)}</td></tr>`;
|
|
|
|
html += '<tr class="bg-red-50"><th class="px-4 py-2 text-left text-red-800 font-medium" colspan="2">공제 항목</th></tr>';
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">국민연금</td><td class="px-4 py-2 text-right">${numberFormat(data.pension)}</td></tr>`;
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">건강보험</td><td class="px-4 py-2 text-right">${numberFormat(data.health_insurance)}</td></tr>`;
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">장기요양보험</td><td class="px-4 py-2 text-right">${numberFormat(data.long_term_care)}</td></tr>`;
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">고용보험</td><td class="px-4 py-2 text-right">${numberFormat(data.employment_insurance)}</td></tr>`;
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">근로소득세</td><td class="px-4 py-2 text-right">${numberFormat(data.income_tax)}</td></tr>`;
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">지방소득세</td><td class="px-4 py-2 text-right">${numberFormat(data.resident_tax)}</td></tr>`;
|
|
|
|
if (data.deductions && data.deductions.length > 0) {
|
|
data.deductions.forEach(d => {
|
|
html += `<tr class="border-t"><td class="px-4 py-2 text-gray-500">${d.name}</td><td class="px-4 py-2 text-right">${numberFormat(d.amount)}</td></tr>`;
|
|
});
|
|
}
|
|
|
|
html += `<tr class="border-t bg-red-50"><td class="px-4 py-2 font-medium text-red-800">총 공제액</td><td class="px-4 py-2 text-right font-bold text-red-700">${numberFormat(data.total_deductions)}</td></tr>`;
|
|
html += `<tr class="bg-emerald-50"><td class="px-4 py-2 font-bold text-emerald-800">실수령액</td><td class="px-4 py-2 text-right font-bold text-lg text-emerald-700">${numberFormat(data.net_salary)}</td></tr>`;
|
|
html += '</table></div>';
|
|
|
|
if (data.confirmed_at) html += `<div class="text-xs text-gray-400">확정일: ${data.confirmed_at}</div>`;
|
|
if (data.paid_at) html += `<div class="text-xs text-gray-400">지급일: ${data.paid_at}</div>`;
|
|
if (data.note) html += `<div class="text-sm text-gray-500 mt-2 p-2 bg-gray-50 rounded">${data.note}</div>`;
|
|
|
|
html += '</div>';
|
|
|
|
document.getElementById('payrollDetailContent').innerHTML = html;
|
|
document.getElementById('payrollDetailModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closePayrollDetailModal() {
|
|
document.getElementById('payrollDetailModal').classList.add('hidden');
|
|
}
|
|
|
|
// ===== 급여 설정 저장 =====
|
|
function savePayrollSettings() {
|
|
const form = document.getElementById('payrollSettingsForm');
|
|
const formData = new FormData(form);
|
|
const data = {};
|
|
const moneyFields = new Set();
|
|
form.querySelectorAll('.money-input').forEach(el => moneyFields.add(el.name));
|
|
for (const [key, value] of formData.entries()) {
|
|
data[key] = moneyFields.has(key) ? parseFloat(value.replace(/,/g, '')) || 0 : value;
|
|
}
|
|
data.auto_calculate = form.querySelector('[name="auto_calculate"]').checked;
|
|
|
|
fetch('{{ route("api.admin.hr.payroll-settings.update") }}', {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify(data),
|
|
})
|
|
.then(r => r.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
showToast(result.message, 'success');
|
|
} else {
|
|
showToast(result.message || '설정 저장 실패', 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showToast('설정 저장 중 오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// ===== 토스트 메시지 =====
|
|
function showToast(message, type) {
|
|
if (typeof window.showToastMessage === 'function') {
|
|
window.showToastMessage(message, type);
|
|
return;
|
|
}
|
|
const color = type === 'success' ? 'bg-emerald-600' : 'bg-red-600';
|
|
const toast = document.createElement('div');
|
|
toast.className = `fixed top-4 right-4 z-[60] ${color} text-white px-4 py-3 rounded-lg shadow-lg text-sm transition-opacity duration-300`;
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 300); }, 3000);
|
|
}
|
|
</script>
|
|
@endpush
|