363 lines
25 KiB
PHP
363 lines
25 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '부가세 관리')
|
|
|
|
@push('styles')
|
|
<style>
|
|
@media print { .no-print { display: none !important; } }
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div id="vat-root"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
|
|
<script src="https://unpkg.com/lucide@latest?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(() => {
|
|
if (ref.current && lucide.icons[name]) {
|
|
ref.current.innerHTML = '';
|
|
const svg = lucide.createElement(lucide.icons[name]);
|
|
svg.setAttribute('class', className);
|
|
ref.current.appendChild(svg);
|
|
}
|
|
}, [className]);
|
|
return <span ref={ref} className="inline-flex items-center" {...props} />;
|
|
};
|
|
|
|
const Calculator = createIcon('calculator');
|
|
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 FileText = createIcon('file-text');
|
|
const TrendingUp = createIcon('trending-up');
|
|
const TrendingDown = createIcon('trending-down');
|
|
const RefreshCw = createIcon('refresh-cw');
|
|
|
|
function VatManagement() {
|
|
const [vatRecords, setVatRecords] = useState([
|
|
{ id: 1, period: '2025-2H', type: 'sales', partnerName: '(주)한국테크', invoiceNo: 'TAX-2025-1234', invoiceDate: '2025-12-15', supplyAmount: 10000000, vatAmount: 1000000, totalAmount: 11000000, status: 'filed' },
|
|
{ id: 2, period: '2025-2H', type: 'sales', partnerName: '글로벌솔루션', invoiceNo: 'TAX-2025-1235', invoiceDate: '2025-12-20', supplyAmount: 8500000, vatAmount: 850000, totalAmount: 9350000, status: 'filed' },
|
|
{ id: 3, period: '2025-2H', type: 'purchase', partnerName: 'IT솔루션즈', invoiceNo: 'TAX-2025-5001', invoiceDate: '2025-12-10', supplyAmount: 5000000, vatAmount: 500000, totalAmount: 5500000, status: 'filed' },
|
|
{ id: 4, period: '2026-1H', type: 'sales', partnerName: '스마트시스템', invoiceNo: 'TAX-2026-0001', invoiceDate: '2026-01-05', supplyAmount: 15000000, vatAmount: 1500000, totalAmount: 16500000, status: 'pending' },
|
|
{ id: 5, period: '2026-1H', type: 'purchase', partnerName: '클라우드서비스', invoiceNo: 'TAX-2026-0501', invoiceDate: '2026-01-10', supplyAmount: 3000000, vatAmount: 300000, totalAmount: 3300000, status: 'pending' },
|
|
{ id: 6, period: '2026-1H', type: 'sales', partnerName: '디지털웍스', invoiceNo: 'TAX-2026-0002', invoiceDate: '2026-01-15', supplyAmount: 7800000, vatAmount: 780000, totalAmount: 8580000, status: 'pending' },
|
|
]);
|
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [filterPeriod, setFilterPeriod] = useState('2026-1H');
|
|
const [filterType, setFilterType] = useState('all');
|
|
const [filterStatus, setFilterStatus] = useState('all');
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [modalMode, setModalMode] = useState('add');
|
|
const [editingItem, setEditingItem] = useState(null);
|
|
|
|
const periods = ['2026-1H', '2025-2H', '2025-1H', '2024-2H'];
|
|
|
|
const initialFormState = {
|
|
period: '2026-1H',
|
|
type: 'sales',
|
|
partnerName: '',
|
|
invoiceNo: '',
|
|
invoiceDate: new Date().toISOString().split('T')[0],
|
|
supplyAmount: '',
|
|
vatAmount: '',
|
|
totalAmount: '',
|
|
status: 'pending'
|
|
};
|
|
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 handleSupplyAmountChange = (value) => {
|
|
const supply = parseInt(parseInputCurrency(value)) || 0;
|
|
const vat = Math.floor(supply * 0.1);
|
|
const total = supply + vat;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
supplyAmount: value,
|
|
vatAmount: vat.toString(),
|
|
totalAmount: total.toString()
|
|
}));
|
|
};
|
|
|
|
const filteredRecords = vatRecords.filter(item => {
|
|
const matchesSearch = item.partnerName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
item.invoiceNo.toLowerCase().includes(searchTerm.toLowerCase());
|
|
const matchesPeriod = item.period === filterPeriod;
|
|
const matchesType = filterType === 'all' || item.type === filterType;
|
|
const matchesStatus = filterStatus === 'all' || item.status === filterStatus;
|
|
return matchesSearch && matchesPeriod && matchesType && matchesStatus;
|
|
});
|
|
|
|
// 기간별 요약 계산
|
|
const periodRecords = vatRecords.filter(r => r.period === filterPeriod);
|
|
const salesVat = periodRecords.filter(r => r.type === 'sales').reduce((sum, r) => sum + r.vatAmount, 0);
|
|
const purchaseVat = periodRecords.filter(r => r.type === 'purchase').reduce((sum, r) => sum + r.vatAmount, 0);
|
|
const salesSupply = periodRecords.filter(r => r.type === 'sales').reduce((sum, r) => sum + r.supplyAmount, 0);
|
|
const purchaseSupply = periodRecords.filter(r => r.type === 'purchase').reduce((sum, r) => sum + r.supplyAmount, 0);
|
|
const netVat = salesVat - purchaseVat;
|
|
|
|
const handleAdd = () => { setModalMode('add'); setFormData(initialFormState); setShowModal(true); };
|
|
const handleEdit = (item) => { setModalMode('edit'); setEditingItem(item); setFormData({ ...item, supplyAmount: item.supplyAmount.toString(), vatAmount: item.vatAmount.toString(), totalAmount: item.totalAmount.toString() }); setShowModal(true); };
|
|
const handleSave = () => {
|
|
if (!formData.partnerName || !formData.invoiceNo || !formData.supplyAmount) { alert('필수 항목을 입력해주세요.'); return; }
|
|
const newItem = {
|
|
...formData,
|
|
supplyAmount: parseInt(parseInputCurrency(formData.supplyAmount)) || 0,
|
|
vatAmount: parseInt(parseInputCurrency(formData.vatAmount)) || 0,
|
|
totalAmount: parseInt(parseInputCurrency(formData.totalAmount)) || 0
|
|
};
|
|
if (modalMode === 'add') {
|
|
setVatRecords(prev => [{ id: Date.now(), ...newItem }, ...prev]);
|
|
} else {
|
|
setVatRecords(prev => prev.map(item => item.id === editingItem.id ? { ...item, ...newItem } : item));
|
|
}
|
|
setShowModal(false); setEditingItem(null);
|
|
};
|
|
const handleDelete = (id) => { if (confirm('정말 삭제하시겠습니까?')) { setVatRecords(prev => prev.filter(item => item.id !== id)); setShowModal(false); } };
|
|
|
|
const handleDownload = () => {
|
|
const rows = [['부가세 관리', getPeriodLabel(filterPeriod)], [], ['구분', '거래처', '세금계산서번호', '발행일', '공급가액', '부가세', '합계', '상태'],
|
|
...filteredRecords.map(item => [getTypeLabel(item.type), item.partnerName, item.invoiceNo, item.invoiceDate, item.supplyAmount, item.vatAmount, item.totalAmount, getStatusLabel(item.status)])];
|
|
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 = `부가세관리_${filterPeriod}.csv`; link.click();
|
|
};
|
|
|
|
const getTypeLabel = (type) => {
|
|
const labels = { 'sales': '매출', 'purchase': '매입' };
|
|
return labels[type] || type;
|
|
};
|
|
|
|
const getStatusLabel = (status) => {
|
|
const labels = { 'pending': '미신고', 'filed': '신고완료', 'paid': '납부완료' };
|
|
return labels[status] || status;
|
|
};
|
|
|
|
const getStatusStyle = (status) => {
|
|
const styles = {
|
|
'pending': 'bg-amber-100 text-amber-700',
|
|
'filed': 'bg-blue-100 text-blue-700',
|
|
'paid': 'bg-emerald-100 text-emerald-700'
|
|
};
|
|
return styles[status] || 'bg-gray-100 text-gray-700';
|
|
};
|
|
|
|
const getTypeStyle = (type) => {
|
|
const styles = {
|
|
'sales': 'bg-emerald-100 text-emerald-700',
|
|
'purchase': 'bg-pink-100 text-pink-700'
|
|
};
|
|
return styles[type] || 'bg-gray-100 text-gray-700';
|
|
};
|
|
|
|
const getPeriodLabel = (period) => {
|
|
const [year, half] = period.split('-');
|
|
return `${year}년 ${half === '1H' ? '1기' : '2기'}`;
|
|
};
|
|
|
|
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-indigo-100 rounded-xl"><Calculator className="w-6 h-6 text-indigo-600" /></div>
|
|
<div><h1 className="text-xl font-bold text-gray-900">부가세 관리</h1><p className="text-sm text-gray-500">VAT Management</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="bg-white rounded-xl border border-gray-200 p-6 mb-6">
|
|
<div className="flex flex-wrap items-center gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">신고기간</label>
|
|
<select value={filterPeriod} onChange={(e) => setFilterPeriod(e.target.value)} className="px-4 py-2 pr-10 border border-gray-300 rounded-lg text-lg font-medium min-w-[200px]">
|
|
{periods.map(p => <option key={p} value={p}>{getPeriodLabel(p)}</option>)}
|
|
</select>
|
|
</div>
|
|
<div className="flex-1 grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="bg-emerald-50 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-1"><TrendingUp className="w-4 h-4 text-emerald-600" /><span className="text-sm text-emerald-700">매출세액</span></div>
|
|
<p className="text-xl font-bold text-emerald-600">{formatCurrency(salesVat)}원</p>
|
|
<p className="text-xs text-gray-500">공급가액: {formatCurrency(salesSupply)}원</p>
|
|
</div>
|
|
<div className="bg-pink-50 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-1"><TrendingDown className="w-4 h-4 text-pink-600" /><span className="text-sm text-pink-700">매입세액</span></div>
|
|
<p className="text-xl font-bold text-pink-600">{formatCurrency(purchaseVat)}원</p>
|
|
<p className="text-xs text-gray-500">공급가액: {formatCurrency(purchaseSupply)}원</p>
|
|
</div>
|
|
<div className={`rounded-lg p-4 ${netVat >= 0 ? 'bg-amber-50' : 'bg-blue-50'}`}>
|
|
<div className="flex items-center gap-2 mb-1"><Calculator className={`w-4 h-4 ${netVat >= 0 ? 'text-amber-600' : 'text-blue-600'}`} /><span className={`text-sm ${netVat >= 0 ? 'text-amber-700' : 'text-blue-700'}`}>{netVat >= 0 ? '납부세액' : '환급세액'}</span></div>
|
|
<p className={`text-xl font-bold ${netVat >= 0 ? 'text-amber-600' : 'text-blue-600'}`}>{formatCurrency(Math.abs(netVat))}원</p>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<button className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 hover:bg-gray-50 rounded-lg">
|
|
<FileText className="w-4 h-4" /><span className="text-sm">신고서 출력</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 요약 테이블 */}
|
|
<div className="bg-white rounded-xl border border-gray-200 mb-6 overflow-hidden">
|
|
<div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
|
|
<h3 className="font-medium text-gray-900">{getPeriodLabel(filterPeriod)} 부가세 요약</h3>
|
|
</div>
|
|
<table className="w-full">
|
|
<thead className="bg-gray-100">
|
|
<tr>
|
|
<th className="px-6 py-2 text-left text-xs font-semibold text-gray-600">구분</th>
|
|
<th className="px-6 py-2 text-right text-xs font-semibold text-gray-600">공급가액</th>
|
|
<th className="px-6 py-2 text-right text-xs font-semibold text-gray-600">세액</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="border-b border-gray-100">
|
|
<td className="px-6 py-3 text-sm">매출</td>
|
|
<td className="px-6 py-3 text-sm text-right">{formatCurrency(salesSupply)}원</td>
|
|
<td className="px-6 py-3 text-sm text-right text-emerald-600 font-medium">{formatCurrency(salesVat)}원</td>
|
|
</tr>
|
|
<tr className="border-b border-gray-100">
|
|
<td className="px-6 py-3 text-sm">매입</td>
|
|
<td className="px-6 py-3 text-sm text-right">{formatCurrency(purchaseSupply)}원</td>
|
|
<td className="px-6 py-3 text-sm text-right text-pink-600 font-medium">({formatCurrency(purchaseVat)}원)</td>
|
|
</tr>
|
|
<tr className="bg-gray-50 font-bold">
|
|
<td className="px-6 py-3 text-sm">{netVat >= 0 ? '납부세액' : '환급세액'}</td>
|
|
<td className="px-6 py-3 text-sm text-right">-</td>
|
|
<td className={`px-6 py-3 text-sm text-right ${netVat >= 0 ? 'text-amber-600' : 'text-blue-600'}`}>{formatCurrency(Math.abs(netVat))}원</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</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-indigo-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="sales">매출</option>
|
|
<option value="purchase">매입</option>
|
|
</select>
|
|
<div className="flex gap-1">
|
|
{['all', 'pending', 'filed', 'paid'].map(status => (
|
|
<button key={status} onClick={() => setFilterStatus(status)} className={`flex-1 px-2 py-2 rounded-lg text-xs font-medium ${filterStatus === status ? (status === 'paid' ? 'bg-green-600 text-white' : status === 'filed' ? '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(''); setFilterType('all'); setFilterStatus('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-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-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">
|
|
{filteredRecords.length === 0 ? (
|
|
<tr><td colSpan="8" className="px-6 py-12 text-center text-gray-400">데이터가 없습니다.</td></tr>
|
|
) : filteredRecords.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.partnerName}</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600">{item.invoiceNo}</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600">{item.invoiceDate}</td>
|
|
<td className="px-6 py-4 text-sm font-medium text-right text-gray-900">{formatCurrency(item.supplyAmount)}원</td>
|
|
<td className="px-6 py-4 text-sm text-right text-gray-600">{formatCurrency(item.vatAmount)}원</td>
|
|
<td className="px-6 py-4 text-sm font-bold text-right text-indigo-600">{formatCurrency(item.totalAmount)}원</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.period} onChange={(e) => setFormData(prev => ({ ...prev, period: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">{periods.map(p => <option key={p} value={p}>{getPeriodLabel(p)}</option>)}</select></div>
|
|
<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="sales">매출</option><option value="purchase">매입</option></select></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.partnerName} onChange={(e) => setFormData(prev => ({ ...prev, partnerName: 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="text" value={formData.invoiceNo} onChange={(e) => setFormData(prev => ({ ...prev, invoiceNo: e.target.value }))} placeholder="TAX-2026-0001" 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="date" value={formData.invoiceDate} onChange={(e) => setFormData(prev => ({ ...prev, invoiceDate: e.target.value }))} 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="text" value={formatInputCurrency(formData.supplyAmount)} onChange={(e) => handleSupplyAmountChange(e.target.value)} placeholder="0" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right" /></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.vatAmount)} readOnly className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right bg-gray-50" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">합계금액</label><input type="text" value={formatInputCurrency(formData.totalAmount)} readOnly className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right bg-gray-50" /></div>
|
|
</div>
|
|
{modalMode === 'edit' && (
|
|
<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="filed">신고완료</option><option value="paid">납부완료</option></select></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} className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">{modalMode === 'add' ? '등록' : '저장'}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const rootElement = document.getElementById('vat-root');
|
|
if (rootElement) { ReactDOM.createRoot(rootElement).render(<VatManagement />); }
|
|
</script>
|
|
@endverbatim
|
|
@endpush
|