267 lines
20 KiB
PHP
267 lines
20 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '매출관리')
|
|
|
|
@push('styles')
|
|
<style>
|
|
@media print { .no-print { display: none !important; } }
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div id="sales-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 BarChart3 = createIcon('bar-chart-3');
|
|
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 DollarSign = createIcon('dollar-sign');
|
|
const TrendingUp = createIcon('trending-up');
|
|
const FileText = createIcon('file-text');
|
|
const Building = createIcon('building');
|
|
|
|
function SalesManagement() {
|
|
const [sales, setSales] = useState([
|
|
{ id: 1, date: '2026-01-21', customer: '(주)제조산업', project: 'MES 시스템 개발', type: '프로젝트', amount: 160000000, vat: 16000000, status: 'contracted', invoiceNo: 'SAL-2026-001', memo: '계약완료, 1차 50% 입금' },
|
|
{ id: 2, date: '2026-01-15', customer: '(주)테크솔루션', project: 'SaaS 구독', type: '구독', amount: 6000000, vat: 600000, status: 'invoiced', invoiceNo: 'SAL-2026-002', memo: '연간 구독 (월 50만원)' },
|
|
{ id: 3, date: '2026-01-10', customer: '(주)스마트팩토리', project: '공정관리 시스템', type: '프로젝트', amount: 100000000, vat: 10000000, status: 'negotiating', invoiceNo: '', memo: '협상 중' },
|
|
{ id: 4, date: '2026-01-05', customer: '(주)디지털제조', project: 'ERP 연동', type: '프로젝트', amount: 80000000, vat: 8000000, status: 'completed', invoiceNo: 'SAL-2026-003', memo: '완료' },
|
|
{ id: 5, date: '2025-12-20', customer: '(주)AI산업', project: '유지보수 계약', type: '유지보수', amount: 36000000, vat: 3600000, status: 'contracted', invoiceNo: 'SAL-2026-004', memo: '연간 계약' },
|
|
]);
|
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [filterType, setFilterType] = useState('all');
|
|
const [filterStatus, setFilterStatus] = useState('all');
|
|
const [dateRange, setDateRange] = useState({
|
|
start: new Date(new Date().setMonth(new Date().getMonth() - 3)).toISOString().split('T')[0],
|
|
end: new Date().toISOString().split('T')[0]
|
|
});
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [modalMode, setModalMode] = useState('add');
|
|
const [editingItem, setEditingItem] = useState(null);
|
|
|
|
const types = ['프로젝트', '구독', '유지보수', '라이선스', '컨설팅'];
|
|
const statuses = [
|
|
{ value: 'negotiating', label: '협상중', color: 'bg-blue-100 text-blue-700' },
|
|
{ value: 'contracted', label: '계약완료', color: 'bg-emerald-100 text-emerald-700' },
|
|
{ value: 'invoiced', label: '청구완료', color: 'bg-purple-100 text-purple-700' },
|
|
{ value: 'completed', label: '매출확정', color: 'bg-gray-100 text-gray-700' }
|
|
];
|
|
|
|
const initialFormState = {
|
|
date: new Date().toISOString().split('T')[0],
|
|
customer: '',
|
|
project: '',
|
|
type: '프로젝트',
|
|
amount: '',
|
|
vat: '',
|
|
status: 'negotiating',
|
|
invoiceNo: '',
|
|
memo: ''
|
|
};
|
|
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 filteredSales = sales.filter(item => {
|
|
const matchesSearch = item.customer.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
item.project.toLowerCase().includes(searchTerm.toLowerCase());
|
|
const matchesType = filterType === 'all' || item.type === filterType;
|
|
const matchesStatus = filterStatus === 'all' || item.status === filterStatus;
|
|
const matchesDate = item.date >= dateRange.start && item.date <= dateRange.end;
|
|
return matchesSearch && matchesType && matchesStatus && matchesDate;
|
|
});
|
|
|
|
const totalAmount = filteredSales.reduce((sum, item) => sum + item.amount, 0);
|
|
const totalVat = filteredSales.reduce((sum, item) => sum + item.vat, 0);
|
|
const confirmedAmount = filteredSales.filter(i => i.status === 'completed').reduce((sum, item) => sum + item.amount, 0);
|
|
const contractedAmount = filteredSales.filter(i => i.status === 'contracted' || i.status === 'invoiced').reduce((sum, item) => sum + item.amount, 0);
|
|
|
|
const handleAdd = () => { setModalMode('add'); setFormData(initialFormState); setShowModal(true); };
|
|
const handleEdit = (item) => { setModalMode('edit'); setEditingItem(item); setFormData({ ...item }); setShowModal(true); };
|
|
const handleSave = () => {
|
|
if (!formData.customer || !formData.amount) { alert('필수 항목을 입력해주세요.'); return; }
|
|
const amount = parseInt(formData.amount) || 0;
|
|
const vat = parseInt(formData.vat) || Math.round(amount * 0.1);
|
|
if (modalMode === 'add') {
|
|
setSales(prev => [{ id: Date.now(), ...formData, amount, vat }, ...prev]);
|
|
} else {
|
|
setSales(prev => prev.map(item => item.id === editingItem.id ? { ...item, ...formData, amount, vat } : item));
|
|
}
|
|
setShowModal(false); setEditingItem(null);
|
|
};
|
|
const handleDelete = (id) => { if (confirm('정말 삭제하시겠습니까?')) { setSales(prev => prev.filter(item => item.id !== id)); setShowModal(false); } };
|
|
|
|
const handleDownload = () => {
|
|
const rows = [['매출관리', `${dateRange.start} ~ ${dateRange.end}`], [], ['날짜', '거래처', '프로젝트', '유형', '공급가액', 'VAT', '합계', '상태'],
|
|
...filteredSales.map(item => [item.date, item.customer, item.project, item.type, item.amount, item.vat, item.amount + item.vat, statuses.find(s => s.value === item.status)?.label])];
|
|
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 = `매출관리_${dateRange.start}_${dateRange.end}.csv`; link.click();
|
|
};
|
|
|
|
const getStatusColor = (status) => statuses.find(s => s.value === status)?.color || 'bg-gray-100 text-gray-700';
|
|
const getStatusLabel = (status) => statuses.find(s => s.value === status)?.label || status;
|
|
|
|
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-blue-100 rounded-xl"><BarChart3 className="w-6 h-6 text-blue-600" /></div>
|
|
<div><h1 className="text-xl font-bold text-gray-900">매출관리</h1><p className="text-sm text-gray-500">Sales 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="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><DollarSign className="w-5 h-5 text-gray-400" /></div>
|
|
<p className="text-2xl font-bold text-gray-900">{formatCurrency(totalAmount)}원</p>
|
|
<p className="text-xs text-gray-400 mt-1">VAT 별도</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-blue-200 p-6 bg-blue-50/30">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-blue-700">계약 금액</span><FileText className="w-5 h-5 text-blue-500" /></div>
|
|
<p className="text-2xl font-bold text-blue-600">{formatCurrency(contractedAmount)}원</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>
|
|
<p className="text-2xl font-bold text-emerald-600">{formatCurrency(confirmedAmount)}원</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">VAT 합계</span></div>
|
|
<p className="text-2xl font-bold text-gray-900">{formatCurrency(totalVat)}원</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-blue-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>{types.map(t => <option key={t} value={t}>{t}</option>)}</select>
|
|
<select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg"><option value="all">전체 상태</option>{statuses.map(s => <option key={s.value} value={s.value}>{s.label}</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 text-sm" />
|
|
<span>~</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 text-sm" />
|
|
</div>
|
|
</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">합계(VAT포함)</th>
|
|
<th className="px-6 py-3 text-center 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">
|
|
{filteredSales.length === 0 ? (
|
|
<tr><td colSpan="8" className="px-6 py-12 text-center text-gray-400">데이터가 없습니다.</td></tr>
|
|
) : filteredSales.map(item => (
|
|
<tr key={item.id} className="hover:bg-gray-50 cursor-pointer" onClick={() => handleEdit(item)}>
|
|
<td className="px-6 py-4 text-sm text-gray-600">{item.date}</td>
|
|
<td className="px-6 py-4"><p className="text-sm font-medium text-gray-900">{item.customer}</p></td>
|
|
<td className="px-6 py-4"><p className="text-sm text-gray-600">{item.project}</p>{item.memo && <p className="text-xs text-gray-400">{item.memo}</p>}</td>
|
|
<td className="px-6 py-4"><span className="px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-700">{item.type}</span></td>
|
|
<td className="px-6 py-4 text-sm font-medium text-right text-gray-900">{formatCurrency(item.amount)}원</td>
|
|
<td className="px-6 py-4 text-sm font-bold text-right text-blue-600">{formatCurrency(item.amount + item.vat)}원</td>
|
|
<td className="px-6 py-4 text-center"><span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(item.status)}`}>{getStatusLabel(item.status)}</span></td>
|
|
<td className="px-6 py-4 text-center" onClick={(e) => e.stopPropagation()}>
|
|
<button onClick={() => handleEdit(item)} className="p-1 text-gray-400 hover:text-blue-500"><Edit className="w-4 h-4" /></button>
|
|
<button onClick={() => handleDelete(item.id)} className="p-1 text-gray-400 hover:text-rose-500"><Trash2 className="w-4 h-4" /></button>
|
|
</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><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><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">{types.map(t => <option key={t} value={t}>{t}</option>)}</select></div>
|
|
</div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">거래처 *</label><input type="text" value={formData.customer} onChange={(e) => setFormData(prev => ({ ...prev, customer: 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.project} onChange={(e) => setFormData(prev => ({ ...prev, project: 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 text-right" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">VAT</label><input type="text" value={formatInputCurrency(formData.vat)} onChange={(e) => setFormData(prev => ({ ...prev, vat: parseInputCurrency(e.target.value) }))} placeholder="자동계산" 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><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">{statuses.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}</select></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="SAL-2026-001" 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.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(editingItem.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)} 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('sales-root');
|
|
if (rootElement) { ReactDOM.createRoot(rootElement).render(<SalesManagement />); }
|
|
</script>
|
|
@endverbatim
|
|
@endpush
|