2424 lines
144 KiB
HTML
2424 lines
144 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>재무관리 - SAM</title>
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="text/babel">
|
|
const { useState, useRef, useEffect } = React;
|
|
|
|
// Lucide 아이콘을 SVG 컴포넌트로 래핑
|
|
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" />;
|
|
};
|
|
|
|
const DollarSign = createIcon('dollar-sign');
|
|
const TrendingUp = createIcon('trending-up');
|
|
const Users = createIcon('users');
|
|
const Calendar = createIcon('calendar');
|
|
const Clock = createIcon('clock');
|
|
const AlertCircle = createIcon('alert-circle');
|
|
const Wallet = createIcon('wallet');
|
|
const ArrowUpRight = createIcon('arrow-up-right');
|
|
const ArrowDownRight = createIcon('arrow-down-right');
|
|
const Plus = createIcon('plus');
|
|
const FileText = createIcon('file-text');
|
|
const CreditCard = createIcon('credit-card');
|
|
const Building2 = createIcon('building-2');
|
|
const Receipt = createIcon('receipt');
|
|
const Download = createIcon('download');
|
|
const Edit = createIcon('edit');
|
|
const Trash2 = createIcon('trash-2');
|
|
const Eye = createIcon('eye');
|
|
const Send = createIcon('send');
|
|
const FileCheck = createIcon('file-check');
|
|
const AlertTriangle = createIcon('alert-triangle');
|
|
const ShoppingCart = createIcon('shopping-cart');
|
|
const Package = createIcon('package');
|
|
const RefreshCw = createIcon('refresh-cw');
|
|
const Car = createIcon('car');
|
|
const Landmark = createIcon('landmark');
|
|
const ChevronDown = createIcon('chevron-down');
|
|
const ChevronUp = createIcon('chevron-up');
|
|
const FileSpreadsheet = createIcon('file-spreadsheet');
|
|
const Printer = createIcon('printer');
|
|
const ArrowLeft = createIcon('arrow-left');
|
|
const Save = createIcon('save');
|
|
const X = createIcon('x');
|
|
const Check = createIcon('check');
|
|
|
|
function FinanceManagementSystem() {
|
|
const [selectedTab, setSelectedTab] = useState('dashboard');
|
|
const [selectedSubMenu, setSelectedSubMenu] = useState(null);
|
|
const [expandedMenus, setExpandedMenus] = useState(['fund', 'card', 'settlement', 'vehicle', 'partner']);
|
|
const [viewMode, setViewMode] = useState('list');
|
|
const [editingItem, setEditingItem] = useState(null);
|
|
const [selectedItem, setSelectedItem] = useState(null);
|
|
const [incomeSubTab, setIncomeSubTab] = useState('actual');
|
|
const [expenseSubTab, setExpenseSubTab] = useState('actual');
|
|
const [selectedMonth, setSelectedMonth] = useState('2026-02');
|
|
const [dateRange, setDateRange] = useState({ start: '2026-01-01', end: '2026-01-31' });
|
|
|
|
// 폼 상태
|
|
const [accountForm, setAccountForm] = useState({
|
|
bank: '', accountNumber: '', type: 'savings', balance: '', openDate: new Date().toISOString().split('T')[0]
|
|
});
|
|
|
|
const [subscriptionForm, setSubscriptionForm] = useState({
|
|
customer: '', businessNumber: '', representative: '', contact: '', email: '',
|
|
contractDate: new Date().toISOString().split('T')[0], startDate: new Date().toISOString().split('T')[0],
|
|
monthlyFee: '', billingDate: '1', users: '', features: '', contractPeriod: '12',
|
|
autoRenewal: true, paymentMethod: 'transfer', status: 'active', memo: ''
|
|
});
|
|
|
|
// Mock Data
|
|
const incomeData = {
|
|
actual: [
|
|
{ id: 1, date: '2026-01-15', type: '개발비 1차', customer: '(주)제조산업', amount: 80000000, vat: 8000000, account: '국민은행', status: 'received' },
|
|
{ id: 2, date: '2026-01-20', type: '개발비 잔금', customer: '(주)테크솔루션', amount: 40000000, vat: 4000000, account: '국민은행', status: 'received' }
|
|
],
|
|
expected: [
|
|
{ id: 3, date: '2026-02-10', type: '개발비 1차', customer: '(주)스마트팩토리', amount: 100000000, vat: 10000000, account: '국민은행', status: 'expected' }
|
|
]
|
|
};
|
|
|
|
const expenseData = {
|
|
actual: [
|
|
{ id: 1, date: '2026-01-15', type: '호스팅 비용', payee: 'AWS', amount: 2500000, vat: 250000, account: '신한은행', status: 'paid' },
|
|
{ id: 2, date: '2026-01-25', type: '급여', payee: '직원 5명', amount: 18000000, vat: 0, account: '국민은행', status: 'paid' }
|
|
],
|
|
expected: [
|
|
{ id: 3, date: '2026-02-10', type: '영업수수료', payee: '영업파트너 4명', amount: 16000000, vat: 0, account: '국민은행', status: 'scheduled' },
|
|
{ id: 4, date: '2026-02-25', type: '급여', payee: '직원 5명', amount: 18000000, vat: 0, account: '국민은행', status: 'scheduled' }
|
|
]
|
|
};
|
|
|
|
const salesData = [
|
|
{ id: 1, date: '2026-01-15', customer: '(주)제조산업', product: 'SAM 맞춤 개발', quantity: 1, unitPrice: 80000000, amount: 80000000, vat: 8000000 },
|
|
{ id: 2, date: '2026-01-20', customer: '(주)테크솔루션', product: 'SAM 맞춤 개발', quantity: 1, unitPrice: 40000000, amount: 40000000, vat: 4000000 },
|
|
{ id: 3, date: '2026-01-28', customer: '17개 고객사', product: '월 구독료', quantity: 17, unitPrice: 500000, amount: 8500000, vat: 850000 }
|
|
];
|
|
|
|
const purchaseData = [
|
|
{ id: 1, date: '2026-01-10', supplier: 'AWS', item: '호스팅 서비스', quantity: 1, unitPrice: 2500000, amount: 2500000, vat: 250000 },
|
|
{ id: 2, date: '2026-01-15', supplier: '(주)개발외주', item: '개발 용역', quantity: 1, unitPrice: 15000000, amount: 15000000, vat: 1500000 }
|
|
];
|
|
|
|
const subscriptionData = [
|
|
{ id: 1, customer: '(주)제조산업', monthlyFee: 500000, billingDate: '1일', users: 10, startDate: '2026-03-01', status: 'active', autoRenewal: true },
|
|
{ id: 2, customer: '(주)테크솔루션', monthlyFee: 500000, billingDate: '21일', users: 8, startDate: '2026-01-21', status: 'active', autoRenewal: true }
|
|
];
|
|
|
|
const accountsData = [
|
|
{ id: 1, bank: '국민은행', accountNumber: '123-456-789012', type: '보통예금', balance: 450000000, openDate: '2023-01-15', lastTransaction: '2026-01-15 14:30' },
|
|
{ id: 2, bank: '신한은행', accountNumber: '234-567-890123', type: '법인카드 출금', balance: 85000000, openDate: '2023-01-15', lastTransaction: '2026-01-15 11:20' },
|
|
{ id: 3, bank: '우리은행', accountNumber: '345-678-901234', type: '정기예금', balance: 200000000, openDate: '2024-06-01', lastTransaction: '2026-01-01 09:00' }
|
|
];
|
|
|
|
const accountTransactionsData = [
|
|
{ id: 1, date: '2026-01-15', time: '14:30', type: '입금', description: '(주)제조산업 개발비 1차', amount: 80000000, account: '국민은행', balance: 450000000 },
|
|
{ id: 2, date: '2026-01-15', time: '11:20', type: '출금', description: 'AWS 호스팅 비용', amount: 2500000, account: '신한은행', balance: 82500000 },
|
|
{ id: 3, date: '2026-01-14', time: '16:45', type: '입금', description: '(주)테크솔루션 구독료', amount: 500000, account: '국민은행', balance: 370000000 }
|
|
];
|
|
|
|
const fundScheduleData = [
|
|
{ date: '2026-02-10', type: 'income', title: '(주)스마트팩토리 개발비 1차', amount: 100000000 },
|
|
{ date: '2026-02-10', type: 'expense', title: '영업파트너 수수료 지급', amount: 16000000 },
|
|
{ date: '2026-02-15', type: 'income', title: '(주)디지털제조 개발비 잔금', amount: 30000000 },
|
|
{ date: '2026-02-25', type: 'expense', title: '직원 급여 지급', amount: 18000000 },
|
|
{ date: '2026-02-28', type: 'income', title: '구독료 CMS 출금', amount: 8500000 }
|
|
];
|
|
|
|
const corporateCardsData = [
|
|
{ id: 1, cardNumber: '1234-****-****-5678', holder: '김대표', bank: '신한카드', account: '신한은행 234-567', withdrawalDate: '매월 15일', limit: 50000000, usage: '일반경비' },
|
|
{ id: 2, cardNumber: '2345-****-****-6789', holder: '이부장', bank: '국민카드', account: '국민은행 123-456', withdrawalDate: '매월 10일', limit: 20000000, usage: '영업활동' },
|
|
{ id: 3, cardNumber: '3456-****-****-7890', holder: '박차장', bank: '삼성카드', account: '신한은행 234-567', withdrawalDate: '매월 15일', limit: 10000000, usage: '출장경비' }
|
|
];
|
|
|
|
const cardTransactionsData = [
|
|
{ id: 1, date: '2026-01-15', time: '18:30', cardNumber: '1234-****-5678', holder: '김대표', merchant: '스타벅스 강남점', category: '복리후생비', amount: 45000, vat: 4500, deductible: false },
|
|
{ id: 2, date: '2026-01-15', time: '14:20', cardNumber: '2345-****-6789', holder: '이부장', merchant: 'GS주유소', category: '차량유지비', amount: 80000, vat: 8000, deductible: true },
|
|
{ id: 3, date: '2026-01-14', time: '12:30', cardNumber: '1234-****-5678', holder: '김대표', merchant: '호텔 신라', category: '접대비', amount: 500000, vat: 50000, deductible: false }
|
|
];
|
|
|
|
const salesCommissionData = [
|
|
{ id: 1, partner: '김영업', role: '판매자', contracts: 3, amount: 6400000, tax: 211200, netAmount: 6188800, paymentDate: '2026-02-10' },
|
|
{ id: 2, partner: '이파트너', role: '판매자', contracts: 2, amount: 4800000, tax: 158400, netAmount: 4641600, paymentDate: '2026-02-10' },
|
|
{ id: 3, partner: '박관리', role: '관리자', contracts: 3, amount: 1600000, tax: 52800, netAmount: 1547200, paymentDate: '2026-02-10' }
|
|
];
|
|
|
|
const consultantCommissionData = [
|
|
{ id: 1, consultant: '정상담', projects: 4, commission: 8000000, expenses: 250000, total: 8250000, tax: 272250, netAmount: 7977750, paymentDate: '2026-02-10' },
|
|
{ id: 2, consultant: '강기획', projects: 3, commission: 6000000, expenses: 180000, total: 6180000, tax: 203940, netAmount: 5976060, paymentDate: '2026-02-10' }
|
|
];
|
|
|
|
const customerSettlementData = [
|
|
{ id: 1, customer: '(주)제조산업', contract: '2026-01-15', development: 80000000, paid1st: 80000000, remaining: 80000000, subscription: 500000, subscriptionStart: '2026-03-01', status: '진행중' },
|
|
{ id: 2, customer: '(주)테크솔루션', contract: '2025-12-20', development: 40000000, paid1st: 40000000, remaining: 0, subscription: 500000, subscriptionStart: '2026-01-21', status: '구독중' },
|
|
{ id: 3, customer: '(주)스마트팩토리', contract: '2026-01-20', development: 100000000, paid1st: 0, remaining: 100000000, subscription: 0, subscriptionStart: '-', status: '계약' }
|
|
];
|
|
|
|
const vehiclesData = [
|
|
{ id: 1, carNumber: '12가3456', model: '그랜저', year: 2023, purpose: '임원용', manager: '김대표', insurance: '삼성화재', insuranceExpiry: '2026-06-30', maintenanceDate: '2026-01-10' },
|
|
{ id: 2, carNumber: '23나4567', model: '쏘나타', year: 2024, purpose: '영업용', manager: '이부장', insurance: '현대해상', insuranceExpiry: '2026-08-15', maintenanceDate: '2026-01-05' }
|
|
];
|
|
|
|
const vehicleExpensesData = [
|
|
{ id: 1, date: '2026-01-15', carNumber: '12가3456', type: '주유', merchant: 'GS주유소', amount: 80000, manager: '김대표' },
|
|
{ id: 2, date: '2026-01-10', carNumber: '12가3456', type: '정비', merchant: '현대 서비스센터', amount: 350000, manager: '김대표' },
|
|
{ id: 3, date: '2026-01-08', carNumber: '23나4567', type: '주유', merchant: 'SK주유소', amount: 75000, manager: '이부장' }
|
|
];
|
|
|
|
const customers = [
|
|
{ id: 1, name: '(주)제조산업', businessNumber: '123-45-67890', representative: '김대표', contact: '010-1234-5678', contractDate: '2026-01-15', contractAmount: 80000000, status: 'active' },
|
|
{ id: 2, name: '(주)테크솔루션', businessNumber: '234-56-78901', representative: '이대표', contact: '010-2345-6789', contractDate: '2025-12-20', contractAmount: 40000000, status: 'active' },
|
|
{ id: 3, name: '(주)스마트팩토리', businessNumber: '345-67-89012', representative: '박대표', contact: '010-3456-7890', contractDate: '2026-01-20', contractAmount: 100000000, status: 'pending' }
|
|
];
|
|
|
|
const suppliersData = [
|
|
{ id: 1, name: 'AWS', type: '호스팅', businessNumber: '123-45-67890', contact: '1544-8667', manager: '김담당', email: 'support@aws.com' },
|
|
{ id: 2, name: '(주)개발외주', type: '외주개발', businessNumber: '234-56-78901', contact: '02-1234-5678', manager: '박개발', email: 'dev@company.com' },
|
|
{ id: 3, name: '카카오', type: '알림톡', businessNumber: '345-67-89012', contact: '1577-3754', manager: '이담당', email: 'biz@kakao.com' }
|
|
];
|
|
|
|
const receivablesData = [
|
|
{ id: 1, customer: '(주)디지털제조', type: '개발비 잔금', amount: 30000000, vat: 3000000, dueDate: '2026-01-10', overdueDays: 5, status: 'overdue' },
|
|
{ id: 2, customer: '(주)AI산업', type: '구독료', amount: 500000, vat: 50000, dueDate: '2026-01-28', overdueDays: 0, status: 'unpaid' }
|
|
];
|
|
|
|
const payablesData = [
|
|
{ id: 1, payee: '(주)디자인외주', type: 'UI/UX 디자인', amount: 3000000, vat: 300000, dueDate: '2026-02-05', status: 'scheduled' },
|
|
{ id: 2, payee: '카카오', type: '알림톡 서비스', amount: 500000, vat: 50000, dueDate: '2026-02-10', status: 'scheduled' }
|
|
];
|
|
|
|
const refundData = [
|
|
{ id: 1, customer: '(주)중단회사', type: '계약 해지', contractDate: '2025-12-15', refundDate: '2026-01-10', progress: 20, refundRate: 80, refundAmount: 16000000, reason: '고객 사정', status: 'completed' },
|
|
{ id: 2, customer: '(주)변경요청', type: '구독 취소', contractDate: '2025-11-20', refundDate: '2026-01-15', refundAmount: 500000, reason: '서비스 불만족', status: 'pending' }
|
|
];
|
|
|
|
const vatSummary = {
|
|
sales: { taxable: 450000000, vat: 45000000, total: 495000000 },
|
|
purchase: { taxable: 120000000, vat: 12000000, total: 132000000 },
|
|
card: { deductible: 8500000, nonDeductible: 1200000, total: 9700000 },
|
|
payable: 45000000 - 12000000 - 8500000
|
|
};
|
|
|
|
const vatSchedule = [
|
|
{ period: '1기 예정', months: '1~3월', deadline: '4월 25일', status: 'upcoming' },
|
|
{ period: '1기 확정', months: '4~6월', deadline: '7월 25일', status: 'future' },
|
|
{ period: '2기 예정', months: '7~9월', deadline: '10월 25일', status: 'future' },
|
|
{ period: '2기 확정', months: '10~12월', deadline: '1월 25일', status: 'future' }
|
|
];
|
|
|
|
const formatCurrency = (num) => {
|
|
if (!num) return '0';
|
|
if (num >= 100000000) return `${(num / 100000000).toFixed(1)}억`;
|
|
if (num >= 10000000) return `${(num / 10000000).toFixed(0)}천만`;
|
|
if (num >= 10000) return `${(num / 10000).toFixed(0)}만`;
|
|
return num.toLocaleString();
|
|
};
|
|
|
|
const formatNumber = (num) => num ? num.toLocaleString() : '0';
|
|
|
|
const toggleMenu = (menuId) => {
|
|
setExpandedMenus(prev => prev.includes(menuId) ? prev.filter(id => id !== menuId) : [...prev, menuId]);
|
|
};
|
|
|
|
const handleCreate = () => {
|
|
setViewMode('create');
|
|
setEditingItem(null);
|
|
};
|
|
|
|
const handleEdit = (item) => {
|
|
setViewMode('edit');
|
|
setEditingItem(item);
|
|
};
|
|
|
|
const handleView = (item) => {
|
|
setSelectedItem(item);
|
|
setViewMode('detail');
|
|
};
|
|
|
|
const handleBack = () => {
|
|
setViewMode('list');
|
|
setSelectedItem(null);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setViewMode('list');
|
|
setEditingItem(null);
|
|
};
|
|
|
|
const handleSave = () => {
|
|
console.log('Saving...');
|
|
setViewMode('list');
|
|
};
|
|
|
|
const generateCalendar = (yearMonth) => {
|
|
const [year, month] = yearMonth.split('-').map(Number);
|
|
const firstDay = new Date(year, month - 1, 1);
|
|
const lastDay = new Date(year, month, 0);
|
|
const daysInMonth = lastDay.getDate();
|
|
const startDayOfWeek = firstDay.getDay();
|
|
|
|
const calendar = [];
|
|
let week = new Array(7).fill(null);
|
|
|
|
for (let i = 0; i < startDayOfWeek; i++) {
|
|
week[i] = null;
|
|
}
|
|
|
|
for (let day = 1; day <= daysInMonth; day++) {
|
|
const dayOfWeek = (startDayOfWeek + day - 1) % 7;
|
|
week[dayOfWeek] = day;
|
|
|
|
if (dayOfWeek === 6 || day === daysInMonth) {
|
|
calendar.push([...week]);
|
|
week = new Array(7).fill(null);
|
|
}
|
|
}
|
|
|
|
return calendar;
|
|
};
|
|
|
|
const getScheduleForDate = (day) => {
|
|
if (!day) return [];
|
|
const dateStr = `${selectedMonth}-${String(day).padStart(2, '0')}`;
|
|
return fundScheduleData.filter(item => item.date === dateStr);
|
|
};
|
|
|
|
const menuStructure = [
|
|
{ id: 'dashboard', name: '대시보드', icon: TrendingUp, single: true },
|
|
{
|
|
id: 'fund', name: '자금관리', icon: Wallet,
|
|
submenus: [
|
|
{ id: 'accounts', name: '계좌관리', icon: Landmark },
|
|
{ id: 'account-transactions', name: '계좌거래내역', icon: FileText },
|
|
{ id: 'fund-schedule', name: '자금계획일정', icon: Calendar },
|
|
{ id: 'daily-fund-report', name: '일일자금일보', icon: FileSpreadsheet }
|
|
]
|
|
},
|
|
{
|
|
id: 'card', name: '카드관리', icon: CreditCard,
|
|
submenus: [
|
|
{ id: 'card-list', name: '법인카드 등록/조회', icon: CreditCard },
|
|
{ id: 'card-transactions', name: '법인카드 거래내역', icon: Receipt }
|
|
]
|
|
},
|
|
{ id: 'income', name: '수입관리', icon: ArrowUpRight, single: true },
|
|
{ id: 'expense', name: '지출관리', icon: ArrowDownRight, single: true },
|
|
{ id: 'sales', name: '매출관리', icon: DollarSign, single: true },
|
|
{ id: 'purchase', name: '매입관리', icon: ShoppingCart, single: true },
|
|
{
|
|
id: 'settlement', name: '정산관리', icon: FileSpreadsheet,
|
|
submenus: [
|
|
{ id: 'sales-commission', name: '영업수수료', icon: Users },
|
|
{ id: 'consultant-commission', name: '상담수수료', icon: FileCheck },
|
|
{ id: 'customer-settlement', name: '고객사별 정산', icon: Building2 },
|
|
{ id: 'subscription', name: '구독관리', icon: RefreshCw }
|
|
]
|
|
},
|
|
{
|
|
id: 'vehicle', name: '차량관리', icon: Car,
|
|
submenus: [
|
|
{ id: 'vehicle-list', name: '법인차량 등록', icon: Car },
|
|
{ id: 'vehicle-expenses', name: '차량 유지비', icon: Receipt }
|
|
]
|
|
},
|
|
{
|
|
id: 'partner', name: '거래처관리', icon: Building2,
|
|
submenus: [
|
|
{ id: 'customers', name: '고객사 관리', icon: Users },
|
|
{ id: 'suppliers', name: '일반 거래처', icon: Package }
|
|
]
|
|
},
|
|
{ id: 'receivables', name: '미수금', icon: AlertCircle, single: true },
|
|
{ id: 'payables', name: '미지급금', icon: Clock, single: true },
|
|
{ id: 'refund', name: '환불/해지', icon: RefreshCw, single: true },
|
|
{ id: 'vat', name: '부가세', icon: FileText, single: true }
|
|
];
|
|
|
|
const getPageTitle = () => {
|
|
if (viewMode === 'create') return '등록';
|
|
if (viewMode === 'edit') return '수정';
|
|
if (selectedSubMenu) {
|
|
const menu = menuStructure.find(m => m.id === selectedTab);
|
|
const submenu = menu?.submenus?.find(s => s.id === selectedSubMenu);
|
|
return submenu?.name || '대시보드';
|
|
}
|
|
const menu = menuStructure.find(m => m.id === selectedTab);
|
|
return menu?.name || '대시보드';
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex">
|
|
|
|
{/* 사이드바 */}
|
|
<aside className="w-72 bg-white border-r border-gray-200 flex-shrink-0 overflow-y-auto">
|
|
<div className="p-6 border-b border-gray-200">
|
|
<h1 className="text-xl font-bold bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 bg-clip-text text-transparent">
|
|
SAM 재무관리
|
|
</h1>
|
|
<p className="text-xs text-gray-500 mt-1">Financial System</p>
|
|
</div>
|
|
|
|
<nav className="p-4 space-y-1">
|
|
{menuStructure.map(menu => (
|
|
<div key={menu.id}>
|
|
{menu.single ? (
|
|
<button
|
|
onClick={() => {
|
|
setSelectedTab(menu.id);
|
|
setSelectedSubMenu(null);
|
|
setViewMode('list');
|
|
}}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
|
|
selectedTab === menu.id && !selectedSubMenu
|
|
? 'bg-emerald-50 text-emerald-700 font-medium'
|
|
: 'text-gray-600 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
<menu.icon className="w-5 h-5" />
|
|
<span className="text-sm">{menu.name}</span>
|
|
</button>
|
|
) : (
|
|
<div>
|
|
<button
|
|
onClick={() => toggleMenu(menu.id)}
|
|
className="w-full flex items-center justify-between px-4 py-3 rounded-lg text-gray-700 hover:bg-gray-50 transition-all"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<menu.icon className="w-5 h-5" />
|
|
<span className="text-sm font-medium">{menu.name}</span>
|
|
</div>
|
|
{expandedMenus.includes(menu.id) ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
|
</button>
|
|
{expandedMenus.includes(menu.id) && (
|
|
<div className="ml-8 mt-1 space-y-1">
|
|
{menu.submenus.map(submenu => (
|
|
<button
|
|
key={submenu.id}
|
|
onClick={() => {
|
|
setSelectedTab(menu.id);
|
|
setSelectedSubMenu(submenu.id);
|
|
setViewMode('list');
|
|
}}
|
|
className={`w-full flex items-center gap-3 px-4 py-2 rounded-lg transition-all text-sm ${
|
|
selectedTab === menu.id && selectedSubMenu === submenu.id
|
|
? 'bg-emerald-50 text-emerald-700 font-medium'
|
|
: 'text-gray-600 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
<submenu.icon className="w-4 h-4" />
|
|
{submenu.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
|
|
{/* 메인 컨텐츠 */}
|
|
<div className="flex-1 overflow-x-hidden">
|
|
<header className="bg-white border-b border-gray-200 px-8 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
{viewMode !== 'list' && (
|
|
<button onClick={handleCancel} className="p-2 hover:bg-gray-100 rounded-lg">
|
|
<ArrowLeft className="w-5 h-5 text-gray-600" />
|
|
</button>
|
|
)}
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-900">{getPageTitle()}</h2>
|
|
<p className="text-sm text-gray-500 mt-1">2026년 1월 15일 현재</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button className="p-2 hover:bg-gray-100 rounded-lg">
|
|
<Download className="w-5 h-5 text-gray-600" />
|
|
</button>
|
|
<button className="p-2 hover:bg-gray-100 rounded-lg">
|
|
<Printer className="w-5 h-5 text-gray-600" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="p-8">
|
|
|
|
{/* 대시보드 */}
|
|
{selectedTab === 'dashboard' && viewMode === 'list' && (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="p-3 bg-emerald-50 rounded-xl w-fit mb-4">
|
|
<Wallet className="w-6 h-6 text-emerald-600" />
|
|
</div>
|
|
<h3 className="text-sm font-medium text-gray-500 mb-1">총 계좌 잔액</h3>
|
|
<p className="text-3xl font-bold text-gray-900">{formatCurrency(735000000)}원</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="p-3 bg-blue-50 rounded-xl w-fit mb-4">
|
|
<ArrowUpRight className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<h3 className="text-sm font-medium text-gray-500 mb-1">이번 달 수입</h3>
|
|
<p className="text-3xl font-bold text-gray-900">{formatCurrency(128500000)}원</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="p-3 bg-rose-50 rounded-xl w-fit mb-4">
|
|
<ArrowDownRight className="w-6 h-6 text-rose-600" />
|
|
</div>
|
|
<h3 className="text-sm font-medium text-gray-500 mb-1">이번 달 지출</h3>
|
|
<p className="text-3xl font-bold text-gray-900">{formatCurrency(20545000)}원</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="p-3 bg-violet-50 rounded-xl w-fit mb-4">
|
|
<CreditCard className="w-6 h-6 text-violet-600" />
|
|
</div>
|
|
<h3 className="text-sm font-medium text-gray-500 mb-1">법인카드 사용</h3>
|
|
<p className="text-3xl font-bold text-gray-900">{formatCurrency(625000)}원</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div className="bg-rose-50 border border-rose-200 rounded-xl p-5">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<AlertCircle className="w-5 h-5 text-rose-600" />
|
|
<h3 className="font-bold text-rose-900">미수금 현황</h3>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-rose-800">총 미수금</span>
|
|
<span className="font-bold text-rose-900">{formatCurrency(31000000)}원</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-rose-700">연체 건수</span>
|
|
<span className="font-semibold text-rose-800">1건 (D+5일)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-amber-50 border border-amber-200 rounded-xl p-5">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<Clock className="w-5 h-5 text-amber-600" />
|
|
<h3 className="font-bold text-amber-900">미지급금 현황</h3>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-amber-800">총 미지급금</span>
|
|
<span className="font-bold text-amber-900">{formatCurrency(3500000)}원</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-amber-700">지급 예정</span>
|
|
<span className="font-semibold text-amber-800">2건</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 계좌관리 - 목록 */}
|
|
{selectedTab === 'fund' && selectedSubMenu === 'accounts' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">보유 계좌 목록</h3>
|
|
<button onClick={handleCreate} className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
계좌 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">은행</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">계좌번호</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">예금종류</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">잔액</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">개설일자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">최종처리일시</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{accountsData.map(account => (
|
|
<tr key={account.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm font-medium text-gray-900">{account.bank}</td>
|
|
<td className="py-3 px-4 text-sm font-mono text-gray-700">{account.accountNumber}</td>
|
|
<td className="py-3 px-4">
|
|
<span className="px-2 py-1 bg-emerald-50 text-emerald-700 rounded-full text-xs font-medium">
|
|
{account.type}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-emerald-600">{formatCurrency(account.balance)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{account.openDate}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{account.lastTransaction}</td>
|
|
<td className="py-3 px-4">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button onClick={() => handleEdit(account)} className="p-1 hover:bg-gray-100 rounded">
|
|
<Edit className="w-4 h-4 text-gray-500" />
|
|
</button>
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<Trash2 className="w-4 h-4 text-rose-500" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 계좌관리 - 등록/수정 */}
|
|
{selectedTab === 'fund' && selectedSubMenu === 'accounts' && (viewMode === 'create' || viewMode === 'edit') && (
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="bg-white rounded-xl p-8 border border-gray-200 shadow-sm">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-6">계좌 {viewMode === 'create' ? '등록' : '수정'}</h3>
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">은행명 *</label>
|
|
<input type="text" value={accountForm.bank} onChange={(e) => setAccountForm({...accountForm, bank: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
|
|
placeholder="예: 국민은행" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">계좌번호 *</label>
|
|
<input type="text" value={accountForm.accountNumber} onChange={(e) => setAccountForm({...accountForm, accountNumber: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
|
|
placeholder="123-456-789012" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">예금종류 *</label>
|
|
<select value={accountForm.type} onChange={(e) => setAccountForm({...accountForm, type: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
|
|
<option value="savings">보통예금</option>
|
|
<option value="checking">당좌예금</option>
|
|
<option value="fixed">정기예금</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">잔액 *</label>
|
|
<input type="number" value={accountForm.balance} onChange={(e) => setAccountForm({...accountForm, balance: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
|
|
placeholder="0" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">개설일자 *</label>
|
|
<input type="date" value={accountForm.openDate} onChange={(e) => setAccountForm({...accountForm, openDate: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 mt-8">
|
|
<button onClick={handleSave} className="flex items-center gap-2 px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-medium">
|
|
<Save className="w-4 h-4" />
|
|
저장
|
|
</button>
|
|
<button onClick={handleCancel} className="px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg font-medium">
|
|
취소
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 계좌거래내역 */}
|
|
{selectedTab === 'fund' && selectedSubMenu === 'account-transactions' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">금전출납부</h3>
|
|
<div className="flex items-center gap-3">
|
|
<input type="date" value={dateRange.start} onChange={(e) => setDateRange({ ...dateRange, start: e.target.value })}
|
|
className="px-4 py-2 border border-gray-300 rounded-lg text-sm" />
|
|
<span className="text-gray-500">~</span>
|
|
<input type="date" value={dateRange.end} onChange={(e) => setDateRange({ ...dateRange, end: e.target.value })}
|
|
className="px-4 py-2 border border-gray-300 rounded-lg text-sm" />
|
|
<button className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm">조회</button>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">일자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">시간</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">구분</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">적요</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">입금</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">출금</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">잔액</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">계좌</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{accountTransactionsData.map(tx => (
|
|
<tr key={tx.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm text-gray-600">{tx.date}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-500">{tx.time}</td>
|
|
<td className="py-3 px-4">
|
|
<span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${
|
|
tx.type === '입금' ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700'
|
|
}`}>
|
|
{tx.type}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{tx.description}</td>
|
|
<td className="py-3 px-4 text-sm text-right text-emerald-600 font-medium">
|
|
{tx.type === '입금' ? formatNumber(tx.amount) + '원' : '-'}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-right text-rose-600 font-medium">
|
|
{tx.type === '출금' ? formatNumber(tx.amount) + '원' : '-'}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-gray-900">{formatNumber(tx.balance)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{tx.account}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 자금계획일정 - 달력 */}
|
|
{selectedTab === 'fund' && selectedSubMenu === 'fund-schedule' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">자금 일정 달력</h3>
|
|
<input type="month" value={selectedMonth} onChange={(e) => setSelectedMonth(e.target.value)}
|
|
className="px-4 py-2 border border-gray-300 rounded-lg text-sm" />
|
|
</div>
|
|
<div className="border border-gray-200 rounded-lg overflow-hidden">
|
|
<div className="grid grid-cols-7 bg-gray-50 border-b border-gray-200">
|
|
{['일', '월', '화', '수', '목', '금', '토'].map(day => (
|
|
<div key={day} className="py-3 text-center text-sm font-semibold text-gray-700 border-r border-gray-200 last:border-r-0">
|
|
{day}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{generateCalendar(selectedMonth).map((week, weekIdx) => (
|
|
<div key={weekIdx} className="grid grid-cols-7 border-b border-gray-200 last:border-b-0">
|
|
{week.map((day, dayIdx) => {
|
|
const schedules = getScheduleForDate(day);
|
|
return (
|
|
<div key={dayIdx} className="min-h-[120px] p-2 border-r border-gray-200 last:border-r-0 bg-white hover:bg-gray-50">
|
|
{day && (
|
|
<>
|
|
<div className={`text-sm font-medium mb-2 ${dayIdx === 0 ? 'text-rose-600' : dayIdx === 6 ? 'text-blue-600' : 'text-gray-700'}`}>
|
|
{day}
|
|
</div>
|
|
<div className="space-y-1">
|
|
{schedules.map((schedule, idx) => (
|
|
<div key={idx} className={`text-xs p-1 rounded ${
|
|
schedule.type === 'income'
|
|
? 'bg-emerald-50 text-emerald-700 border-l-2 border-emerald-500'
|
|
: 'bg-rose-50 text-rose-700 border-l-2 border-rose-500'
|
|
}`}>
|
|
<div className="font-medium truncate">{schedule.title}</div>
|
|
<div className="font-semibold">{formatCurrency(schedule.amount)}원</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-6 flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-emerald-500 rounded"></div>
|
|
<span className="text-sm text-gray-700">입금 예정</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-rose-500 rounded"></div>
|
|
<span className="text-sm text-gray-700">지급 예정</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 일일자금일보 */}
|
|
{selectedTab === 'fund' && selectedSubMenu === 'daily-fund-report' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-8 border border-gray-200 shadow-sm">
|
|
<div className="text-center mb-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">일일 자금 일보</h2>
|
|
<p className="text-gray-600">2026년 1월 15일 (수)</p>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-6 mb-8">
|
|
<div className="bg-gray-50 rounded-xl p-6 text-center">
|
|
<p className="text-sm text-gray-600 mb-2">전일 잔액</p>
|
|
<p className="text-3xl font-bold text-gray-900">{formatCurrency(370000000)}원</p>
|
|
</div>
|
|
<div className="bg-emerald-50 rounded-xl p-6 text-center">
|
|
<p className="text-sm text-emerald-700 mb-2">금일 입금</p>
|
|
<p className="text-3xl font-bold text-emerald-600">{formatCurrency(80500000)}원</p>
|
|
</div>
|
|
<div className="bg-rose-50 rounded-xl p-6 text-center">
|
|
<p className="text-sm text-rose-700 mb-2">금일 출금</p>
|
|
<p className="text-3xl font-bold text-rose-600">{formatCurrency(2650000)}원</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-blue-50 rounded-xl p-8 border-2 border-blue-200 mb-8">
|
|
<div className="text-center">
|
|
<p className="text-sm text-blue-700 mb-2">금일 잔액</p>
|
|
<p className="text-4xl font-bold text-blue-600">{formatCurrency(450000000)}원</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<h3 className="font-bold text-gray-900 text-lg">상세 내역</h3>
|
|
<div className="border border-gray-200 rounded-lg overflow-hidden">
|
|
<div className="bg-emerald-50 px-4 py-2 border-b border-emerald-200">
|
|
<p className="font-semibold text-emerald-900">입금 내역</p>
|
|
</div>
|
|
<div className="p-4 space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-700">(주)제조산업 개발비 1차</span>
|
|
<span className="font-semibold text-emerald-600">80,000,000원</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-700">(주)테크솔루션 구독료</span>
|
|
<span className="font-semibold text-emerald-600">500,000원</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border border-gray-200 rounded-lg overflow-hidden">
|
|
<div className="bg-rose-50 px-4 py-2 border-b border-rose-200">
|
|
<p className="font-semibold text-rose-900">출금 내역</p>
|
|
</div>
|
|
<div className="p-4 space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-700">AWS 호스팅 비용</span>
|
|
<span className="font-semibold text-rose-600">2,500,000원</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-700">사무용품 구입</span>
|
|
<span className="font-semibold text-rose-600">150,000원</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center">
|
|
<div className="text-sm text-gray-600">
|
|
<p>작성일: 2026-01-15 18:00</p>
|
|
<p>작성자: 재무팀 김재무</p>
|
|
</div>
|
|
<button className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium">
|
|
<Send className="w-4 h-4" />
|
|
대표님께 보고
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 법인카드 등록/조회 */}
|
|
{selectedTab === 'card' && selectedSubMenu === 'card-list' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">법인카드 목록</h3>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-violet-600 hover:bg-violet-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
카드 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">카드번호</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">사용자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">카드사</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">출금계좌</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">출금일</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">한도</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">용도</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{corporateCardsData.map(card => (
|
|
<tr key={card.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm font-mono text-gray-900">{card.cardNumber}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{card.holder}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{card.bank}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{card.account}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{card.withdrawalDate}</td>
|
|
<td className="py-3 px-4 text-sm text-right font-semibold text-gray-900">{formatCurrency(card.limit)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{card.usage}</td>
|
|
<td className="py-3 px-4">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<Edit className="w-4 h-4 text-gray-500" />
|
|
</button>
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<Trash2 className="w-4 h-4 text-rose-500" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 법인카드 거래내역 */}
|
|
{selectedTab === 'card' && selectedSubMenu === 'card-transactions' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">법인카드 사용 내역</h3>
|
|
<div className="flex items-center gap-3">
|
|
<select className="px-4 py-2 border border-gray-300 rounded-lg text-sm">
|
|
<option>전체 카드</option>
|
|
<option>1234-****-5678</option>
|
|
<option>2345-****-6789</option>
|
|
</select>
|
|
<input type="date" value={dateRange.start} className="px-4 py-2 border border-gray-300 rounded-lg text-sm" />
|
|
<span>~</span>
|
|
<input type="date" value={dateRange.end} className="px-4 py-2 border border-gray-300 rounded-lg text-sm" />
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">일시</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">카드번호</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">사용자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">가맹점</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">구분</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">공급가액</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">부가세</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">공제</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{cardTransactionsData.map(tx => (
|
|
<tr key={tx.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm text-gray-600">{tx.date} {tx.time}</td>
|
|
<td className="py-3 px-4 text-sm font-mono text-gray-700">{tx.cardNumber}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{tx.holder}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{tx.merchant}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{tx.category}</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-900">{formatNumber(tx.amount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-600">{formatNumber(tx.vat)}원</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
tx.deductible ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
{tx.deductible ? '공제' : '불공'}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 수입관리 - 목록 */}
|
|
{selectedTab === 'income' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-4">
|
|
<h2 className="text-xl font-bold text-gray-900">수입 관리</h2>
|
|
<div className="flex items-center gap-2 bg-gray-100 rounded-lg p-1">
|
|
<button onClick={() => setIncomeSubTab('actual')}
|
|
className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
|
incomeSubTab === 'actual' ? 'bg-white text-emerald-700 shadow-sm' : 'text-gray-600 hover:text-gray-900'
|
|
}`}>
|
|
실제 수입
|
|
</button>
|
|
<button onClick={() => setIncomeSubTab('expected')}
|
|
className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
|
incomeSubTab === 'expected' ? 'bg-white text-blue-700 shadow-sm' : 'text-gray-600 hover:text-gray-900'
|
|
}`}>
|
|
예상 수입
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button onClick={handleCreate} className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
수입 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">일자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">구분</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">고객사</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">공급가액</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">부가세</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">합계</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">계좌</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">상태</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{incomeData[incomeSubTab].map(item => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.date}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.type}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.customer}</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-900">{formatNumber(item.amount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-600">{formatNumber(item.vat)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right font-semibold text-gray-900">{formatNumber(item.amount + item.vat)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.account}</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${
|
|
item.status === 'received' ? 'bg-emerald-50 text-emerald-700' : 'bg-blue-50 text-blue-700'
|
|
}`}>
|
|
{item.status === 'received' ? '입금완료' : '입금예정'}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button onClick={() => handleEdit(item)} className="p-1 hover:bg-gray-100 rounded">
|
|
<Edit className="w-4 h-4 text-gray-500" />
|
|
</button>
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<Trash2 className="w-4 h-4 text-rose-500" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr className="border-t-2 border-gray-300 bg-gray-50">
|
|
<td colSpan="3" className="py-3 px-4 text-sm font-bold text-gray-900">합계</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-gray-900">
|
|
{formatNumber(incomeData[incomeSubTab].reduce((sum, item) => sum + item.amount, 0))}원
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-gray-900">
|
|
{formatNumber(incomeData[incomeSubTab].reduce((sum, item) => sum + item.vat, 0))}원
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-emerald-600">
|
|
{formatNumber(incomeData[incomeSubTab].reduce((sum, item) => sum + item.amount + item.vat, 0))}원
|
|
</td>
|
|
<td colSpan="3"></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 지출관리 - 목록 */}
|
|
{selectedTab === 'expense' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-4">
|
|
<h2 className="text-xl font-bold text-gray-900">지출 관리</h2>
|
|
<div className="flex items-center gap-2 bg-gray-100 rounded-lg p-1">
|
|
<button onClick={() => setExpenseSubTab('actual')}
|
|
className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
|
expenseSubTab === 'actual' ? 'bg-white text-rose-700 shadow-sm' : 'text-gray-600 hover:text-gray-900'
|
|
}`}>
|
|
실제 지출
|
|
</button>
|
|
<button onClick={() => setExpenseSubTab('expected')}
|
|
className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
|
expenseSubTab === 'expected' ? 'bg-white text-amber-700 shadow-sm' : 'text-gray-600 hover:text-gray-900'
|
|
}`}>
|
|
예상 지출
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button onClick={handleCreate} className="flex items-center gap-2 px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
지출 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">일자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">구분</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">수취인</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">공급가액</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">부가세</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">합계</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">결제수단</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">상태</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{expenseData[expenseSubTab].map(item => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.date}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.type}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.payee}</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-900">{formatNumber(item.amount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-600">{formatNumber(item.vat)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right font-semibold text-gray-900">{formatNumber(item.amount + item.vat)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.account}</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${
|
|
item.status === 'paid' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'
|
|
}`}>
|
|
{item.status === 'paid' ? '지급완료' : '지급예정'}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button onClick={() => handleEdit(item)} className="p-1 hover:bg-gray-100 rounded">
|
|
<Edit className="w-4 h-4 text-gray-500" />
|
|
</button>
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<Trash2 className="w-4 h-4 text-rose-500" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr className="border-t-2 border-gray-300 bg-gray-50">
|
|
<td colSpan="3" className="py-3 px-4 text-sm font-bold text-gray-900">합계</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-gray-900">
|
|
{formatNumber(expenseData[expenseSubTab].reduce((sum, item) => sum + item.amount, 0))}원
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-gray-900">
|
|
{formatNumber(expenseData[expenseSubTab].reduce((sum, item) => sum + item.vat, 0))}원
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-rose-600">
|
|
{formatNumber(expenseData[expenseSubTab].reduce((sum, item) => sum + item.amount + item.vat, 0))}원
|
|
</td>
|
|
<td colSpan="3"></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 매출관리 - 목록 */}
|
|
{selectedTab === 'sales' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">매출 관리</h2>
|
|
<button onClick={handleCreate} className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
매출 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">일자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">고객사</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">상품/서비스</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">수량</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">단가</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">공급가액</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">부가세</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{salesData.map(item => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.date}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.customer}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.product}</td>
|
|
<td className="py-3 px-4 text-sm text-center text-gray-700">{item.quantity}</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-700">{formatNumber(item.unitPrice)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-900">{formatNumber(item.amount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-600">{formatNumber(item.vat)}원</td>
|
|
<td className="py-3 px-4">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button onClick={() => handleEdit(item)} className="p-1 hover:bg-gray-100 rounded">
|
|
<Edit className="w-4 h-4 text-gray-500" />
|
|
</button>
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<Trash2 className="w-4 h-4 text-rose-500" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr className="border-t-2 border-gray-300 bg-gray-50">
|
|
<td colSpan="5" className="py-3 px-4 text-sm font-bold text-gray-900">합계</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-gray-900">
|
|
{formatNumber(salesData.reduce((sum, item) => sum + item.amount, 0))}원
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-blue-600">
|
|
{formatNumber(salesData.reduce((sum, item) => sum + item.vat, 0))}원
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 매입관리 - 목록 */}
|
|
{selectedTab === 'purchase' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">매입 관리</h2>
|
|
<button onClick={handleCreate} className="flex items-center gap-2 px-4 py-2 bg-violet-600 hover:bg-violet-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
매입 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">일자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">거래처</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">품목</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">수량</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">단가</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">공급가액</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">부가세</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{purchaseData.map(item => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.date}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.supplier}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.item}</td>
|
|
<td className="py-3 px-4 text-sm text-center text-gray-700">{item.quantity}</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-700">{formatNumber(item.unitPrice)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-900">{formatNumber(item.amount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-600">{formatNumber(item.vat)}원</td>
|
|
<td className="py-3 px-4">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button onClick={() => handleEdit(item)} className="p-1 hover:bg-gray-100 rounded">
|
|
<Edit className="w-4 h-4 text-gray-500" />
|
|
</button>
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<Trash2 className="w-4 h-4 text-rose-500" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr className="border-t-2 border-gray-300 bg-gray-50">
|
|
<td colSpan="5" className="py-3 px-4 text-sm font-bold text-gray-900">합계</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-gray-900">
|
|
{formatNumber(purchaseData.reduce((sum, item) => sum + item.amount, 0))}원
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-violet-600">
|
|
{formatNumber(purchaseData.reduce((sum, item) => sum + item.vat, 0))}원
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 영업수수료 */}
|
|
{selectedTab === 'settlement' && selectedSubMenu === 'sales-commission' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">영업수수료 관리</h3>
|
|
<div className="text-right">
|
|
<p className="text-sm text-gray-600">2월 지급 예정 총액</p>
|
|
<p className="text-2xl font-bold text-violet-600">{formatCurrency(12800000)}원</p>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">영업파트너</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">역할</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">계약건수</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">수수료</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">원천징수</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">실지급액</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">지급일</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{salesCommissionData.map(item => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm font-medium text-gray-900">{item.partner}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.role}</td>
|
|
<td className="py-3 px-4 text-sm text-center text-gray-700">{item.contracts}건</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-900">{formatNumber(item.amount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-rose-600">-{formatNumber(item.tax)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-emerald-600">{formatNumber(item.netAmount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.paymentDate}</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<span className="px-2 py-1 bg-amber-50 text-amber-700 rounded-full text-xs font-medium">
|
|
지급예정
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 상담수수료 */}
|
|
{selectedTab === 'settlement' && selectedSubMenu === 'consultant-commission' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">상담수수료 관리</h3>
|
|
<div className="text-right">
|
|
<p className="text-sm text-gray-600">2월 지급 예정 총액</p>
|
|
<p className="text-2xl font-bold text-amber-600">{formatCurrency(14230000)}원</p>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">상담매니저</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">프로젝트</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">상담수수료</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">업무비</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">합계</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">원천징수</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">실지급액</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">지급일</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{consultantCommissionData.map(item => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm font-medium text-gray-900">{item.consultant}</td>
|
|
<td className="py-3 px-4 text-sm text-center text-gray-700">{item.projects}건</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-900">{formatNumber(item.commission)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-700">{formatNumber(item.expenses)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right font-semibold text-gray-900">{formatNumber(item.total)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-rose-600">-{formatNumber(item.tax)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right font-bold text-emerald-600">{formatNumber(item.netAmount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.paymentDate}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 고객사별 정산 */}
|
|
{selectedTab === 'settlement' && selectedSubMenu === 'customer-settlement' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-6">고객사별 정산 현황</h3>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">고객사</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">계약일</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">개발비</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">1차 납부</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">잔금</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">구독료</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">구독시작</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{customerSettlementData.map(item => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm font-medium text-gray-900">{item.customer}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.contract}</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-900">{formatCurrency(item.development)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-emerald-600">{formatCurrency(item.paid1st)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-amber-600">{formatCurrency(item.remaining)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-blue-600">{formatCurrency(item.subscription)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.subscriptionStart}</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
item.status === '구독중' ? 'bg-emerald-50 text-emerald-700' :
|
|
item.status === '진행중' ? 'bg-blue-50 text-blue-700' :
|
|
'bg-gray-100 text-gray-700'
|
|
}`}>
|
|
{item.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 구독관리 - 목록 (정산관리 안으로 이동) */}
|
|
{selectedTab === 'settlement' && selectedSubMenu === 'subscription' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">구독 고객사 목록</h3>
|
|
<button onClick={handleCreate} className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
구독 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">고객사</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">월 구독료</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">결제일</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">사용자수</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">시작일</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">자동갱신</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">상태</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{subscriptionData.map(sub => (
|
|
<tr key={sub.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm font-medium text-gray-900">{sub.customer}</td>
|
|
<td className="py-3 px-4 text-sm text-right font-semibold text-blue-600">{formatNumber(sub.monthlyFee)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">매월 {sub.billingDate}</td>
|
|
<td className="py-3 px-4 text-sm text-center text-gray-700">{sub.users}명</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{sub.startDate}</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
sub.autoRenewal ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
{sub.autoRenewal ? 'ON' : 'OFF'}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<span className="px-2 py-1 bg-emerald-50 text-emerald-700 rounded-full text-xs font-medium">활성</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button onClick={() => handleEdit(sub)} className="p-1 hover:bg-gray-100 rounded">
|
|
<Edit className="w-4 h-4 text-gray-500" />
|
|
</button>
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<Eye className="w-4 h-4 text-blue-500" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 구독관리 - 등록/수정 (정산관리 안으로 이동) */}
|
|
{selectedTab === 'settlement' && selectedSubMenu === 'subscription' && (viewMode === 'create' || viewMode === 'edit') && (
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="bg-white rounded-xl p-8 border border-gray-200 shadow-sm">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-6">구독 {viewMode === 'create' ? '등록' : '수정'}</h3>
|
|
<div className="space-y-6">
|
|
{/* 고객사 정보 */}
|
|
<div className="border-b border-gray-200 pb-6">
|
|
<h4 className="text-md font-semibold text-gray-800 mb-4">고객사 정보</h4>
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">고객사명 *</label>
|
|
<input type="text" value={subscriptionForm.customer}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, customer: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="(주)테크컴퍼니" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">사업자번호 *</label>
|
|
<input type="text" value={subscriptionForm.businessNumber}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, businessNumber: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="123-45-67890" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">대표자명 *</label>
|
|
<input type="text" value={subscriptionForm.representative}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, representative: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="홍길동" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">연락처 *</label>
|
|
<input type="tel" value={subscriptionForm.contact}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, contact: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="010-1234-5678" />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">이메일</label>
|
|
<input type="email" value={subscriptionForm.email}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, email: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="company@example.com" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 계약 내용 */}
|
|
<div className="border-b border-gray-200 pb-6">
|
|
<h4 className="text-md font-semibold text-gray-800 mb-4">계약 내용</h4>
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">계약일 *</label>
|
|
<input type="date" value={subscriptionForm.contractDate}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, contractDate: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">구독 시작일 *</label>
|
|
<input type="date" value={subscriptionForm.startDate}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, startDate: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">월 구독료 *</label>
|
|
<input type="number" value={subscriptionForm.monthlyFee}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, monthlyFee: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="500000" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">결제일 *</label>
|
|
<select value={subscriptionForm.billingDate}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, billingDate: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
{[...Array(28)].map((_, i) => (
|
|
<option key={i+1} value={i+1}>매월 {i+1}일</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">사용자 수 *</label>
|
|
<input type="number" value={subscriptionForm.users}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, users: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="10" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">계약 기간 (개월)</label>
|
|
<input type="number" value={subscriptionForm.contractPeriod}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, contractPeriod: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="12" />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">제공 기능</label>
|
|
<textarea value={subscriptionForm.features}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, features: e.target.value})}
|
|
rows={3}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="기본 기능, 고급 분석, API 연동 등" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 결제 정보 */}
|
|
<div className="border-b border-gray-200 pb-6">
|
|
<h4 className="text-md font-semibold text-gray-800 mb-4">결제 정보</h4>
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">결제 방법 *</label>
|
|
<select value={subscriptionForm.paymentMethod}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, paymentMethod: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
<option value="transfer">계좌이체</option>
|
|
<option value="cms">CMS 자동이체</option>
|
|
<option value="card">신용카드</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">상태 *</label>
|
|
<select value={subscriptionForm.status}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, status: e.target.value})}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
<option value="active">활성</option>
|
|
<option value="pending">대기</option>
|
|
<option value="suspended">중지</option>
|
|
<option value="cancelled">해지</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={subscriptionForm.autoRenewal}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, autoRenewal: e.target.checked})}
|
|
className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500" />
|
|
<span className="text-sm text-gray-700">자동 갱신</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 메모 */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">메모</label>
|
|
<textarea value={subscriptionForm.memo}
|
|
onChange={(e) => setSubscriptionForm({...subscriptionForm, memo: e.target.value})}
|
|
rows={4}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="추가 메모사항" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 mt-8">
|
|
<button onClick={handleSave} className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium">
|
|
<Save className="w-4 h-4" />
|
|
저장
|
|
</button>
|
|
<button onClick={handleCancel} className="px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg font-medium">
|
|
취소
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 법인차량 등록 */}
|
|
{selectedTab === 'vehicle' && selectedSubMenu === 'vehicle-list' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">법인차량 목록</h3>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
차량 등록
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{vehiclesData.map(vehicle => (
|
|
<div key={vehicle.id} className="bg-gray-50 rounded-xl p-6 border border-gray-200">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-blue-100 rounded-xl">
|
|
<Car className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-gray-900 text-lg">{vehicle.carNumber}</h4>
|
|
<p className="text-sm text-gray-600">{vehicle.model} ({vehicle.year}년식)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">용도</span>
|
|
<span className="text-gray-900">{vehicle.purpose}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">관리자</span>
|
|
<span className="text-gray-900">{vehicle.manager}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">보험</span>
|
|
<span className="text-gray-900">{vehicle.insurance}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">보험만기</span>
|
|
<span className="text-gray-900">{vehicle.insuranceExpiry}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">최근점검</span>
|
|
<span className="text-gray-900">{vehicle.maintenanceDate}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 mt-4">
|
|
<button className="flex-1 px-3 py-2 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg text-sm">
|
|
<Edit className="w-4 h-4 inline mr-1" />
|
|
수정
|
|
</button>
|
|
<button className="flex-1 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm">
|
|
유지비 조회
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 차량 유지비 */}
|
|
{selectedTab === 'vehicle' && selectedSubMenu === 'vehicle-expenses' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">차량 유지비 내역</h3>
|
|
<select className="px-4 py-2 border border-gray-300 rounded-lg text-sm">
|
|
<option>전체 차량</option>
|
|
<option>12가3456</option>
|
|
<option>23나4567</option>
|
|
</select>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">일자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">차량번호</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">구분</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">장소/업체</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">금액</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">사용자</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{vehicleExpensesData.map(expense => (
|
|
<tr key={expense.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm text-gray-600">{expense.date}</td>
|
|
<td className="py-3 px-4 text-sm font-medium text-gray-900">{expense.carNumber}</td>
|
|
<td className="py-3 px-4">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
expense.type === '주유' ? 'bg-blue-50 text-blue-700' : 'bg-amber-50 text-amber-700'
|
|
}`}>
|
|
{expense.type}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{expense.merchant}</td>
|
|
<td className="py-3 px-4 text-sm text-right font-semibold text-gray-900">{formatNumber(expense.amount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{expense.manager}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 고객사 관리 */}
|
|
{selectedTab === 'partner' && selectedSubMenu === 'customers' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">고객사 관리</h3>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
고객사 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">고객사명</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">사업자번호</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">대표자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">연락처</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">계약일</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">계약금액</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{customers.map(customer => (
|
|
<tr key={customer.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm font-medium text-gray-900">{customer.name}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{customer.businessNumber}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{customer.representative}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{customer.contact}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{customer.contractDate}</td>
|
|
<td className="py-3 px-4 text-sm text-right font-semibold text-gray-900">{formatCurrency(customer.contractAmount)}원</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
customer.status === 'active' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'
|
|
}`}>
|
|
{customer.status === 'active' ? '활성' : '대기'}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 일반 거래처 */}
|
|
{selectedTab === 'partner' && selectedSubMenu === 'suppliers' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">일반 거래처 관리</h3>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
거래처 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">거래처명</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">구분</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">사업자번호</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">연락처</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">담당자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">이메일</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{suppliersData.map(supplier => (
|
|
<tr key={supplier.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="py-3 px-4 text-sm font-medium text-gray-900">{supplier.name}</td>
|
|
<td className="py-3 px-4">
|
|
<span className="px-2 py-1 bg-blue-50 text-blue-700 rounded-full text-xs font-medium">
|
|
{supplier.type}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{supplier.businessNumber}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{supplier.contact}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{supplier.manager}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{supplier.email}</td>
|
|
<td className="py-3 px-4">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<Edit className="w-4 h-4 text-gray-500" />
|
|
</button>
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<Trash2 className="w-4 h-4 text-rose-500" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 미수금 */}
|
|
{selectedTab === 'receivables' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">미수금 관리</h2>
|
|
<div className="text-right">
|
|
<p className="text-sm text-gray-600">총 미수금</p>
|
|
<p className="text-2xl font-bold text-rose-600">{formatCurrency(31000000)}원</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{receivablesData.map(item => (
|
|
<div key={item.id} className="bg-gray-50 rounded-xl p-5 border border-gray-200">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<h3 className="font-bold text-gray-900">{item.customer}</h3>
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
item.status === 'overdue' ? 'bg-rose-50 text-rose-700' : 'bg-amber-50 text-amber-700'
|
|
}`}>
|
|
{item.status === 'overdue' ? `연체 D+${item.overdueDays}일` : '미납'}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-gray-600">{item.type}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-2xl font-bold text-rose-600">{formatCurrency(item.amount + item.vat)}원</p>
|
|
<p className="text-xs text-gray-500 mt-1">기한: {item.dueDate}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg text-sm">
|
|
<AlertCircle className="w-4 h-4" />
|
|
독촉 발송
|
|
</button>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-white hover:bg-gray-50 border border-gray-300 text-gray-700 rounded-lg text-sm">
|
|
<Eye className="w-4 h-4" />
|
|
상세보기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 미지급금 */}
|
|
{selectedTab === 'payables' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">미지급금 관리</h2>
|
|
<div className="text-right">
|
|
<p className="text-sm text-gray-600">총 미지급금</p>
|
|
<p className="text-2xl font-bold text-amber-600">{formatCurrency(3500000)}원</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{payablesData.map(item => (
|
|
<div key={item.id} className="bg-gray-50 rounded-xl p-5 border border-gray-200">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1">
|
|
<h3 className="font-bold text-gray-900 mb-2">{item.payee}</h3>
|
|
<p className="text-sm text-gray-600">{item.type}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-2xl font-bold text-amber-600">{formatCurrency(item.amount + item.vat)}원</p>
|
|
<p className="text-xs text-gray-500 mt-1">지급예정: {item.dueDate}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm">
|
|
<Check className="w-4 h-4" />
|
|
지급 처리
|
|
</button>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-white hover:bg-gray-50 border border-gray-300 text-gray-700 rounded-lg text-sm">
|
|
<Eye className="w-4 h-4" />
|
|
상세보기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 환불/해지 */}
|
|
{selectedTab === 'refund' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">환불/해지 관리</h2>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
환불 등록
|
|
</button>
|
|
</div>
|
|
<div className="space-y-4">
|
|
{refundData.map(item => (
|
|
<div key={item.id} className="bg-gray-50 rounded-xl p-5 border border-gray-200">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<h3 className="font-bold text-gray-900">{item.customer}</h3>
|
|
<span className="px-2 py-1 rounded-full text-xs font-medium bg-gray-200 text-gray-700">
|
|
{item.type}
|
|
</span>
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
item.status === 'completed' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'
|
|
}`}>
|
|
{item.status === 'completed' ? '환불완료' : '환불대기'}
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-gray-600">계약일: </span>
|
|
<span className="text-gray-900">{item.contractDate}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-600">환불일: </span>
|
|
<span className="text-gray-900">{item.refundDate}</span>
|
|
</div>
|
|
{item.progress && (
|
|
<>
|
|
<div>
|
|
<span className="text-gray-600">진행률: </span>
|
|
<span className="text-gray-900">{item.progress}%</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-600">환불율: </span>
|
|
<span className="text-gray-900">{item.refundRate}%</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
<div className="col-span-2">
|
|
<span className="text-gray-600">사유: </span>
|
|
<span className="text-gray-900">{item.reason}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-right ml-4">
|
|
<p className="text-sm text-gray-600">환불 금액</p>
|
|
<p className="text-2xl font-bold text-rose-600">{formatCurrency(item.refundAmount)}원</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-white hover:bg-gray-50 border border-gray-300 text-gray-700 rounded-lg text-sm">
|
|
<Eye className="w-4 h-4" />
|
|
상세보기
|
|
</button>
|
|
{item.status === 'pending' && (
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm">
|
|
<Check className="w-4 h-4" />
|
|
환불 승인
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 수입관리 - 상세보기 */}
|
|
{selectedTab === 'income' && viewMode === 'detail' && selectedItem && (
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="bg-white rounded-xl p-8 border border-gray-200 shadow-sm">
|
|
<h3 className="text-xl font-bold text-gray-900 mb-6">수입 상세 정보</h3>
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">일자</label>
|
|
<p className="text-lg text-gray-900">{selectedItem.date}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">구분</label>
|
|
<p className="text-lg text-gray-900">{selectedItem.type}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">고객사</label>
|
|
<p className="text-lg text-gray-900">{selectedItem.customer}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">계좌</label>
|
|
<p className="text-lg text-gray-900">{selectedItem.account}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">공급가액</label>
|
|
<p className="text-2xl font-bold text-gray-900">{formatNumber(selectedItem.amount)}원</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">부가세</label>
|
|
<p className="text-2xl font-bold text-gray-900">{formatNumber(selectedItem.vat)}원</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 mt-8">
|
|
<button onClick={handleBack} className="px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg font-medium">
|
|
목록으로
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 지출관리 - 목록 */}
|
|
{selectedTab === 'expense' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-4">
|
|
<h2 className="text-xl font-bold text-gray-900">지출 관리</h2>
|
|
<div className="flex items-center gap-2 bg-gray-100 rounded-lg p-1">
|
|
<button onClick={() => setExpenseSubTab('actual')}
|
|
className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
|
expenseSubTab === 'actual' ? 'bg-white text-rose-700 shadow-sm' : 'text-gray-600'
|
|
}`}>
|
|
실제 지출
|
|
</button>
|
|
<button onClick={() => setExpenseSubTab('expected')}
|
|
className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
|
expenseSubTab === 'expected' ? 'bg-white text-amber-700 shadow-sm' : 'text-gray-600'
|
|
}`}>
|
|
예상 지출
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button onClick={handleCreate} className="flex items-center gap-2 px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
지출 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">일자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">구분</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">수취인</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">금액</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">결제수단</th>
|
|
<th className="text-center py-3 px-4 text-sm font-semibold text-gray-700">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{expenseData[expenseSubTab]?.map(item => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50 cursor-pointer"
|
|
onClick={() => handleView(item)}>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.date}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.type}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.payee}</td>
|
|
<td className="py-3 px-4 text-sm text-right font-semibold text-gray-900">{formatNumber(item.amount + item.vat)}원</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.account}</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${
|
|
item.status === 'paid' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'
|
|
}`}>
|
|
{item.status === 'paid' ? '지급완료' : '지급예정'}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 매출관리 - 목록 */}
|
|
{selectedTab === 'sales' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">매출 관리</h2>
|
|
<button onClick={handleCreate} className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
매출 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">일자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">고객사</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">상품/서비스</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">공급가액</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">부가세</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{salesData.map(item => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50 cursor-pointer"
|
|
onClick={() => handleView(item)}>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.date}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.customer}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.product}</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-900">{formatNumber(item.amount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-600">{formatNumber(item.vat)}원</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 매입관리 - 목록 */}
|
|
{selectedTab === 'purchase' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">매입 관리</h2>
|
|
<button onClick={handleCreate} className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium">
|
|
<Plus className="w-4 h-4" />
|
|
매입 등록
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">일자</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">공급업체</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">품목</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">공급가액</th>
|
|
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">부가세</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{purchaseData.map(item => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50 cursor-pointer"
|
|
onClick={() => handleView(item)}>
|
|
<td className="py-3 px-4 text-sm text-gray-600">{item.date}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.supplier}</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900">{item.item}</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-900">{formatNumber(item.amount)}원</td>
|
|
<td className="py-3 px-4 text-sm text-right text-gray-600">{formatNumber(item.vat)}원</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 미수금 */}
|
|
{selectedTab === 'receivables' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">미수금 관리</h2>
|
|
<div className="text-right">
|
|
<p className="text-sm text-gray-600">총 미수금</p>
|
|
<p className="text-2xl font-bold text-rose-600">31,000,000원</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{receivablesData.map(item => (
|
|
<div key={item.id} className="bg-gray-50 rounded-xl p-5 border border-gray-200">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<h3 className="font-bold text-gray-900">{item.customer}</h3>
|
|
{item.status === 'overdue' && (
|
|
<span className="px-2 py-1 rounded-full text-xs font-medium bg-rose-50 text-rose-700">
|
|
연체 D+{item.overdueDays}일
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-600">{item.type}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-2xl font-bold text-rose-600">{formatNumber(item.amount + item.vat)}원</p>
|
|
<p className="text-xs text-gray-500 mt-1">기한: {item.dueDate}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg text-sm">
|
|
<AlertCircle className="w-4 h-4" />
|
|
독촉 발송
|
|
</button>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-white hover:bg-gray-50 border border-gray-300 text-gray-700 rounded-lg text-sm">
|
|
<Eye className="w-4 h-4" />
|
|
상세보기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 미지급금 */}
|
|
{selectedTab === 'payables' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">미지급금 관리</h2>
|
|
<div className="text-right">
|
|
<p className="text-sm text-gray-600">총 미지급금</p>
|
|
<p className="text-2xl font-bold text-amber-600">3,500,000원</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{payablesData.map(item => (
|
|
<div key={item.id} className="bg-gray-50 rounded-xl p-5 border border-gray-200">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1">
|
|
<h3 className="font-bold text-gray-900 mb-2">{item.payee}</h3>
|
|
<p className="text-sm text-gray-600">{item.type}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-2xl font-bold text-amber-600">{formatNumber(item.amount + item.vat)}원</p>
|
|
<p className="text-xs text-gray-500 mt-1">지급예정: {item.dueDate}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm">
|
|
<Check className="w-4 h-4" />
|
|
지급 처리
|
|
</button>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-white hover:bg-gray-50 border border-gray-300 text-gray-700 rounded-lg text-sm">
|
|
<Eye className="w-4 h-4" />
|
|
상세보기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 환불/해지 */}
|
|
{selectedTab === 'refund' && viewMode === 'list' && (
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-6">환불/해지 관리</h2>
|
|
<div className="space-y-4">
|
|
{refundData.map(item => (
|
|
<div key={item.id} className="bg-gray-50 rounded-xl p-6 border border-gray-200">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h3 className="font-bold text-gray-900 mb-1">{item.customer}</h3>
|
|
<p className="text-sm text-gray-600">{item.type} • 계약일: {item.contractDate}</p>
|
|
</div>
|
|
<span className={`px-3 py-1 rounded-full text-xs font-medium ${
|
|
item.status === 'completed' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'
|
|
}`}>
|
|
{item.status === 'completed' ? '처리완료' : '처리중'}
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-4 text-sm">
|
|
<div>
|
|
<p className="text-gray-600 mb-1">환불금액</p>
|
|
<p className="font-bold text-rose-600">{formatNumber(item.refundAmount)}원</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-gray-600 mb-1">환불일</p>
|
|
<p className="font-bold text-gray-900">{item.refundDate}</p>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<p className="text-gray-600 mb-1">사유</p>
|
|
<p className="text-sm text-gray-900">{item.reason}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 부가세 */}
|
|
{selectedTab === 'vat' && viewMode === 'list' && (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="bg-white rounded-xl p-6 border border-emerald-200 shadow-sm">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-4">매출 부가세</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-600">과세 매출액</span>
|
|
<span className="text-lg font-bold text-gray-900">{formatCurrency(vatSummary.sales.taxable)}원</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-600">부가세</span>
|
|
<span className="text-lg font-bold text-emerald-600">+{formatCurrency(vatSummary.sales.vat)}원</span>
|
|
</div>
|
|
<div className="pt-3 border-t border-emerald-100">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-gray-700">합계</span>
|
|
<span className="text-xl font-bold text-gray-900">{formatCurrency(vatSummary.sales.total)}원</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-6 border border-blue-200 shadow-sm">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-4">매입 부가세</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-600">과세 매입액</span>
|
|
<span className="text-lg font-bold text-gray-900">{formatCurrency(vatSummary.purchase.taxable)}원</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-600">부가세</span>
|
|
<span className="text-lg font-bold text-blue-600">-{formatCurrency(vatSummary.purchase.vat)}원</span>
|
|
</div>
|
|
<div className="pt-3 border-t border-blue-100">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-gray-700">합계</span>
|
|
<span className="text-xl font-bold text-gray-900">{formatCurrency(vatSummary.purchase.total)}원</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-6 border border-violet-200 shadow-sm">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-4">카드 매입 부가세</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-emerald-600 font-medium">공제 가능</span>
|
|
<span className="text-lg font-bold text-gray-900">{formatCurrency(vatSummary.card.deductible)}원</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-500">불공제</span>
|
|
<span className="text-lg font-bold text-gray-500">{formatCurrency(vatSummary.card.nonDeductible)}원</span>
|
|
</div>
|
|
<div className="pt-3 border-t border-violet-100">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-gray-700">총 사용액</span>
|
|
<span className="text-xl font-bold text-gray-900">{formatCurrency(vatSummary.card.total)}원</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<h3 className="text-xl font-bold text-gray-900 mb-6">부가세 신고 요약 (2026년 1월)</h3>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between p-4 bg-emerald-50 rounded-xl border border-emerald-100">
|
|
<span className="text-gray-700 font-medium">매출세액</span>
|
|
<span className="text-xl font-bold text-emerald-600">+{formatCurrency(vatSummary.sales.vat)}원</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-4 bg-blue-50 rounded-xl border border-blue-100">
|
|
<span className="text-gray-700 font-medium">매입세액</span>
|
|
<span className="text-xl font-bold text-blue-600">-{formatCurrency(vatSummary.purchase.vat)}원</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-4 bg-violet-50 rounded-xl border border-violet-100">
|
|
<span className="text-gray-700 font-medium">카드 공제</span>
|
|
<span className="text-xl font-bold text-violet-600">-{formatCurrency(vatSummary.card.deductible)}원</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-6 bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl border-2 border-amber-200">
|
|
<div>
|
|
<span className="text-gray-900 font-bold text-lg">납부할 부가세</span>
|
|
<p className="text-sm text-gray-600 mt-1">4월 10일 신고 기한</p>
|
|
</div>
|
|
<span className="text-3xl font-bold text-amber-600">{formatCurrency(vatSummary.payable)}원</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 bg-amber-50 border border-amber-200 rounded-xl">
|
|
<div className="flex items-start gap-3">
|
|
<AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
|
|
<div className="text-sm text-amber-900">
|
|
<p className="font-semibold mb-1">세무사무소 확인 필요 항목</p>
|
|
<ul className="space-y-1 text-amber-800">
|
|
<li>• 법인카드 불공제 항목 확인</li>
|
|
<li>• 애매한 항목은 불공으로 처리하여 리스크 방지</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
|
<h3 className="text-xl font-bold text-gray-900 mb-6">2026년 부가세 신고·납부 일정</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{vatSchedule.map((schedule, idx) => (
|
|
<div key={idx} className={`p-4 rounded-lg border-2 ${
|
|
schedule.status === 'upcoming' ? 'bg-amber-50 border-amber-300' : 'bg-gray-50 border-gray-200'
|
|
}`}>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="font-bold text-gray-900">{schedule.period}</span>
|
|
{schedule.status === 'upcoming' && (
|
|
<span className="px-2 py-1 bg-amber-500 text-white rounded-full text-xs font-medium">다가옴</span>
|
|
)}
|
|
</div>
|
|
<div className="text-sm text-gray-600 mb-1">대상: {schedule.months}</div>
|
|
<div className="text-sm font-semibold text-gray-900">마감: {schedule.deadline}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
const container = document.getElementById('root');
|
|
const root = ReactDOM.createRoot(container);
|
|
root.render(<FinanceManagementSystem />);
|
|
</script>
|
|
</body>
|
|
</html>
|