feat:일일자금일보/카드거래내역 목업 데이터 → DB CRUD 전환
- 일일자금일보: API 호출 방식 전환 (list/store/update/destroy/memo) - 카드거래내역: API 호출 방식 전환 (list/store/update/destroy) - 라우트 추가 (daily-fund, card-transactions API 그룹) - 로딩 상태, 에러 핸들링 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
김보곤
@@ -4,13 +4,12 @@
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
@media print {
|
||||
.no-print { display: none !important; }
|
||||
}
|
||||
@media print { .no-print { display: none !important; } }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<div id="card-transactions-root"></div>
|
||||
@endsection
|
||||
|
||||
@@ -23,7 +22,6 @@
|
||||
<script type="text/babel">
|
||||
const { useState, useRef, useEffect } = React;
|
||||
|
||||
// Lucide 아이콘 래핑
|
||||
const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
|
||||
const ref = useRef(null);
|
||||
useEffect(() => {
|
||||
@@ -40,7 +38,6 @@
|
||||
const CreditCard = createIcon('credit-card');
|
||||
const Plus = createIcon('plus');
|
||||
const Search = createIcon('search');
|
||||
const Filter = createIcon('filter');
|
||||
const Download = createIcon('download');
|
||||
const Calendar = createIcon('calendar');
|
||||
const X = createIcon('x');
|
||||
@@ -54,143 +51,14 @@
|
||||
const Car = createIcon('car');
|
||||
const Utensils = createIcon('utensils');
|
||||
const Building = createIcon('building');
|
||||
const MoreHorizontal = createIcon('more-horizontal');
|
||||
const ChevronLeft = createIcon('chevron-left');
|
||||
const ChevronRight = createIcon('chevron-right');
|
||||
|
||||
function CardTransactionsManagement() {
|
||||
// 카드 목록 (실제로는 API에서 가져옴)
|
||||
const [cards] = useState([
|
||||
{ id: 1, cardName: '업무용 법인카드', cardNumber: '9410-****-****-9012', holder: '김대표' },
|
||||
{ id: 2, cardName: '마케팅 법인카드', cardNumber: '5412-****-****-1098', holder: '박마케팅' },
|
||||
{ id: 3, cardName: '개발팀 체크카드', cardNumber: '4532-****-****-3333', holder: '이개발' },
|
||||
]);
|
||||
const [cards, setCards] = useState([]);
|
||||
const [transactions, setTransactions] = useState([]);
|
||||
const [stats, setStats] = useState({ total: 0, totalAmount: 0, approvedAmount: 0, cancelledAmount: 0 });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// 거래내역 데이터
|
||||
const [transactions, setTransactions] = useState([
|
||||
{
|
||||
id: 1,
|
||||
cardId: 1,
|
||||
date: '2026-01-21',
|
||||
time: '12:30',
|
||||
merchant: '스타벅스 강남역점',
|
||||
category: '식비',
|
||||
amount: 15000,
|
||||
approvalNo: '12345678',
|
||||
status: 'approved',
|
||||
memo: '팀 미팅'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
cardId: 1,
|
||||
date: '2026-01-21',
|
||||
time: '14:20',
|
||||
merchant: 'AWS Korea',
|
||||
category: '운영비',
|
||||
amount: 2500000,
|
||||
approvalNo: '23456789',
|
||||
status: 'approved',
|
||||
memo: '1월 클라우드 비용'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
cardId: 2,
|
||||
date: '2026-01-21',
|
||||
time: '10:15',
|
||||
merchant: '네이버 광고',
|
||||
category: '마케팅비',
|
||||
amount: 500000,
|
||||
approvalNo: '34567890',
|
||||
status: 'approved',
|
||||
memo: '검색광고 충전'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
cardId: 1,
|
||||
date: '2026-01-20',
|
||||
time: '18:45',
|
||||
merchant: '교보문고 광화문점',
|
||||
category: '도서/교육',
|
||||
amount: 89000,
|
||||
approvalNo: '45678901',
|
||||
status: 'approved',
|
||||
memo: '개발 서적 구매'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
cardId: 3,
|
||||
date: '2026-01-20',
|
||||
time: '16:30',
|
||||
merchant: '쿠팡',
|
||||
category: '사무용품',
|
||||
amount: 156000,
|
||||
approvalNo: '56789012',
|
||||
status: 'approved',
|
||||
memo: '모니터 거치대, 키보드'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
cardId: 1,
|
||||
date: '2026-01-19',
|
||||
time: '19:20',
|
||||
merchant: '한우명가',
|
||||
category: '접대비',
|
||||
amount: 450000,
|
||||
approvalNo: '67890123',
|
||||
status: 'approved',
|
||||
memo: '고객사 미팅 식사'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
cardId: 2,
|
||||
date: '2026-01-19',
|
||||
time: '11:00',
|
||||
merchant: 'Google Ads',
|
||||
category: '마케팅비',
|
||||
amount: 800000,
|
||||
approvalNo: '78901234',
|
||||
status: 'approved',
|
||||
memo: '디스플레이 광고'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
cardId: 1,
|
||||
date: '2026-01-18',
|
||||
time: '09:30',
|
||||
merchant: 'KTX 예매',
|
||||
category: '교통비',
|
||||
amount: 112000,
|
||||
approvalNo: '89012345',
|
||||
status: 'approved',
|
||||
memo: '부산 출장'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
cardId: 3,
|
||||
date: '2026-01-18',
|
||||
time: '15:00',
|
||||
merchant: '다나와',
|
||||
category: '장비구매',
|
||||
amount: 1890000,
|
||||
approvalNo: '90123456',
|
||||
status: 'approved',
|
||||
memo: '개발용 노트북 SSD 업그레이드'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
cardId: 1,
|
||||
date: '2026-01-17',
|
||||
time: '13:00',
|
||||
merchant: '취소-스타벅스',
|
||||
category: '식비',
|
||||
amount: -8500,
|
||||
approvalNo: '01234567',
|
||||
status: 'cancelled',
|
||||
memo: '주문 취소'
|
||||
}
|
||||
]);
|
||||
|
||||
// 필터 상태
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [filterCard, setFilterCard] = useState('all');
|
||||
const [filterCategory, setFilterCategory] = useState('all');
|
||||
@@ -200,14 +68,14 @@ function CardTransactionsManagement() {
|
||||
end: new Date().toISOString().split('T')[0]
|
||||
});
|
||||
|
||||
// 모달 상태
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [modalMode, setModalMode] = useState('add');
|
||||
const [editingTransaction, setEditingTransaction] = useState(null);
|
||||
|
||||
// 폼 초기값
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
||||
|
||||
const initialFormState = {
|
||||
cardId: 1,
|
||||
cardId: '',
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
time: '',
|
||||
merchant: '',
|
||||
@@ -219,10 +87,8 @@ function CardTransactionsManagement() {
|
||||
};
|
||||
const [formData, setFormData] = useState(initialFormState);
|
||||
|
||||
// 카테고리 목록
|
||||
const categories = ['식비', '교통비', '운영비', '마케팅비', '사무용품', '도서/교육', '접대비', '장비구매', '기타'];
|
||||
|
||||
// 카테고리 아이콘
|
||||
const getCategoryIcon = (category) => {
|
||||
switch (category) {
|
||||
case '식비': return <Utensils className="w-4 h-4" />;
|
||||
@@ -236,7 +102,6 @@ function CardTransactionsManagement() {
|
||||
}
|
||||
};
|
||||
|
||||
// 카테고리 색상
|
||||
const getCategoryColor = (category) => {
|
||||
const colors = {
|
||||
'식비': 'bg-orange-100 text-orange-700',
|
||||
@@ -252,142 +117,141 @@ function CardTransactionsManagement() {
|
||||
return colors[category] || 'bg-gray-100 text-gray-700';
|
||||
};
|
||||
|
||||
// 금액 포맷
|
||||
const formatCurrency = (num) => {
|
||||
if (!num) return '0';
|
||||
return num.toLocaleString();
|
||||
};
|
||||
|
||||
// 입력용 금액 포맷 (3자리 콤마)
|
||||
const formatCurrency = (num) => num ? num.toLocaleString() : '0';
|
||||
const formatInputCurrency = (value) => {
|
||||
if (!value && value !== 0) return '';
|
||||
const num = String(value).replace(/[^\d-]/g, '');
|
||||
if (!num) return '';
|
||||
const isNegative = num.startsWith('-');
|
||||
const absNum = num.replace('-', '');
|
||||
if (!absNum) return isNegative ? '-' : '';
|
||||
return (isNegative ? '-' : '') + Number(absNum).toLocaleString();
|
||||
};
|
||||
const parseInputCurrency = (value) => String(value).replace(/[^\d-]/g, '');
|
||||
|
||||
// 입력값에서 숫자만 추출
|
||||
const parseInputCurrency = (value) => {
|
||||
const num = String(value).replace(/[^\d-]/g, '');
|
||||
return num;
|
||||
const fetchTransactions = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
startDate: dateRange.start,
|
||||
endDate: dateRange.end,
|
||||
});
|
||||
const res = await fetch(`/finance/card-transactions/list?${params}`);
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
setTransactions(data.data);
|
||||
setStats(data.stats);
|
||||
if (data.cards) setCards(data.cards);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('거래내역 조회 실패:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 필터링된 거래내역
|
||||
useEffect(() => { fetchTransactions(); }, [dateRange.start, dateRange.end]);
|
||||
|
||||
// 클라이언트 필터링
|
||||
const filteredTransactions = transactions.filter(tx => {
|
||||
const matchesSearch = tx.merchant.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
tx.memo.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
tx.approvalNo.includes(searchTerm);
|
||||
(tx.memo || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(tx.approvalNo || '').includes(searchTerm);
|
||||
const matchesCard = filterCard === 'all' || tx.cardId === parseInt(filterCard);
|
||||
const matchesCategory = filterCategory === 'all' || tx.category === filterCategory;
|
||||
const matchesStatus = filterStatus === 'all' || tx.status === filterStatus;
|
||||
const matchesDate = tx.date >= dateRange.start && tx.date <= dateRange.end;
|
||||
return matchesSearch && matchesCard && matchesCategory && matchesStatus && matchesDate;
|
||||
}).sort((a, b) => {
|
||||
if (a.date !== b.date) return b.date.localeCompare(a.date);
|
||||
return b.time.localeCompare(a.time);
|
||||
return matchesSearch && matchesCard && matchesCategory && matchesStatus;
|
||||
});
|
||||
|
||||
// 통계 계산
|
||||
const totalAmount = filteredTransactions.reduce((sum, tx) => sum + tx.amount, 0);
|
||||
const approvedAmount = filteredTransactions.filter(tx => tx.status === 'approved').reduce((sum, tx) => sum + tx.amount, 0);
|
||||
const cancelledAmount = filteredTransactions.filter(tx => tx.status === 'cancelled').reduce((sum, tx) => sum + Math.abs(tx.amount), 0);
|
||||
|
||||
// 카테고리별 합계
|
||||
const categoryTotals = filteredTransactions
|
||||
.filter(tx => tx.status === 'approved' && tx.amount > 0)
|
||||
.reduce((acc, tx) => {
|
||||
acc[tx.category] = (acc[tx.category] || 0) + tx.amount;
|
||||
return acc;
|
||||
}, {});
|
||||
.reduce((acc, tx) => { acc[tx.category] = (acc[tx.category] || 0) + tx.amount; return acc; }, {});
|
||||
|
||||
// 거래 추가 모달 열기
|
||||
const handleAddTransaction = () => {
|
||||
setModalMode('add');
|
||||
setFormData(initialFormState);
|
||||
setFormData({ ...initialFormState, cardId: cards.length > 0 ? cards[0].id : '' });
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// 거래 수정 모달 열기
|
||||
const handleEditTransaction = (transaction) => {
|
||||
setModalMode('edit');
|
||||
setEditingTransaction(transaction);
|
||||
setFormData({
|
||||
cardId: transaction.cardId,
|
||||
date: transaction.date,
|
||||
time: transaction.time,
|
||||
time: transaction.time || '',
|
||||
merchant: transaction.merchant,
|
||||
category: transaction.category,
|
||||
category: transaction.category || '기타',
|
||||
amount: transaction.amount,
|
||||
approvalNo: transaction.approvalNo,
|
||||
approvalNo: transaction.approvalNo || '',
|
||||
status: transaction.status,
|
||||
memo: transaction.memo
|
||||
memo: transaction.memo || ''
|
||||
});
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// 저장
|
||||
const handleSave = () => {
|
||||
if (!formData.merchant || !formData.amount) {
|
||||
alert('가맹점명과 금액을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (modalMode === 'add') {
|
||||
const newTransaction = {
|
||||
id: Date.now(),
|
||||
const handleSave = async () => {
|
||||
if (!formData.merchant || !formData.amount) { alert('가맹점명과 금액을 입력해주세요.'); return; }
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
...formData,
|
||||
cardId: parseInt(formData.cardId),
|
||||
cardId: parseInt(formData.cardId) || null,
|
||||
amount: parseInt(formData.amount) || 0,
|
||||
time: formData.time || new Date().toTimeString().slice(0, 5)
|
||||
time: formData.time || null,
|
||||
};
|
||||
setTransactions(prev => [newTransaction, ...prev]);
|
||||
} else {
|
||||
setTransactions(prev => prev.map(tx =>
|
||||
tx.id === editingTransaction.id
|
||||
? { ...tx, ...formData, cardId: parseInt(formData.cardId), amount: parseInt(formData.amount) || 0 }
|
||||
: tx
|
||||
));
|
||||
}
|
||||
|
||||
setShowModal(false);
|
||||
setEditingTransaction(null);
|
||||
};
|
||||
|
||||
// 삭제
|
||||
const handleDelete = (id) => {
|
||||
if (confirm('정말 삭제하시겠습니까?')) {
|
||||
setTransactions(prev => prev.filter(tx => tx.id !== id));
|
||||
if (showModal) {
|
||||
setShowModal(false);
|
||||
setEditingTransaction(null);
|
||||
const url = modalMode === 'add' ? '/finance/card-transactions/store' : `/finance/card-transactions/${editingTransaction.id}`;
|
||||
const res = await fetch(url, {
|
||||
method: modalMode === 'add' ? 'POST' : 'PUT',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
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);
|
||||
setEditingTransaction(null);
|
||||
fetchTransactions();
|
||||
} catch (err) {
|
||||
alert('저장에 실패했습니다.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
if (!confirm('정말 삭제하시겠습니까?')) return;
|
||||
try {
|
||||
const res = await fetch(`/finance/card-transactions/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'X-CSRF-TOKEN': csrfToken },
|
||||
});
|
||||
if (res.ok) {
|
||||
if (showModal) { setShowModal(false); setEditingTransaction(null); }
|
||||
fetchTransactions();
|
||||
}
|
||||
} catch (err) {
|
||||
alert('삭제에 실패했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
// Excel 다운로드
|
||||
const handleDownload = () => {
|
||||
const rows = [
|
||||
['법인카드 거래내역', `${dateRange.start} ~ ${dateRange.end}`],
|
||||
[],
|
||||
['날짜', '시간', '카드', '가맹점', '카테고리', '금액', '승인번호', '상태', '메모'],
|
||||
...filteredTransactions.map(tx => [
|
||||
tx.date,
|
||||
tx.time,
|
||||
cards.find(c => c.id === tx.cardId)?.cardName || '',
|
||||
tx.merchant,
|
||||
tx.category,
|
||||
tx.amount,
|
||||
tx.approvalNo,
|
||||
tx.status === 'approved' ? '승인' : '취소',
|
||||
tx.memo
|
||||
tx.date, tx.time, cards.find(c => c.id === tx.cardId)?.cardName || '', tx.merchant, tx.category, tx.amount, tx.approvalNo, tx.status === 'approved' ? '승인' : '취소', tx.memo
|
||||
]),
|
||||
[],
|
||||
['총 사용금액', '', '', '', '', totalAmount]
|
||||
];
|
||||
|
||||
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');
|
||||
@@ -396,7 +260,6 @@ function CardTransactionsManagement() {
|
||||
link.click();
|
||||
};
|
||||
|
||||
// 날짜 그룹화
|
||||
const groupedTransactions = filteredTransactions.reduce((groups, tx) => {
|
||||
const date = tx.date;
|
||||
if (!groups[date]) groups[date] = [];
|
||||
@@ -404,7 +267,6 @@ function CardTransactionsManagement() {
|
||||
return groups;
|
||||
}, {});
|
||||
|
||||
// 날짜 포맷
|
||||
const formatDateDisplay = (dateStr) => {
|
||||
const date = new Date(dateStr);
|
||||
const days = ['일', '월', '화', '수', '목', '금', '토'];
|
||||
@@ -413,185 +275,92 @@ function CardTransactionsManagement() {
|
||||
|
||||
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">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 bg-indigo-100 rounded-xl">
|
||||
<Receipt 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">Corporate Card Transactions</p>
|
||||
</div>
|
||||
<div className="p-2 bg-indigo-100 rounded-xl"><Receipt 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">Corporate Card Transactions</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 transition-colors"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
<span className="text-sm">Excel</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAddTransaction}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">거래 등록</span>
|
||||
</button>
|
||||
<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={handleAddTransaction} className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg"><Plus className="w-4 h-4" /><span className="text-sm font-medium">거래 등록</span></button>
|
||||
</div>
|
||||
</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-gray-200 p-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-gray-500">조회 건수</span>
|
||||
<Receipt className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-2"><span className="text-sm text-gray-500">조회 건수</span><Receipt className="w-5 h-5 text-gray-400" /></div>
|
||||
<p className="text-2xl font-bold text-gray-900">{filteredTransactions.length}건</p>
|
||||
<p className="text-xs text-gray-400 mt-1">승인 {filteredTransactions.filter(t => t.status === 'approved').length}건</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-indigo-200 p-6 bg-indigo-50/30">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-indigo-700">총 사용금액</span>
|
||||
<CreditCard className="w-5 h-5 text-indigo-500" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-2"><span className="text-sm text-indigo-700">총 사용금액</span><CreditCard className="w-5 h-5 text-indigo-500" /></div>
|
||||
<p className="text-2xl font-bold text-indigo-600">{formatCurrency(totalAmount)}원</p>
|
||||
<p className="text-xs text-indigo-500 mt-1">취소 제외</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-emerald-200 p-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-emerald-700">승인 금액</span>
|
||||
<TrendingUp className="w-5 h-5 text-emerald-500" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-2"><span className="text-sm text-emerald-700">승인 금액</span><TrendingUp className="w-5 h-5 text-emerald-500" /></div>
|
||||
<p className="text-2xl font-bold text-emerald-600">{formatCurrency(approvedAmount)}원</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-rose-200 p-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-rose-700">취소 금액</span>
|
||||
<TrendingDown className="w-5 h-5 text-rose-500" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-2"><span className="text-sm text-rose-700">취소 금액</span><TrendingDown className="w-5 h-5 text-rose-500" /></div>
|
||||
<p className="text-2xl font-bold text-rose-600">{formatCurrency(cancelledAmount)}원</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 카테고리별 사용현황 */}
|
||||
{Object.keys(categoryTotals).length > 0 && (
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4 mb-6">
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-3">카테고리별 사용현황</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Object.entries(categoryTotals)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.map(([cat, amount]) => (
|
||||
<div key={cat} className={`flex items-center gap-2 px-3 py-2 rounded-lg ${getCategoryColor(cat)}`}>
|
||||
{getCategoryIcon(cat)}
|
||||
<span className="text-sm font-medium">{cat}</span>
|
||||
<span className="text-sm">{formatCurrency(amount)}원</span>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
{Object.entries(categoryTotals).sort((a, b) => b[1] - a[1]).map(([cat, amount]) => (
|
||||
<div key={cat} className={`flex items-center gap-2 px-3 py-2 rounded-lg ${getCategoryColor(cat)}`}>
|
||||
{getCategoryIcon(cat)}<span className="text-sm font-medium">{cat}</span><span className="text-sm">{formatCurrency(amount)}원</span>
|
||||
</div>
|
||||
))}
|
||||
</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-6 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 focus:border-indigo-500"
|
||||
/>
|
||||
<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>
|
||||
|
||||
{/* 카드 필터 */}
|
||||
<div>
|
||||
<select
|
||||
value={filterCard}
|
||||
onChange={(e) => setFilterCard(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||
>
|
||||
<option value="all">전체 카드</option>
|
||||
{cards.map(card => (
|
||||
<option key={card.id} value={card.id}>{card.cardName}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 카테고리 필터 */}
|
||||
<div>
|
||||
<select
|
||||
value={filterCategory}
|
||||
onChange={(e) => setFilterCategory(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||
>
|
||||
<option value="all">전체 카테고리</option>
|
||||
{categories.map(cat => (
|
||||
<option key={cat} value={cat}>{cat}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 기간 필터 */}
|
||||
<select value={filterCard} onChange={(e) => setFilterCard(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg">
|
||||
<option value="all">전체 카드</option>
|
||||
{cards.map(card => <option key={card.id} value={card.id}>{card.cardName}</option>)}
|
||||
</select>
|
||||
<select value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg">
|
||||
<option value="all">전체 카테고리</option>
|
||||
{categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
|
||||
</select>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={dateRange.start}
|
||||
onChange={(e) => setDateRange(prev => ({ ...prev, start: e.target.value }))}
|
||||
className="flex-1 px-2 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm"
|
||||
/>
|
||||
<input type="date" value={dateRange.start} onChange={(e) => setDateRange(prev => ({ ...prev, start: e.target.value }))} className="flex-1 px-2 py-2 border border-gray-300 rounded-lg text-sm" />
|
||||
<span className="text-gray-400">~</span>
|
||||
<input
|
||||
type="date"
|
||||
value={dateRange.end}
|
||||
onChange={(e) => setDateRange(prev => ({ ...prev, end: e.target.value }))}
|
||||
className="flex-1 px-2 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm"
|
||||
/>
|
||||
<input type="date" value={dateRange.end} onChange={(e) => setDateRange(prev => ({ ...prev, end: e.target.value }))} className="flex-1 px-2 py-2 border border-gray-300 rounded-lg text-sm" />
|
||||
</div>
|
||||
|
||||
{/* 상태 필터 버튼 */}
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => setFilterStatus('all')}
|
||||
className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
filterStatus === 'all' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
전체
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilterStatus('approved')}
|
||||
className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
filterStatus === 'approved' ? 'bg-emerald-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
승인
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilterStatus('cancelled')}
|
||||
className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
filterStatus === 'cancelled' ? 'bg-rose-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
{['all', 'approved', 'cancelled'].map(s => (
|
||||
<button key={s} onClick={() => setFilterStatus(s)} className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium ${filterStatus === s ? (s === 'approved' ? 'bg-emerald-600 text-white' : s === 'cancelled' ? 'bg-rose-600 text-white' : 'bg-indigo-600 text-white') : 'bg-gray-100 text-gray-600'}`}>
|
||||
{s === 'all' ? '전체' : s === 'approved' ? '승인' : '취소'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 거래 내역 목록 */}
|
||||
<div className="space-y-4">
|
||||
{Object.entries(groupedTransactions).length === 0 ? (
|
||||
{loading ? (
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
||||
<div className="flex items-center justify-center gap-2 text-gray-400">
|
||||
<svg className="animate-spin h-5 w-5" 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>
|
||||
</div>
|
||||
) : Object.entries(groupedTransactions).length === 0 ? (
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
||||
<Receipt className="w-12 h-12 mx-auto mb-4 text-gray-300" />
|
||||
<p className="text-gray-400">거래 내역이 없습니다.</p>
|
||||
@@ -600,67 +369,36 @@ className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
Object.entries(groupedTransactions).map(([date, txList]) => (
|
||||
<div key={date} className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div className="px-6 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4 text-gray-400" />
|
||||
<span className="font-medium text-gray-700">{formatDateDisplay(date)}</span>
|
||||
</div>
|
||||
<span className="text-sm text-gray-500">
|
||||
{txList.length}건 / {formatCurrency(txList.reduce((s, t) => s + t.amount, 0))}원
|
||||
</span>
|
||||
<div className="flex items-center gap-2"><Calendar className="w-4 h-4 text-gray-400" /><span className="font-medium text-gray-700">{formatDateDisplay(date)}</span></div>
|
||||
<span className="text-sm text-gray-500">{txList.length}건 / {formatCurrency(txList.reduce((s, t) => s + t.amount, 0))}원</span>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-100">
|
||||
{txList.map(tx => (
|
||||
<div
|
||||
key={tx.id}
|
||||
onClick={() => handleEditTransaction(tx)}
|
||||
className="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors"
|
||||
>
|
||||
<div key={tx.id} onClick={() => handleEditTransaction(tx)} className="px-6 py-4 hover:bg-gray-50 cursor-pointer">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`p-2 rounded-lg ${getCategoryColor(tx.category)}`}>
|
||||
{getCategoryIcon(tx.category)}
|
||||
</div>
|
||||
<div className={`p-2 rounded-lg ${getCategoryColor(tx.category)}`}>{getCategoryIcon(tx.category)}</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-medium text-gray-900">{tx.merchant}</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs ${
|
||||
tx.status === 'approved'
|
||||
? 'bg-emerald-100 text-emerald-700'
|
||||
: 'bg-rose-100 text-rose-700'
|
||||
}`}>
|
||||
{tx.status === 'approved' ? '승인' : '취소'}
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs ${tx.status === 'approved' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'}`}>{tx.status === 'approved' ? '승인' : '취소'}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-500">
|
||||
<span>{tx.time}</span>
|
||||
<span>{cards.find(c => c.id === tx.cardId)?.cardName}</span>
|
||||
<span className={`px-1.5 py-0.5 rounded text-xs ${getCategoryColor(tx.category)}`}>
|
||||
{tx.category}
|
||||
</span>
|
||||
<span className={`px-1.5 py-0.5 rounded text-xs ${getCategoryColor(tx.category)}`}>{tx.category}</span>
|
||||
{tx.memo && <span className="text-gray-400">| {tx.memo}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<p className={`text-lg font-bold ${tx.amount < 0 ? 'text-rose-600' : 'text-gray-900'}`}>
|
||||
{tx.amount < 0 ? '' : ''}{formatCurrency(tx.amount)}원
|
||||
</p>
|
||||
<p className="text-xs text-gray-400">승인번호: {tx.approvalNo}</p>
|
||||
<p className={`text-lg font-bold ${tx.amount < 0 ? 'text-rose-600' : 'text-gray-900'}`}>{formatCurrency(tx.amount)}원</p>
|
||||
{tx.approvalNo && <p className="text-xs text-gray-400">승인번호: {tx.approvalNo}</p>}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleEditTransaction(tx); }}
|
||||
className="p-2 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded-lg transition-colors"
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleDelete(tx.id); }}
|
||||
className="p-2 text-gray-400 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-colors"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
|
||||
<button onClick={() => handleEditTransaction(tx)} className="p-2 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded-lg"><Edit className="w-4 h-4" /></button>
|
||||
<button onClick={() => handleDelete(tx.id)} className="p-2 text-gray-400 hover:text-rose-500 hover:bg-rose-50 rounded-lg"><Trash2 className="w-4 h-4" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -672,167 +410,48 @@ className="p-2 text-gray-400 hover:text-rose-500 hover:bg-rose-50 rounded-lg tra
|
||||
)}
|
||||
</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); setEditingTransaction(null); }}
|
||||
className="p-1 hover:bg-gray-100 rounded-lg"
|
||||
>
|
||||
<X className="w-5 h-5 text-gray-500" />
|
||||
</button>
|
||||
<h3 className="text-lg font-bold text-gray-900">{modalMode === 'add' ? '거래 등록' : '거래 수정'}</h3>
|
||||
<button onClick={() => { setShowModal(false); setEditingTransaction(null); }} 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.cardId}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, cardId: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||
>
|
||||
{cards.map(card => (
|
||||
<option key={card.id} value={card.id}>{card.cardName}</option>
|
||||
))}
|
||||
<div><label className="block text-sm font-medium text-gray-700 mb-1">카드</label>
|
||||
<select value={formData.cardId} onChange={(e) => setFormData(prev => ({ ...prev, cardId: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">
|
||||
<option value="">선택</option>
|
||||
{cards.map(card => <option key={card.id} value={card.id}>{card.cardName}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">카테고리</label>
|
||||
<select
|
||||
value={formData.category}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||
>
|
||||
{categories.map(cat => (
|
||||
<option key={cat} value={cat}>{cat}</option>
|
||||
))}
|
||||
<div><label className="block text-sm font-medium text-gray-700 mb-1">카테고리</label>
|
||||
<select value={formData.category} onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">
|
||||
{categories.map(cat => <option key={cat} value={cat}>{cat}</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="date"
|
||||
value={formData.date}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, date: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">시간</label>
|
||||
<input
|
||||
type="time"
|
||||
value={formData.time}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, time: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div><label className="block text-sm font-medium text-gray-700 mb-1">날짜 *</label><input type="date" value={formData.date} onChange={(e) => setFormData(prev => ({ ...prev, date: 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="time" value={formData.time} onChange={(e) => setFormData(prev => ({ ...prev, time: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">가맹점명 *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.merchant}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, merchant: e.target.value }))}
|
||||
placeholder="가맹점명을 입력하세요"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div><label className="block text-sm font-medium text-gray-700 mb-1">가맹점명 *</label><input type="text" value={formData.merchant} onChange={(e) => setFormData(prev => ({ ...prev, merchant: e.target.value }))} placeholder="가맹점명" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></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.amount)}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, amount: parseInputCurrency(e.target.value) }))}
|
||||
placeholder="0"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-right"
|
||||
/>
|
||||
<p className="text-xs text-gray-400 mt-1">취소 시 음수(-) 입력</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">승인번호</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.approvalNo}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, approvalNo: e.target.value }))}
|
||||
placeholder="승인번호"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div><label className="block text-sm font-medium text-gray-700 mb-1">금액 *</label><input type="text" value={formatInputCurrency(formData.amount)} onChange={(e) => setFormData(prev => ({ ...prev, amount: parseInputCurrency(e.target.value) }))} placeholder="0" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right" /><p className="text-xs text-gray-400 mt-1">취소 시 음수(-) 입력</p></div>
|
||||
<div><label className="block text-sm font-medium text-gray-700 mb-1">승인번호</label><input type="text" value={formData.approvalNo} onChange={(e) => setFormData(prev => ({ ...prev, approvalNo: e.target.value }))} placeholder="승인번호" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">상태</label>
|
||||
<div><label className="block text-sm font-medium text-gray-700 mb-1">상태</label>
|
||||
<div className="flex gap-4">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="status"
|
||||
value="approved"
|
||||
checked={formData.status === 'approved'}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))}
|
||||
className="w-4 h-4 text-indigo-600"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">승인</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="status"
|
||||
value="cancelled"
|
||||
checked={formData.status === 'cancelled'}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))}
|
||||
className="w-4 h-4 text-indigo-600"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">취소</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer"><input type="radio" name="status" value="approved" checked={formData.status === 'approved'} onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))} className="w-4 h-4 text-indigo-600" /><span className="text-sm">승인</span></label>
|
||||
<label className="flex items-center gap-2 cursor-pointer"><input type="radio" name="status" value="cancelled" checked={formData.status === 'cancelled'} onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))} className="w-4 h-4 text-indigo-600" /><span className="text-sm">취소</span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">메모</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.memo}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, memo: e.target.value }))}
|
||||
placeholder="메모를 입력하세요"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div><label className="block text-sm font-medium text-gray-700 mb-1">메모</label><input type="text" value={formData.memo} onChange={(e) => setFormData(prev => ({ ...prev, memo: e.target.value }))} placeholder="메모" 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(editingTransaction.id)}
|
||||
className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center gap-2"
|
||||
>
|
||||
<span>🗑️</span> 삭제
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => { setShowModal(false); setEditingTransaction(null); }}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
<span>✕</span> 취소
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg flex items-center justify-center gap-2"
|
||||
>
|
||||
<span>✓</span> {modalMode === 'add' ? '등록' : '저장'}
|
||||
</button>
|
||||
{modalMode === 'edit' && <button onClick={() => handleDelete(editingTransaction.id)} className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg">삭제</button>}
|
||||
<button onClick={() => { setShowModal(false); setEditingTransaction(null); }} 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-indigo-600 hover:bg-indigo-700 text-white rounded-lg disabled:opacity-50">{saving ? '저장 중...' : (modalMode === 'add' ? '등록' : '저장')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -841,11 +460,8 @@ className="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded
|
||||
);
|
||||
}
|
||||
|
||||
// React 앱 마운트
|
||||
const rootElement = document.getElementById('card-transactions-root');
|
||||
if (rootElement) {
|
||||
ReactDOM.createRoot(rootElement).render(<CardTransactionsManagement />);
|
||||
}
|
||||
if (rootElement) { ReactDOM.createRoot(rootElement).render(<CardTransactionsManagement />); }
|
||||
</script>
|
||||
@endverbatim
|
||||
@endpush
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -722,6 +722,15 @@
|
||||
return view('finance.daily-fund');
|
||||
})->name('daily-fund');
|
||||
|
||||
// 일일자금일보 API
|
||||
Route::prefix('daily-fund')->name('daily-fund.')->group(function () {
|
||||
Route::get('/list', [\App\Http\Controllers\Finance\DailyFundController::class, 'index'])->name('list');
|
||||
Route::post('/store', [\App\Http\Controllers\Finance\DailyFundController::class, 'store'])->name('store');
|
||||
Route::put('/{id}', [\App\Http\Controllers\Finance\DailyFundController::class, 'update'])->name('update');
|
||||
Route::delete('/{id}', [\App\Http\Controllers\Finance\DailyFundController::class, 'destroy'])->name('destroy');
|
||||
Route::post('/memo', [\App\Http\Controllers\Finance\DailyFundController::class, 'saveMemo'])->name('memo');
|
||||
});
|
||||
|
||||
// 카드관리
|
||||
Route::get('/corporate-cards', function () {
|
||||
if (request()->header('HX-Request')) {
|
||||
@@ -748,6 +757,14 @@
|
||||
return view('finance.card-transactions');
|
||||
})->name('card-transactions');
|
||||
|
||||
// 법인카드 거래내역 API
|
||||
Route::prefix('card-transactions')->name('card-transactions.')->group(function () {
|
||||
Route::get('/list', [\App\Http\Controllers\Finance\CardTransactionController::class, 'index'])->name('list');
|
||||
Route::post('/store', [\App\Http\Controllers\Finance\CardTransactionController::class, 'store'])->name('store');
|
||||
Route::put('/{id}', [\App\Http\Controllers\Finance\CardTransactionController::class, 'update'])->name('update');
|
||||
Route::delete('/{id}', [\App\Http\Controllers\Finance\CardTransactionController::class, 'destroy'])->name('destroy');
|
||||
});
|
||||
|
||||
// 수입/지출
|
||||
Route::get('/income', function () {
|
||||
if (request()->header('HX-Request')) {
|
||||
|
||||
Reference in New Issue
Block a user