338 lines
24 KiB
PHP
338 lines
24 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '미지급금 관리')
|
|
|
|
@push('styles')
|
|
<style>
|
|
@media print { .no-print { display: none !important; } }
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div id="payables-root"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
|
|
<script src="https://unpkg.com/lucide@latest?v={{ time() }}"></script>
|
|
@verbatim
|
|
<script type="text/babel">
|
|
const { useState, useRef, useEffect } = React;
|
|
|
|
const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
|
|
const ref = useRef(null);
|
|
useEffect(() => {
|
|
if (ref.current && lucide.icons[name]) {
|
|
ref.current.innerHTML = '';
|
|
const svg = lucide.createElement(lucide.icons[name]);
|
|
svg.setAttribute('class', className);
|
|
ref.current.appendChild(svg);
|
|
}
|
|
}, [className]);
|
|
return <span ref={ref} className="inline-flex items-center" {...props} />;
|
|
};
|
|
|
|
const CreditCard = createIcon('credit-card');
|
|
const Plus = createIcon('plus');
|
|
const Search = createIcon('search');
|
|
const Download = createIcon('download');
|
|
const X = createIcon('x');
|
|
const Edit = createIcon('edit');
|
|
const Trash2 = createIcon('trash-2');
|
|
const Banknote = createIcon('banknote');
|
|
const AlertTriangle = createIcon('alert-triangle');
|
|
const CheckCircle = createIcon('check-circle');
|
|
const Clock = createIcon('clock');
|
|
const RefreshCw = createIcon('refresh-cw');
|
|
|
|
function PayablesManagement() {
|
|
const [payables, setPayables] = useState([
|
|
{ id: 1, vendorName: '(주)오피스월드', invoiceNo: 'PO-2026-0123', issueDate: '2026-01-10', dueDate: '2026-01-25', amount: 3500000, paidAmount: 0, status: 'unpaid', category: '사무용품', description: '1월 사무용품 구매' },
|
|
{ id: 2, vendorName: 'IT솔루션즈', invoiceNo: 'PO-2026-0118', issueDate: '2026-01-05', dueDate: '2026-01-20', amount: 12000000, paidAmount: 6000000, status: 'partial', category: '소프트웨어', description: 'ERP 라이선스' },
|
|
{ id: 3, vendorName: '클라우드서비스', invoiceNo: 'PO-2025-0956', issueDate: '2025-12-20', dueDate: '2026-01-05', amount: 8500000, paidAmount: 8500000, status: 'paid', category: '서비스', description: '12월 클라우드 서비스' },
|
|
{ id: 4, vendorName: '인테리어프로', invoiceNo: 'PO-2025-0912', issueDate: '2025-12-01', dueDate: '2025-12-20', amount: 25000000, paidAmount: 0, status: 'overdue', category: '시설', description: '사무실 리모델링' },
|
|
{ id: 5, vendorName: '보안시스템', invoiceNo: 'PO-2026-0128', issueDate: '2026-01-15', dueDate: '2026-01-30', amount: 4800000, paidAmount: 0, status: 'unpaid', category: '장비', description: '보안 장비 구매' },
|
|
]);
|
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [filterStatus, setFilterStatus] = useState('all');
|
|
const [filterCategory, setFilterCategory] = useState('all');
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [modalMode, setModalMode] = useState('add');
|
|
const [editingItem, setEditingItem] = useState(null);
|
|
|
|
const [showPayModal, setShowPayModal] = useState(false);
|
|
const [payingItem, setPayingItem] = useState(null);
|
|
const [payAmount, setPayAmount] = useState('');
|
|
const [payDate, setPayDate] = useState('');
|
|
|
|
const categories = ['사무용품', '소프트웨어', '서비스', '시설', '장비', '외주', '기타'];
|
|
|
|
const initialFormState = {
|
|
vendorName: '',
|
|
invoiceNo: '',
|
|
issueDate: new Date().toISOString().split('T')[0],
|
|
dueDate: '',
|
|
amount: '',
|
|
paidAmount: 0,
|
|
status: 'unpaid',
|
|
category: '사무용품',
|
|
description: ''
|
|
};
|
|
const [formData, setFormData] = useState(initialFormState);
|
|
|
|
const formatCurrency = (num) => num ? num.toLocaleString() : '0';
|
|
const formatInputCurrency = (value) => {
|
|
if (!value && value !== 0) return '';
|
|
const num = String(value).replace(/[^\d]/g, '');
|
|
return num ? Number(num).toLocaleString() : '';
|
|
};
|
|
const parseInputCurrency = (value) => String(value).replace(/[^\d]/g, '');
|
|
|
|
const calculateOverdueDays = (dueDate) => {
|
|
if (!dueDate) return 0;
|
|
const today = new Date();
|
|
const due = new Date(dueDate);
|
|
const diff = Math.floor((today - due) / (1000 * 60 * 60 * 24));
|
|
return diff > 0 ? diff : 0;
|
|
};
|
|
|
|
const filteredPayables = payables.filter(item => {
|
|
const matchesSearch = item.vendorName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
item.invoiceNo.toLowerCase().includes(searchTerm.toLowerCase());
|
|
const matchesStatus = filterStatus === 'all' || item.status === filterStatus;
|
|
const matchesCategory = filterCategory === 'all' || item.category === filterCategory;
|
|
return matchesSearch && matchesStatus && matchesCategory;
|
|
});
|
|
|
|
const totalAmount = payables.reduce((sum, item) => sum + item.amount, 0);
|
|
const totalPaid = payables.reduce((sum, item) => sum + item.paidAmount, 0);
|
|
const totalUnpaid = totalAmount - totalPaid;
|
|
const overdueAmount = payables.filter(i => i.status === 'overdue').reduce((sum, item) => sum + (item.amount - item.paidAmount), 0);
|
|
|
|
const handleAdd = () => { setModalMode('add'); setFormData(initialFormState); setShowModal(true); };
|
|
const handleEdit = (item) => { setModalMode('edit'); setEditingItem(item); setFormData({ ...item }); setShowModal(true); };
|
|
const handleSave = () => {
|
|
if (!formData.vendorName || !formData.invoiceNo || !formData.amount) { alert('필수 항목을 입력해주세요.'); return; }
|
|
if (modalMode === 'add') {
|
|
setPayables(prev => [{ id: Date.now(), ...formData, amount: parseInt(formData.amount) || 0, paidAmount: 0 }, ...prev]);
|
|
} else {
|
|
setPayables(prev => prev.map(item => item.id === editingItem.id ? { ...item, ...formData, amount: parseInt(formData.amount) || 0 } : item));
|
|
}
|
|
setShowModal(false); setEditingItem(null);
|
|
};
|
|
const handleDelete = (id) => { if (confirm('정말 삭제하시겠습니까?')) { setPayables(prev => prev.filter(item => item.id !== id)); setShowModal(false); } };
|
|
|
|
const handlePay = (item) => {
|
|
setPayingItem(item);
|
|
setPayAmount('');
|
|
setPayDate(new Date().toISOString().split('T')[0]);
|
|
setShowPayModal(true);
|
|
};
|
|
|
|
const processPayment = () => {
|
|
const amount = parseInt(parseInputCurrency(payAmount)) || 0;
|
|
if (amount <= 0) { alert('지급액을 입력해주세요.'); return; }
|
|
const remaining = payingItem.amount - payingItem.paidAmount;
|
|
if (amount > remaining) { alert('지급액이 잔액을 초과합니다.'); return; }
|
|
|
|
setPayables(prev => prev.map(item => {
|
|
if (item.id === payingItem.id) {
|
|
const newPaid = item.paidAmount + amount;
|
|
const newStatus = newPaid >= item.amount ? 'paid' : 'partial';
|
|
return { ...item, paidAmount: newPaid, status: newStatus };
|
|
}
|
|
return item;
|
|
}));
|
|
setShowPayModal(false);
|
|
setPayingItem(null);
|
|
};
|
|
|
|
const handleDownload = () => {
|
|
const rows = [['미지급금 관리'], [], ['거래처', '청구서번호', '발행일', '만기일', '분류', '청구금액', '지급액', '잔액', '상태'],
|
|
...filteredPayables.map(item => [item.vendorName, item.invoiceNo, item.issueDate, item.dueDate, item.category, item.amount, item.paidAmount, item.amount - item.paidAmount, getStatusLabel(item.status)])];
|
|
const csvContent = rows.map(row => row.join(',')).join('\n');
|
|
const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
|
const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `미지급금관리_${new Date().toISOString().split('T')[0]}.csv`; link.click();
|
|
};
|
|
|
|
const getStatusLabel = (status) => {
|
|
const labels = { 'unpaid': '미지급', 'partial': '부분지급', 'paid': '지급완료', 'overdue': '연체' };
|
|
return labels[status] || status;
|
|
};
|
|
|
|
const getStatusStyle = (status) => {
|
|
const styles = {
|
|
'unpaid': 'bg-amber-100 text-amber-700',
|
|
'partial': 'bg-blue-100 text-blue-700',
|
|
'paid': 'bg-emerald-100 text-emerald-700',
|
|
'overdue': 'bg-red-100 text-red-700'
|
|
};
|
|
return styles[status] || 'bg-gray-100 text-gray-700';
|
|
};
|
|
|
|
return (
|
|
<div className="bg-gray-50 min-h-screen">
|
|
<header className="bg-white border-b border-gray-200 rounded-t-xl mb-6">
|
|
<div className="px-6 py-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-2 bg-rose-100 rounded-xl"><CreditCard className="w-6 h-6 text-rose-600" /></div>
|
|
<div><h1 className="text-xl font-bold text-gray-900">미지급금 관리</h1><p className="text-sm text-gray-500">Accounts Payable</p></div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button onClick={handleDownload} className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"><Download className="w-4 h-4" /><span className="text-sm">Excel</span></button>
|
|
<button onClick={handleAdd} className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg"><Plus className="w-4 h-4" /><span className="text-sm font-medium">미지급금 등록</span></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-gray-500">총 채무액</span><CreditCard className="w-5 h-5 text-gray-400" /></div>
|
|
<p className="text-2xl font-bold text-gray-900">{formatCurrency(totalAmount)}원</p>
|
|
<p className="text-xs text-gray-400 mt-1">{payables.length}건</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-amber-200 p-6 bg-amber-50/30">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-amber-700">미지급잔액</span><Clock className="w-5 h-5 text-amber-500" /></div>
|
|
<p className="text-2xl font-bold text-amber-600">{formatCurrency(totalUnpaid)}원</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-red-200 p-6 bg-red-50/30">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-red-700">연체금액</span><AlertTriangle className="w-5 h-5 text-red-500" /></div>
|
|
<p className="text-2xl font-bold text-red-600">{formatCurrency(overdueAmount)}원</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-emerald-200 p-6 bg-emerald-50/30">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-emerald-700">지급완료</span><CheckCircle className="w-5 h-5 text-emerald-500" /></div>
|
|
<p className="text-2xl font-bold text-emerald-600">{formatCurrency(totalPaid)}원</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 p-4 mb-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
|
<div className="md:col-span-2 relative">
|
|
<Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
|
|
<input type="text" placeholder="거래처, 청구서번호 검색..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500" />
|
|
</div>
|
|
<select value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg">
|
|
<option value="all">전체 분류</option>
|
|
{categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
|
|
</select>
|
|
<div className="flex gap-1">
|
|
{['all', 'unpaid', 'partial', 'overdue', 'paid'].map(status => (
|
|
<button key={status} onClick={() => setFilterStatus(status)} className={`flex-1 px-2 py-2 rounded-lg text-xs font-medium ${filterStatus === status ? (status === 'paid' ? 'bg-green-600 text-white' : status === 'overdue' ? 'bg-red-600 text-white' : status === 'partial' ? 'bg-blue-600 text-white' : status === 'unpaid' ? 'bg-yellow-500 text-white' : 'bg-gray-800 text-white') : 'bg-gray-100 text-gray-700'}`}>
|
|
{status === 'all' ? '전체' : getStatusLabel(status)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button onClick={() => { setSearchTerm(''); setFilterStatus('all'); setFilterCategory('all'); }} className="flex items-center justify-center gap-2 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">
|
|
<RefreshCw className="w-4 h-4" /><span className="text-sm">초기화</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50 border-b border-gray-200">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">거래처</th>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">청구서번호</th>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">만기일</th>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">분류</th>
|
|
<th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">청구금액</th>
|
|
<th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">잔액</th>
|
|
<th className="px-6 py-3 text-center text-xs font-semibold text-gray-600">상태</th>
|
|
<th className="px-6 py-3 text-center text-xs font-semibold text-gray-600">연체일</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100">
|
|
{filteredPayables.length === 0 ? (
|
|
<tr><td colSpan="8" className="px-6 py-12 text-center text-gray-400">데이터가 없습니다.</td></tr>
|
|
) : filteredPayables.map(item => (
|
|
<tr key={item.id} onClick={() => handleEdit(item)} className={`hover:bg-gray-50 cursor-pointer ${item.status === 'overdue' ? 'bg-red-50/50' : ''}`}>
|
|
<td className="px-6 py-4"><p className="text-sm font-medium text-gray-900">{item.vendorName}</p><p className="text-xs text-gray-400">{item.description}</p></td>
|
|
<td className="px-6 py-4 text-sm text-gray-600">{item.invoiceNo}</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600">{item.dueDate}</td>
|
|
<td className="px-6 py-4"><span className="px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-700">{item.category}</span></td>
|
|
<td className="px-6 py-4 text-sm font-medium text-right text-gray-900">{formatCurrency(item.amount)}원</td>
|
|
<td className="px-6 py-4 text-sm font-bold text-right text-rose-600">{formatCurrency(item.amount - item.paidAmount)}원</td>
|
|
<td className="px-6 py-4 text-center"><span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusStyle(item.status)}`}>{getStatusLabel(item.status)}</span></td>
|
|
<td className="px-6 py-4 text-center text-sm">{item.status === 'overdue' ? <span className="text-red-600 font-medium">{calculateOverdueDays(item.dueDate)}일</span> : '-'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{showModal && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl p-6 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">{modalMode === 'add' ? '미지급금 등록' : '미지급금 수정'}</h3>
|
|
<button onClick={() => setShowModal(false)} className="p-1 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-500" /></button>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">거래처 *</label><input type="text" value={formData.vendorName} onChange={(e) => setFormData(prev => ({ ...prev, vendorName: e.target.value }))} placeholder="거래처명" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">청구서번호 *</label><input type="text" value={formData.invoiceNo} onChange={(e) => setFormData(prev => ({ ...prev, invoiceNo: e.target.value }))} placeholder="PO-2026-001" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">발행일</label><input type="date" value={formData.issueDate} onChange={(e) => setFormData(prev => ({ ...prev, issueDate: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">만기일</label><input type="date" value={formData.dueDate} onChange={(e) => setFormData(prev => ({ ...prev, dueDate: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">분류</label><select value={formData.category} onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">{categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}</select></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">청구금액 *</label><input type="text" value={formatInputCurrency(formData.amount)} onChange={(e) => setFormData(prev => ({ ...prev, amount: parseInputCurrency(e.target.value) }))} placeholder="0" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right" /></div>
|
|
</div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">적요</label><input type="text" value={formData.description} onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))} placeholder="적요 입력" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
{modalMode === 'edit' && (
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">상태</label><select value={formData.status} onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg"><option value="unpaid">미지급</option><option value="partial">부분지급</option><option value="paid">지급완료</option><option value="overdue">연체</option></select></div>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-3 mt-6">
|
|
{modalMode === 'edit' && <button onClick={() => handleDelete(editingItem.id)} className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg">삭제</button>}
|
|
<button onClick={() => setShowModal(false)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">취소</button>
|
|
<button onClick={handleSave} className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">{modalMode === 'add' ? '등록' : '저장'}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showPayModal && payingItem && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">지급 처리</h3>
|
|
<button onClick={() => setShowPayModal(false)} className="p-1 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-500" /></button>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
|
<p className="font-medium text-gray-900">{payingItem.vendorName}</p>
|
|
<p className="text-sm text-gray-500">{payingItem.invoiceNo}</p>
|
|
<div className="mt-3 space-y-1 text-sm">
|
|
<div className="flex justify-between"><span className="text-gray-500">청구금액</span><span>{formatCurrency(payingItem.amount)}원</span></div>
|
|
<div className="flex justify-between"><span className="text-gray-500">기지급액</span><span>{formatCurrency(payingItem.paidAmount)}원</span></div>
|
|
<div className="flex justify-between font-bold"><span className="text-rose-600">잔액</span><span className="text-rose-600">{formatCurrency(payingItem.amount - payingItem.paidAmount)}원</span></div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">지급일</label><input type="date" value={payDate} onChange={(e) => setPayDate(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">지급액 *</label><input type="text" value={formatInputCurrency(payAmount)} onChange={(e) => setPayAmount(parseInputCurrency(e.target.value))} placeholder="0" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right" /></div>
|
|
</div>
|
|
<div className="flex gap-3 mt-6">
|
|
<button onClick={() => setShowPayModal(false)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">취소</button>
|
|
<button onClick={processPayment} className="flex-1 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg">지급 처리</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const rootElement = document.getElementById('payables-root');
|
|
if (rootElement) { ReactDOM.createRoot(rootElement).render(<PayablesManagement />); }
|
|
</script>
|
|
@endverbatim
|
|
@endpush
|