e58b3438e9
- 24개 Blade 파일의 수동 SVG 생성 코드를 lucide.createElement(_def)로 통일 - 불필요한 quote-stripping regex(/^"|"$/g) 제거 - Lucide 공식 API 사용으로 SVG viewBox/path 속성 에러 해결
418 lines
27 KiB
PHP
418 lines
27 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '환불/해지 관리')
|
|
|
|
@push('styles')
|
|
<style>
|
|
@media print { .no-print { display: none !important; } }
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<div id="refunds-root"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
@include('partials.react-cdn')
|
|
<script src="https://unpkg.com/lucide@0.469.0?v={{ time() }}"></script>
|
|
@verbatim
|
|
<script type="text/babel">
|
|
const { useState, useRef, useEffect } = React;
|
|
|
|
const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
|
|
const ref = useRef(null);
|
|
useEffect(() => {
|
|
const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
|
|
if (ref.current && _def) {
|
|
ref.current.innerHTML = '';
|
|
const svg = lucide.createElement(_def);
|
|
svg.setAttribute('class', className);
|
|
ref.current.appendChild(svg);
|
|
}
|
|
}, [className]);
|
|
return <span ref={ref} className="inline-flex items-center" {...props} />;
|
|
};
|
|
|
|
const RotateCcw = createIcon('rotate-ccw');
|
|
const Plus = createIcon('plus');
|
|
const Search = createIcon('search');
|
|
const Download = createIcon('download');
|
|
const X = createIcon('x');
|
|
const Edit = createIcon('edit');
|
|
const Trash2 = createIcon('trash-2');
|
|
const CheckCircle = createIcon('check-circle');
|
|
const Clock = createIcon('clock');
|
|
const XCircle = createIcon('x-circle');
|
|
const RefreshCw = createIcon('refresh-cw');
|
|
const PlayCircle = createIcon('play-circle');
|
|
|
|
function RefundsManagement() {
|
|
const [refunds, setRefunds] = useState([]);
|
|
const [stats, setStats] = useState({ pending: 0, completed: 0, rejected: 0, totalRefunded: 0 });
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [filterStatus, setFilterStatus] = useState('all');
|
|
const [filterType, setFilterType] = useState('all');
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [modalMode, setModalMode] = useState('add');
|
|
const [editingItem, setEditingItem] = useState(null);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const [showProcessModal, setShowProcessModal] = useState(false);
|
|
const [processingItem, setProcessingItem] = useState(null);
|
|
const [processAction, setProcessAction] = useState('approved');
|
|
const [processRefundAmount, setProcessRefundAmount] = useState('');
|
|
const [processNote, setProcessNote] = useState('');
|
|
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
|
|
|
const types = ['refund', 'cancel'];
|
|
const reasons = ['서비스 불만족', '결제 오류', '사업 종료', '경쟁사 이전', '중복 결제', '기타'];
|
|
|
|
const initialFormState = {
|
|
type: 'refund',
|
|
customerName: '',
|
|
requestDate: new Date().toISOString().split('T')[0],
|
|
productName: '',
|
|
originalAmount: '',
|
|
refundAmount: 0,
|
|
reason: '서비스 불만족',
|
|
status: 'pending',
|
|
processDate: '',
|
|
note: ''
|
|
};
|
|
const [formData, setFormData] = useState(initialFormState);
|
|
|
|
const formatCurrency = (num) => num ? num.toLocaleString() : '0';
|
|
const formatInputCurrency = (value) => {
|
|
if (!value && value !== 0) return '';
|
|
const num = String(value).replace(/[^\d]/g, '');
|
|
return num ? Number(num).toLocaleString() : '';
|
|
};
|
|
const parseInputCurrency = (value) => String(value).replace(/[^\d]/g, '');
|
|
|
|
const fetchRefunds = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch('/finance/refunds/list');
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
setRefunds(data.data);
|
|
setStats(data.stats);
|
|
}
|
|
} catch (err) {
|
|
console.error('환불/해지 조회 실패:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { fetchRefunds(); }, []);
|
|
|
|
const filteredRefunds = refunds.filter(item => {
|
|
const matchesSearch = (item.customerName || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
(item.productName || '').toLowerCase().includes(searchTerm.toLowerCase());
|
|
const matchesStatus = filterStatus === 'all' || item.status === filterStatus;
|
|
const matchesType = filterType === 'all' || item.type === filterType;
|
|
return matchesSearch && matchesStatus && matchesType;
|
|
});
|
|
|
|
const handleAdd = () => { setModalMode('add'); setFormData(initialFormState); setShowModal(true); };
|
|
const handleEdit = (item) => {
|
|
setModalMode('edit');
|
|
setEditingItem(item);
|
|
const safeItem = {};
|
|
Object.keys(initialFormState).forEach(key => { safeItem[key] = item[key] ?? ''; });
|
|
setFormData(safeItem);
|
|
setShowModal(true);
|
|
};
|
|
const handleSave = async () => {
|
|
if (!formData.customerName || !formData.productName || !formData.originalAmount) { alert('필수 항목을 입력해주세요.'); return; }
|
|
setSaving(true);
|
|
try {
|
|
const url = modalMode === 'add' ? '/finance/refunds/store' : `/finance/refunds/${editingItem.id}`;
|
|
const body = { ...formData, originalAmount: parseInt(formData.originalAmount) || 0, refundAmount: parseInt(formData.refundAmount) || 0 };
|
|
const res = await fetch(url, {
|
|
method: modalMode === 'add' ? 'POST' : 'PUT',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
|
|
body: JSON.stringify(body),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
const errors = data.errors ? Object.values(data.errors).flat().join('\n') : data.message;
|
|
alert(errors || '저장에 실패했습니다.');
|
|
return;
|
|
}
|
|
setShowModal(false);
|
|
setEditingItem(null);
|
|
fetchRefunds();
|
|
} catch (err) {
|
|
console.error('저장 실패:', err);
|
|
alert('저장에 실패했습니다.');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
const handleDelete = async (id) => {
|
|
if (!confirm('정말 삭제하시겠습니까?')) return;
|
|
try {
|
|
const res = await fetch(`/finance/refunds/${id}`, {
|
|
method: 'DELETE',
|
|
headers: { 'X-CSRF-TOKEN': csrfToken },
|
|
});
|
|
if (res.ok) {
|
|
setShowModal(false);
|
|
fetchRefunds();
|
|
}
|
|
} catch (err) {
|
|
console.error('삭제 실패:', err);
|
|
alert('삭제에 실패했습니다.');
|
|
}
|
|
};
|
|
|
|
const handleProcess = (item) => {
|
|
setProcessingItem(item);
|
|
setProcessAction('approved');
|
|
setProcessRefundAmount(item.originalAmount.toString());
|
|
setProcessNote('');
|
|
setShowProcessModal(true);
|
|
};
|
|
|
|
const executeProcess = async () => {
|
|
const refundAmt = parseInt(parseInputCurrency(processRefundAmount)) || 0;
|
|
try {
|
|
const res = await fetch(`/finance/refunds/${processingItem.id}/process`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
|
|
body: JSON.stringify({
|
|
action: processAction,
|
|
refundAmount: processAction === 'rejected' ? 0 : refundAmt,
|
|
note: processNote,
|
|
}),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
alert(data.message || '처리에 실패했습니다.');
|
|
return;
|
|
}
|
|
setShowProcessModal(false);
|
|
setProcessingItem(null);
|
|
fetchRefunds();
|
|
} catch (err) {
|
|
console.error('처리 실패:', err);
|
|
alert('처리에 실패했습니다.');
|
|
}
|
|
};
|
|
|
|
const handleDownload = () => {
|
|
const rows = [['환불/해지 관리'], [], ['유형', '고객명', '요청일', '상품/서비스', '결제금액', '환불금액', '사유', '상태', '처리일'],
|
|
...filteredRefunds.map(item => [getTypeLabel(item.type), item.customerName, item.requestDate, item.productName, item.originalAmount, item.refundAmount, item.reason, getStatusLabel(item.status), item.processDate])];
|
|
const csvContent = rows.map(row => row.join(',')).join('\n');
|
|
const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
|
const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `환불해지관리_${new Date().toISOString().split('T')[0]}.csv`; link.click();
|
|
};
|
|
|
|
const getTypeLabel = (type) => {
|
|
const labels = { 'refund': '환불', 'cancel': '해지' };
|
|
return labels[type] || type;
|
|
};
|
|
|
|
const getStatusLabel = (status) => {
|
|
const labels = { 'pending': '대기', 'approved': '승인', 'completed': '완료', 'rejected': '거절' };
|
|
return labels[status] || status;
|
|
};
|
|
|
|
const getStatusStyle = (status) => {
|
|
const styles = {
|
|
'pending': 'bg-amber-100 text-amber-700',
|
|
'approved': 'bg-blue-100 text-blue-700',
|
|
'completed': 'bg-emerald-100 text-emerald-700',
|
|
'rejected': 'bg-red-100 text-red-700'
|
|
};
|
|
return styles[status] || 'bg-gray-100 text-gray-700';
|
|
};
|
|
|
|
const getTypeStyle = (type) => {
|
|
const styles = {
|
|
'refund': 'bg-pink-100 text-pink-700',
|
|
'cancel': 'bg-indigo-100 text-indigo-700'
|
|
};
|
|
return styles[type] || 'bg-gray-100 text-gray-700';
|
|
};
|
|
|
|
return (
|
|
<div className="bg-gray-50 min-h-screen">
|
|
<header className="bg-white border-b border-gray-200 rounded-t-xl mb-6">
|
|
<div className="px-6 py-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-2 bg-pink-100 rounded-xl"><RotateCcw className="w-6 h-6 text-pink-600" /></div>
|
|
<div><h1 className="text-xl font-bold text-gray-900">환불/해지 관리</h1><p className="text-sm text-gray-500">Refunds & Cancellations</p></div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button onClick={handleDownload} className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"><Download className="w-4 h-4" /><span className="text-sm">Excel</span></button>
|
|
<button onClick={handleAdd} className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg"><Plus className="w-4 h-4" /><span className="text-sm font-medium">요청 등록</span></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<div className="bg-white rounded-xl border border-amber-200 p-6 bg-amber-50/30">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-amber-700">처리 대기</span><Clock className="w-5 h-5 text-amber-500" /></div>
|
|
<p className="text-2xl font-bold text-amber-600">{stats.pending}건</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-emerald-200 p-6 bg-emerald-50/30">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-emerald-700">처리 완료</span><CheckCircle className="w-5 h-5 text-emerald-500" /></div>
|
|
<p className="text-2xl font-bold text-emerald-600">{stats.completed}건</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-red-200 p-6 bg-red-50/30">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-red-700">거절</span><XCircle className="w-5 h-5 text-red-500" /></div>
|
|
<p className="text-2xl font-bold text-red-600">{stats.rejected}건</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-gray-500">환불 총액</span><RotateCcw className="w-5 h-5 text-gray-400" /></div>
|
|
<p className="text-2xl font-bold text-gray-900">{formatCurrency(stats.totalRefunded)}원</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 p-4 mb-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
|
<div className="md:col-span-2 relative">
|
|
<Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
|
|
<input type="text" placeholder="고객명, 상품명 검색..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500" />
|
|
</div>
|
|
<select value={filterType} onChange={(e) => setFilterType(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg">
|
|
<option value="all">전체 유형</option>
|
|
<option value="refund">환불</option>
|
|
<option value="cancel">해지</option>
|
|
</select>
|
|
<div className="flex gap-1">
|
|
{['all', 'pending', 'approved', 'completed', 'rejected'].map(status => (
|
|
<button key={status} onClick={() => setFilterStatus(status)} className={`flex-1 px-2 py-2 rounded-lg text-xs font-medium ${filterStatus === status ? (status === 'completed' ? 'bg-green-600 text-white' : status === 'rejected' ? 'bg-red-600 text-white' : status === 'approved' ? 'bg-blue-600 text-white' : status === 'pending' ? 'bg-yellow-500 text-white' : 'bg-gray-800 text-white') : 'bg-gray-100 text-gray-700'}`}>
|
|
{status === 'all' ? '전체' : getStatusLabel(status)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button onClick={() => { setSearchTerm(''); setFilterStatus('all'); setFilterType('all'); }} className="flex items-center justify-center gap-2 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">
|
|
<RefreshCw className="w-4 h-4" /><span className="text-sm">초기화</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50 border-b border-gray-200">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">유형</th>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">고객명</th>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">상품/서비스</th>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">요청일</th>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">사유</th>
|
|
<th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">결제금액</th>
|
|
<th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">환불금액</th>
|
|
<th className="px-6 py-3 text-center text-xs font-semibold text-gray-600">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100">
|
|
{loading ? (
|
|
<tr><td colSpan="8" className="px-6 py-12 text-center text-gray-400"><div className="flex items-center justify-center gap-2"><svg className="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>데이터를 불러오는 중...</div></td></tr>
|
|
) : filteredRefunds.length === 0 ? (
|
|
<tr><td colSpan="8" className="px-6 py-12 text-center text-gray-400">데이터가 없습니다.</td></tr>
|
|
) : filteredRefunds.map(item => (
|
|
<tr key={item.id} onClick={() => handleEdit(item)} className="hover:bg-gray-50 cursor-pointer">
|
|
<td className="px-6 py-4"><span className={`px-2 py-1 rounded text-xs font-medium ${getTypeStyle(item.type)}`}>{getTypeLabel(item.type)}</span></td>
|
|
<td className="px-6 py-4 text-sm font-medium text-gray-900">{item.customerName}</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600">{item.productName}</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600">{item.requestDate}</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600">{item.reason}</td>
|
|
<td className="px-6 py-4 text-sm font-medium text-right text-gray-900">{formatCurrency(item.originalAmount)}원</td>
|
|
<td className="px-6 py-4 text-sm font-bold text-right text-pink-600">{item.refundAmount ? formatCurrency(item.refundAmount) + '원' : '-'}</td>
|
|
<td className="px-6 py-4 text-center"><span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusStyle(item.status)}`}>{getStatusLabel(item.status)}</span></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{showModal && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl p-6 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">{modalMode === 'add' ? '환불/해지 요청 등록' : '환불/해지 수정'}</h3>
|
|
<button onClick={() => setShowModal(false)} className="p-1 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-500" /></button>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">유형 *</label><select value={formData.type} onChange={(e) => setFormData(prev => ({ ...prev, type: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg"><option value="refund">환불</option><option value="cancel">해지</option></select></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">고객명 *</label><input type="text" value={formData.customerName} onChange={(e) => setFormData(prev => ({ ...prev, customerName: e.target.value }))} placeholder="고객명" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">상품/서비스 *</label><input type="text" value={formData.productName} onChange={(e) => setFormData(prev => ({ ...prev, productName: e.target.value }))} placeholder="상품/서비스명" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">요청일</label><input type="date" value={formData.requestDate} onChange={(e) => setFormData(prev => ({ ...prev, requestDate: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">결제금액 *</label><input type="text" value={formatInputCurrency(formData.originalAmount)} onChange={(e) => setFormData(prev => ({ ...prev, originalAmount: parseInputCurrency(e.target.value) }))} placeholder="0" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">사유</label><select value={formData.reason} onChange={(e) => setFormData(prev => ({ ...prev, reason: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">{reasons.map(r => <option key={r} value={r}>{r}</option>)}</select></div>
|
|
</div>
|
|
{modalMode === 'edit' && (
|
|
<>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">환불금액</label><input type="text" value={formatInputCurrency(formData.refundAmount)} onChange={(e) => setFormData(prev => ({ ...prev, refundAmount: parseInputCurrency(e.target.value) }))} placeholder="0" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">상태</label><select value={formData.status} onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg"><option value="pending">대기</option><option value="approved">승인</option><option value="completed">완료</option><option value="rejected">거절</option></select></div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">메모 {formData.status === 'rejected' && <span className="text-red-500">(거절 사유)</span>}</label>
|
|
<textarea value={formData.note} onChange={(e) => setFormData(prev => ({ ...prev, note: e.target.value }))} placeholder={formData.status === 'rejected' ? '거절 사유를 입력하세요' : '처리 관련 메모'} rows="2" className="w-full px-3 py-2 border border-gray-300 rounded-lg" />
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-3 mt-6">
|
|
{modalMode === 'edit' && <button onClick={() => handleDelete(editingItem.id)} className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg">삭제</button>}
|
|
<button onClick={() => setShowModal(false)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">취소</button>
|
|
<button onClick={handleSave} disabled={saving} className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">{saving ? '저장 중...' : (modalMode === 'add' ? '등록' : '저장')}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showProcessModal && processingItem && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">환불/해지 처리</h3>
|
|
<button onClick={() => setShowProcessModal(false)} className="p-1 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-500" /></button>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
|
<p className="font-medium text-gray-900">{processingItem.customerName} - {processingItem.productName}</p>
|
|
<p className="text-sm text-gray-500">{getTypeLabel(processingItem.type)} 요청 ({processingItem.requestDate})</p>
|
|
<div className="mt-3 text-sm">
|
|
<span>결제금액: {formatCurrency(processingItem.originalAmount)}원</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">처리 결정</label><select value={processAction} onChange={(e) => setProcessAction(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg"><option value="approved">승인</option><option value="completed">처리완료</option><option value="rejected">거절</option></select></div>
|
|
{processAction !== 'rejected' && (
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">환불금액</label><input type="text" value={formatInputCurrency(processRefundAmount)} onChange={(e) => setProcessRefundAmount(parseInputCurrency(e.target.value))} placeholder="0" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right" /></div>
|
|
)}
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">처리 메모</label><textarea value={processNote} onChange={(e) => setProcessNote(e.target.value)} rows="2" className="w-full px-3 py-2 border border-gray-300 rounded-lg"></textarea></div>
|
|
</div>
|
|
<div className="flex gap-3 mt-6">
|
|
<button onClick={() => setShowProcessModal(false)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">취소</button>
|
|
<button onClick={executeProcess} className={`flex-1 px-4 py-2 text-white rounded-lg ${processAction === 'rejected' ? 'bg-red-600 hover:bg-red-700' : 'bg-emerald-600 hover:bg-emerald-700'}`}>{processAction === 'rejected' ? '거절' : '처리'}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const rootElement = document.getElementById('refunds-root');
|
|
if (rootElement) { ReactDOM.createRoot(rootElement).render(<RefundsManagement />); }
|
|
</script>
|
|
@endverbatim
|
|
@endpush
|