diff --git a/app/Http/Controllers/Finance/PayableController.php b/app/Http/Controllers/Finance/PayableController.php
index c7d6fa3b..ac979710 100644
--- a/app/Http/Controllers/Finance/PayableController.php
+++ b/app/Http/Controllers/Finance/PayableController.php
@@ -3,9 +3,12 @@
 namespace App\Http\Controllers\Finance;
 
 use App\Http\Controllers\Controller;
+use App\Models\Barobill\HometaxInvoiceJournal;
+use App\Models\Finance\JournalEntryLine;
 use App\Models\Finance\Payable;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
 
 class PayableController extends Controller
 {
@@ -180,4 +183,252 @@ public function destroy(int $id): JsonResponse
             'message' => '미지급금이 삭제되었습니다.',
         ]);
     }
+
+    /**
+     * 통합 잔액 조회: 홈택스 발생 + 일반전표 상계를 거래처별로 집계
+     */
+    public function integrated(Request $request): JsonResponse
+    {
+        $tenantId = session('selected_tenant_id', 1);
+        $startDate = $request->input('startDate', date('Y-01-01'));
+        $endDate = $request->input('endDate', date('Y-12-31'));
+        $account = $request->input('account', 'all');
+        $vendor = $request->input('vendor', '');
+
+        $accountCodes = $account === 'all' ? ['204', '205'] : [$account];
+
+        // 1. 홈택스 매입세금계산서 - 대변(미지급금 발생)
+        $hometaxQuery = HometaxInvoiceJournal::where('tenant_id', $tenantId)
+            ->whereIn('account_code', $accountCodes)
+            ->where('dc_type', 'credit')
+            ->where('credit_amount', '>', 0)
+            ->whereBetween('write_date', [$startDate, $endDate]);
+
+        if ($vendor) {
+            $hometaxQuery->where('trading_partner_name', 'like', "%{$vendor}%");
+        }
+
+        $hometaxGrouped = (clone $hometaxQuery)
+            ->select(
+                'trading_partner_name',
+                'account_code',
+                'account_name',
+                DB::raw('SUM(credit_amount) as total_credit'),
+                DB::raw('COUNT(*) as cnt'),
+                DB::raw('MIN(write_date) as first_date'),
+                DB::raw('MAX(write_date) as last_date')
+            )
+            ->groupBy('trading_partner_name', 'account_code', 'account_name')
+            ->orderByDesc('total_credit')
+            ->get();
+
+        $hometaxDetails = (clone $hometaxQuery)
+            ->select('id', 'trading_partner_name', 'account_code', 'account_name', 'credit_amount', 'write_date', 'description', 'nts_confirm_num')
+            ->orderByDesc('write_date')
+            ->get();
+
+        // 2. 일반전표 - 계정 204/205 차변(상계) + 대변(전표를 통한 발생)
+        $journalQuery = JournalEntryLine::where('journal_entry_lines.tenant_id', $tenantId)
+            ->whereIn('journal_entry_lines.account_code', $accountCodes)
+            ->join('journal_entries', function ($join) {
+                $join->on('journal_entries.id', '=', 'journal_entry_lines.journal_entry_id')
+                    ->whereNull('journal_entries.deleted_at');
+            })
+            ->whereBetween('journal_entries.entry_date', [$startDate, $endDate]);
+
+        if ($vendor) {
+            $journalQuery->where('journal_entry_lines.trading_partner_name', 'like', "%{$vendor}%");
+        }
+
+        $journalGrouped = (clone $journalQuery)
+            ->select(
+                'journal_entry_lines.trading_partner_name',
+                'journal_entry_lines.account_code',
+                'journal_entry_lines.account_name',
+                'journal_entry_lines.dc_type',
+                DB::raw('SUM(journal_entry_lines.debit_amount) as total_debit'),
+                DB::raw('SUM(journal_entry_lines.credit_amount) as total_credit'),
+                DB::raw('COUNT(*) as cnt')
+            )
+            ->groupBy('journal_entry_lines.trading_partner_name', 'journal_entry_lines.account_code', 'journal_entry_lines.account_name', 'journal_entry_lines.dc_type')
+            ->orderByDesc('total_debit')
+            ->get();
+
+        $journalDetails = (clone $journalQuery)
+            ->select(
+                'journal_entry_lines.id',
+                'journal_entry_lines.trading_partner_name',
+                'journal_entry_lines.account_code',
+                'journal_entry_lines.account_name',
+                'journal_entry_lines.dc_type',
+                'journal_entry_lines.debit_amount',
+                'journal_entry_lines.credit_amount',
+                'journal_entry_lines.description',
+                'journal_entries.entry_date',
+                'journal_entries.entry_no'
+            )
+            ->orderByDesc('journal_entries.entry_date')
+            ->get();
+
+        // 3. 거래처별 잔액 계산
+        $vendorMap = [];
+
+        // 홈택스 대변 = 발생
+        foreach ($hometaxGrouped as $row) {
+            $key = $row->trading_partner_name.'|'.$row->account_code;
+            if (! isset($vendorMap[$key])) {
+                $vendorMap[$key] = [
+                    'vendorName' => $row->trading_partner_name,
+                    'accountCode' => $row->account_code,
+                    'accountName' => $row->account_name,
+                    'occurred' => 0,
+                    'offset' => 0,
+                    'hometaxCount' => 0,
+                    'journalDebitCount' => 0,
+                    'journalCreditCount' => 0,
+                ];
+            }
+            $vendorMap[$key]['occurred'] += $row->total_credit;
+            $vendorMap[$key]['hometaxCount'] += $row->cnt;
+        }
+
+        // 일반전표 차변 = 상계, 대변 = 발생
+        foreach ($journalGrouped as $row) {
+            $key = $row->trading_partner_name.'|'.$row->account_code;
+            if (! isset($vendorMap[$key])) {
+                $vendorMap[$key] = [
+                    'vendorName' => $row->trading_partner_name,
+                    'accountCode' => $row->account_code,
+                    'accountName' => $row->account_name,
+                    'occurred' => 0,
+                    'offset' => 0,
+                    'hometaxCount' => 0,
+                    'journalDebitCount' => 0,
+                    'journalCreditCount' => 0,
+                ];
+            }
+            if ($row->dc_type === 'debit') {
+                $vendorMap[$key]['offset'] += $row->total_debit;
+                $vendorMap[$key]['journalDebitCount'] += $row->cnt;
+            } else {
+                $vendorMap[$key]['occurred'] += $row->total_credit;
+                $vendorMap[$key]['journalCreditCount'] += $row->cnt;
+            }
+        }
+
+        // 잔액 계산 및 정렬
+        $byVendor = collect($vendorMap)->map(function ($item) {
+            $item['balance'] = $item['occurred'] - $item['offset'];
+
+            return $item;
+        })->sortByDesc('balance')->values()->all();
+
+        // 4. 요약 통계
+        $totalOccurred = array_sum(array_column($byVendor, 'occurred'));
+        $totalOffset = array_sum(array_column($byVendor, 'offset'));
+
+        return response()->json([
+            'success' => true,
+            'data' => [
+                'summary' => [
+                    'totalOccurred' => $totalOccurred,
+                    'totalOffset' => $totalOffset,
+                    'totalBalance' => $totalOccurred - $totalOffset,
+                    'hometaxCount' => $hometaxDetails->count(),
+                    'journalCount' => $journalDetails->count(),
+                    'vendorCount' => count($byVendor),
+                ],
+                'byVendor' => $byVendor,
+                'hometaxDetails' => $hometaxDetails,
+                'journalDetails' => $journalDetails,
+            ],
+        ]);
+    }
+
+    /**
+     * 홈택스 매입세금계산서 미지급금/미지급비용 대변 내역
+     */
+    public function hometaxPayables(Request $request): JsonResponse
+    {
+        $tenantId = session('selected_tenant_id', 1);
+        $startDate = $request->input('startDate', date('Y-01-01'));
+        $endDate = $request->input('endDate', date('Y-12-31'));
+        $account = $request->input('account', 'all');
+
+        $accountCodes = $account === 'all' ? ['204', '205'] : [$account];
+
+        $items = HometaxInvoiceJournal::where('tenant_id', $tenantId)
+            ->whereIn('account_code', $accountCodes)
+            ->where('dc_type', 'credit')
+            ->where('credit_amount', '>', 0)
+            ->whereBetween('write_date', [$startDate, $endDate])
+            ->select('id', 'trading_partner_name', 'account_code', 'account_name', 'credit_amount', 'write_date', 'description', 'nts_confirm_num', 'supply_amount', 'tax_amount', 'total_amount')
+            ->orderByDesc('write_date')
+            ->get();
+
+        $totalCredit = $items->sum('credit_amount');
+
+        return response()->json([
+            'success' => true,
+            'data' => $items,
+            'summary' => [
+                'totalCredit' => $totalCredit,
+                'count' => $items->count(),
+            ],
+        ]);
+    }
+
+    /**
+     * 일반전표 미지급금/미지급비용 내역 (차변=상계, 대변=발생)
+     */
+    public function journalPayables(Request $request): JsonResponse
+    {
+        $tenantId = session('selected_tenant_id', 1);
+        $startDate = $request->input('startDate', date('Y-01-01'));
+        $endDate = $request->input('endDate', date('Y-12-31'));
+        $account = $request->input('account', 'all');
+        $dcType = $request->input('dcType', 'all');
+
+        $accountCodes = $account === 'all' ? ['204', '205'] : [$account];
+
+        $query = JournalEntryLine::where('journal_entry_lines.tenant_id', $tenantId)
+            ->whereIn('journal_entry_lines.account_code', $accountCodes)
+            ->join('journal_entries', function ($join) {
+                $join->on('journal_entries.id', '=', 'journal_entry_lines.journal_entry_id')
+                    ->whereNull('journal_entries.deleted_at');
+            })
+            ->whereBetween('journal_entries.entry_date', [$startDate, $endDate]);
+
+        if ($dcType !== 'all') {
+            $query->where('journal_entry_lines.dc_type', $dcType);
+        }
+
+        $items = $query->select(
+            'journal_entry_lines.id',
+            'journal_entry_lines.trading_partner_name',
+            'journal_entry_lines.account_code',
+            'journal_entry_lines.account_name',
+            'journal_entry_lines.dc_type',
+            'journal_entry_lines.debit_amount',
+            'journal_entry_lines.credit_amount',
+            'journal_entry_lines.description',
+            'journal_entries.entry_date',
+            'journal_entries.entry_no'
+        )
+            ->orderByDesc('journal_entries.entry_date')
+            ->get();
+
+        $totalDebit = $items->sum('debit_amount');
+        $totalCredit = $items->sum('credit_amount');
+
+        return response()->json([
+            'success' => true,
+            'data' => $items,
+            'summary' => [
+                'totalDebit' => $totalDebit,
+                'totalCredit' => $totalCredit,
+                'count' => $items->count(),
+            ],
+        ]);
+    }
 }
diff --git a/resources/views/finance/payables.blade.php b/resources/views/finance/payables.blade.php
index 9803acab..b4bb36cd 100644
--- a/resources/views/finance/payables.blade.php
+++ b/resources/views/finance/payables.blade.php
@@ -18,7 +18,7 @@
 <script src="https://unpkg.com/lucide@latest?v={{ time() }}"></script>
 @verbatim
 <script type="text/babel">
-const { useState, useRef, useEffect } = React;
+const { useState, useRef, useEffect, useCallback } = React;
 
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
@@ -46,8 +46,396 @@
 const CheckCircle = createIcon('check-circle');
 const Clock = createIcon('clock');
 const RefreshCw = createIcon('refresh-cw');
+const FileText = createIcon('file-text');
+const ArrowRight = createIcon('arrow-right');
+const ChevronDown = createIcon('chevron-down');
+const ChevronUp = createIcon('chevron-up');
+const Building = createIcon('building');
+const TrendingUp = createIcon('trending-up');
+const TrendingDown = createIcon('trending-down');
+const Layers = createIcon('layers');
 
-function PayablesManagement() {
+const formatCurrency = (num) => num ? Number(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, '');
+
+// =============================================
+// 통합 잔액 탭
+// =============================================
+function IntegratedTab({ startDate, endDate, account, vendorSearch }) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [expandedVendor, setExpandedVendor] = useState(null);
+
+    const fetchData = useCallback(async () => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams({ startDate, endDate, account, vendor: vendorSearch });
+            const res = await fetch(`/finance/payables/integrated?${params}`);
+            const json = await res.json();
+            if (json.success) setData(json.data);
+        } catch (err) {
+            console.error('통합 잔액 조회 실패:', err);
+        } finally {
+            setLoading(false);
+        }
+    }, [startDate, endDate, account, vendorSearch]);
+
+    useEffect(() => { fetchData(); }, [fetchData]);
+
+    if (loading) return <LoadingSpinner />;
+    if (!data) return <EmptyState message="데이터를 불러올 수 없습니다." />;
+
+    const { summary, byVendor, hometaxDetails, journalDetails } = data;
+
+    return (
+        <div>
+            {/* 통계 카드 */}
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+                <div className="bg-white rounded-xl border border-blue-200 p-5">
+                    <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm text-blue-700">발생합계</span>
+                        <TrendingUp className="w-5 h-5 text-blue-500" />
+                    </div>
+                    <p className="text-2xl font-bold text-blue-600">{formatCurrency(summary.totalOccurred)}원</p>
+                    <p className="text-xs text-gray-400 mt-1">홈택스 {summary.hometaxCount}건 + 전표대변</p>
+                </div>
+                <div className="bg-white rounded-xl border border-emerald-200 p-5">
+                    <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm text-emerald-700">상계합계</span>
+                        <TrendingDown className="w-5 h-5 text-emerald-500" />
+                    </div>
+                    <p className="text-2xl font-bold text-emerald-600">{formatCurrency(summary.totalOffset)}원</p>
+                    <p className="text-xs text-gray-400 mt-1">일반전표 차변 {summary.journalCount}건</p>
+                </div>
+                <div className="bg-white rounded-xl border border-rose-200 p-5">
+                    <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm text-rose-700">미지급잔액</span>
+                        <CreditCard className="w-5 h-5 text-rose-500" />
+                    </div>
+                    <p className={`text-2xl font-bold ${summary.totalBalance >= 0 ? 'text-rose-600' : 'text-blue-600'}`}>
+                        {summary.totalBalance < 0 && '-'}{formatCurrency(Math.abs(summary.totalBalance))}원
+                    </p>
+                    <p className="text-xs text-gray-400 mt-1">발생 - 상계</p>
+                </div>
+                <div className="bg-white rounded-xl border border-gray-200 p-5">
+                    <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm text-gray-600">거래처수</span>
+                        <Building className="w-5 h-5 text-gray-400" />
+                    </div>
+                    <p className="text-2xl font-bold text-gray-900">{summary.vendorCount}곳</p>
+                    <p className="text-xs text-gray-400 mt-1">미지급금 발생 거래처</p>
+                </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-center text-xs font-semibold text-gray-600">계정</th>
+                            <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">발생액</th>
+                            <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">상계액</th>
+                            <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">잔액</th>
+                            <th className="px-6 py-3 text-center text-xs font-semibold text-gray-600">건수</th>
+                            <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">
+                        {byVendor.length === 0 ? (
+                            <tr><td colSpan="7" className="px-6 py-12 text-center text-gray-400">데이터가 없습니다.</td></tr>
+                        ) : byVendor.map((v, idx) => {
+                            const vendorKey = `${v.vendorName}|${v.accountCode}`;
+                            const isExpanded = expandedVendor === vendorKey;
+                            const vendorHometax = hometaxDetails.filter(h => h.trading_partner_name === v.vendorName && h.account_code === v.accountCode);
+                            const vendorJournals = journalDetails.filter(j => j.trading_partner_name === v.vendorName && j.account_code === v.accountCode);
+
+                            return (
+                                <React.Fragment key={idx}>
+                                    <tr className="hover:bg-gray-50 cursor-pointer" onClick={() => setExpandedVendor(isExpanded ? null : vendorKey)}>
+                                        <td className="px-6 py-4">
+                                            <p className="text-sm font-medium text-gray-900">{v.vendorName || '(거래처 미지정)'}</p>
+                                        </td>
+                                        <td className="px-6 py-4 text-center">
+                                            <span className={`px-2 py-1 rounded text-xs font-medium ${v.accountCode === '204' ? 'bg-purple-100 text-purple-700' : 'bg-indigo-100 text-indigo-700'}`}>
+                                                {v.accountCode === '204' ? '미지급금' : '미지급비용'}
+                                            </span>
+                                        </td>
+                                        <td className="px-6 py-4 text-sm font-medium text-right text-blue-600">{formatCurrency(v.occurred)}원</td>
+                                        <td className="px-6 py-4 text-sm font-medium text-right text-emerald-600">{formatCurrency(v.offset)}원</td>
+                                        <td className="px-6 py-4 text-sm font-bold text-right">
+                                            <span className={v.balance > 0 ? 'text-rose-600' : v.balance < 0 ? 'text-blue-600' : 'text-gray-400'}>
+                                                {v.balance < 0 && '-'}{formatCurrency(Math.abs(v.balance))}원
+                                            </span>
+                                        </td>
+                                        <td className="px-6 py-4 text-center text-xs text-gray-500">
+                                            홈택스 {v.hometaxCount} / 전표 {v.journalDebitCount + v.journalCreditCount}
+                                        </td>
+                                        <td className="px-6 py-4 text-center">
+                                            {isExpanded ? <ChevronUp className="w-4 h-4 text-gray-400" /> : <ChevronDown className="w-4 h-4 text-gray-400" />}
+                                        </td>
+                                    </tr>
+                                    {isExpanded && (
+                                        <tr>
+                                            <td colSpan="7" className="px-6 py-4 bg-gray-50">
+                                                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                                                    {/* 홈택스 발생 내역 */}
+                                                    <div>
+                                                        <h4 className="text-xs font-semibold text-blue-700 mb-2 flex items-center gap-1">
+                                                            <FileText className="w-3 h-3" /> 홈택스 발생 ({vendorHometax.length}건)
+                                                        </h4>
+                                                        {vendorHometax.length === 0 ? (
+                                                            <p className="text-xs text-gray-400">내역 없음</p>
+                                                        ) : (
+                                                            <div className="space-y-1">
+                                                                {vendorHometax.map((h, i) => (
+                                                                    <div key={i} className="flex items-center justify-between text-xs bg-white rounded px-3 py-2 border border-gray-100">
+                                                                        <div>
+                                                                            <span className="text-gray-500">{h.write_date?.substring(0, 10)}</span>
+                                                                            {h.description && <span className="text-gray-600 ml-2">{h.description}</span>}
+                                                                        </div>
+                                                                        <span className="font-medium text-blue-600">{formatCurrency(h.credit_amount)}원</span>
+                                                                    </div>
+                                                                ))}
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                    {/* 일반전표 상계 내역 */}
+                                                    <div>
+                                                        <h4 className="text-xs font-semibold text-emerald-700 mb-2 flex items-center gap-1">
+                                                            <Layers className="w-3 h-3" /> 일반전표 ({vendorJournals.length}건)
+                                                        </h4>
+                                                        {vendorJournals.length === 0 ? (
+                                                            <p className="text-xs text-gray-400">내역 없음</p>
+                                                        ) : (
+                                                            <div className="space-y-1">
+                                                                {vendorJournals.map((j, i) => (
+                                                                    <div key={i} className="flex items-center justify-between text-xs bg-white rounded px-3 py-2 border border-gray-100">
+                                                                        <div>
+                                                                            <span className="text-gray-500">{j.entry_date?.substring(0, 10)}</span>
+                                                                            <span className="text-gray-400 ml-1">{j.entry_no}</span>
+                                                                            <span className={`ml-2 px-1 rounded ${j.dc_type === 'debit' ? 'bg-emerald-50 text-emerald-600' : 'bg-blue-50 text-blue-600'}`}>
+                                                                                {j.dc_type === 'debit' ? '차변(상계)' : '대변(발생)'}
+                                                                            </span>
+                                                                        </div>
+                                                                        <span className={`font-medium ${j.dc_type === 'debit' ? 'text-emerald-600' : 'text-blue-600'}`}>
+                                                                            {formatCurrency(j.dc_type === 'debit' ? j.debit_amount : j.credit_amount)}원
+                                                                        </span>
+                                                                    </div>
+                                                                ))}
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    )}
+                                </React.Fragment>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+
+// =============================================
+// 홈택스 발생 탭
+// =============================================
+function HometaxTab({ startDate, endDate, account }) {
+    const [items, setItems] = useState([]);
+    const [summary, setSummary] = useState({ totalCredit: 0, count: 0 });
+    const [loading, setLoading] = useState(true);
+
+    const fetchData = useCallback(async () => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams({ startDate, endDate, account });
+            const res = await fetch(`/finance/payables/hometax?${params}`);
+            const json = await res.json();
+            if (json.success) {
+                setItems(json.data);
+                setSummary(json.summary);
+            }
+        } catch (err) {
+            console.error('홈택스 데이터 조회 실패:', err);
+        } finally {
+            setLoading(false);
+        }
+    }, [startDate, endDate, account]);
+
+    useEffect(() => { fetchData(); }, [fetchData]);
+
+    if (loading) return <LoadingSpinner />;
+
+    return (
+        <div>
+            <div className="bg-white rounded-xl border border-blue-200 p-5 mb-6">
+                <div className="flex items-center justify-between">
+                    <div>
+                        <p className="text-sm text-blue-700 mb-1">홈택스 매입세금계산서 미지급금 발생 합계</p>
+                        <p className="text-2xl font-bold text-blue-600">{formatCurrency(summary.totalCredit)}원</p>
+                    </div>
+                    <div className="text-right">
+                        <p className="text-sm text-gray-500">총 건수</p>
+                        <p className="text-2xl font-bold text-gray-700">{summary.count}건</p>
+                    </div>
+                </div>
+            </div>
+
+            <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+                <table className="w-full">
+                    <thead className="bg-gray-50 border-b border-gray-200">
+                        <tr>
+                            <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">작성일</th>
+                            <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">거래처</th>
+                            <th className="px-6 py-3 text-center text-xs font-semibold text-gray-600">계정</th>
+                            <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">공급가액</th>
+                            <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">세액</th>
+                            <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">미지급금액</th>
+                            <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">적요</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100">
+                        {items.length === 0 ? (
+                            <tr><td colSpan="7" className="px-6 py-12 text-center text-gray-400">데이터가 없습니다.</td></tr>
+                        ) : items.map((item, idx) => (
+                            <tr key={idx} className="hover:bg-gray-50">
+                                <td className="px-6 py-3 text-sm text-gray-600">{item.write_date?.substring(0, 10)}</td>
+                                <td className="px-6 py-3 text-sm font-medium text-gray-900">{item.trading_partner_name || '-'}</td>
+                                <td className="px-6 py-3 text-center">
+                                    <span className={`px-2 py-1 rounded text-xs font-medium ${item.account_code === '204' ? 'bg-purple-100 text-purple-700' : 'bg-indigo-100 text-indigo-700'}`}>
+                                        {item.account_name}
+                                    </span>
+                                </td>
+                                <td className="px-6 py-3 text-sm text-right text-gray-600">{formatCurrency(item.supply_amount)}원</td>
+                                <td className="px-6 py-3 text-sm text-right text-gray-600">{formatCurrency(item.tax_amount)}원</td>
+                                <td className="px-6 py-3 text-sm font-medium text-right text-blue-600">{formatCurrency(item.credit_amount)}원</td>
+                                <td className="px-6 py-3 text-sm text-gray-500 truncate" style={{maxWidth: '200px'}}>{item.description || '-'}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+
+// =============================================
+// 일반전표 상계 탭
+// =============================================
+function JournalTab({ startDate, endDate, account }) {
+    const [items, setItems] = useState([]);
+    const [summary, setSummary] = useState({ totalDebit: 0, totalCredit: 0, count: 0 });
+    const [loading, setLoading] = useState(true);
+    const [dcFilter, setDcFilter] = useState('all');
+
+    const fetchData = useCallback(async () => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams({ startDate, endDate, account, dcType: dcFilter });
+            const res = await fetch(`/finance/payables/journals?${params}`);
+            const json = await res.json();
+            if (json.success) {
+                setItems(json.data);
+                setSummary(json.summary);
+            }
+        } catch (err) {
+            console.error('일반전표 데이터 조회 실패:', err);
+        } finally {
+            setLoading(false);
+        }
+    }, [startDate, endDate, account, dcFilter]);
+
+    useEffect(() => { fetchData(); }, [fetchData]);
+
+    if (loading) return <LoadingSpinner />;
+
+    return (
+        <div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div className="bg-white rounded-xl border border-emerald-200 p-5">
+                    <p className="text-sm text-emerald-700 mb-1">차변 합계 (상계/지급)</p>
+                    <p className="text-2xl font-bold text-emerald-600">{formatCurrency(summary.totalDebit)}원</p>
+                </div>
+                <div className="bg-white rounded-xl border border-blue-200 p-5">
+                    <p className="text-sm text-blue-700 mb-1">대변 합계 (전표 발생)</p>
+                    <p className="text-2xl font-bold text-blue-600">{formatCurrency(summary.totalCredit)}원</p>
+                </div>
+                <div className="bg-white rounded-xl border border-gray-200 p-5">
+                    <p className="text-sm text-gray-600 mb-1">총 건수</p>
+                    <p className="text-2xl font-bold text-gray-700">{summary.count}건</p>
+                </div>
+            </div>
+
+            {/* 차변/대변 필터 */}
+            <div className="flex gap-2 mb-4">
+                {['all', 'debit', 'credit'].map(type => (
+                    <button key={type} onClick={() => setDcFilter(type)}
+                        className={`px-4 py-2 rounded-lg text-sm font-medium ${dcFilter === type
+                            ? (type === 'debit' ? 'bg-emerald-600 text-white' : type === 'credit' ? 'bg-blue-600 text-white' : 'bg-gray-800 text-white')
+                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>
+                        {type === 'all' ? '전체' : type === 'debit' ? '차변 (상계)' : '대변 (발생)'}
+                    </button>
+                ))}
+            </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-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>
+                            <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600">금액</th>
+                            <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">적요</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100">
+                        {items.length === 0 ? (
+                            <tr><td colSpan="7" className="px-6 py-12 text-center text-gray-400">데이터가 없습니다.</td></tr>
+                        ) : items.map((item, idx) => (
+                            <tr key={idx} className="hover:bg-gray-50">
+                                <td className="px-6 py-3 text-sm text-gray-600">{item.entry_date?.substring(0, 10)}</td>
+                                <td className="px-6 py-3 text-sm text-gray-500">{item.entry_no}</td>
+                                <td className="px-6 py-3 text-sm font-medium text-gray-900">{item.trading_partner_name || '-'}</td>
+                                <td className="px-6 py-3 text-center">
+                                    <span className={`px-2 py-1 rounded text-xs font-medium ${item.account_code === '204' ? 'bg-purple-100 text-purple-700' : 'bg-indigo-100 text-indigo-700'}`}>
+                                        {item.account_name}
+                                    </span>
+                                </td>
+                                <td className="px-6 py-3 text-center">
+                                    <span className={`px-2 py-1 rounded text-xs font-medium ${item.dc_type === 'debit' ? 'bg-emerald-100 text-emerald-700' : 'bg-blue-100 text-blue-700'}`}>
+                                        {item.dc_type === 'debit' ? '차변' : '대변'}
+                                    </span>
+                                </td>
+                                <td className="px-6 py-3 text-sm font-medium text-right">
+                                    <span className={item.dc_type === 'debit' ? 'text-emerald-600' : 'text-blue-600'}>
+                                        {formatCurrency(item.dc_type === 'debit' ? item.debit_amount : item.credit_amount)}원
+                                    </span>
+                                </td>
+                                <td className="px-6 py-3 text-sm text-gray-500 truncate" style={{maxWidth: '200px'}}>{item.description || '-'}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+
+// =============================================
+// 수동 관리 탭 (기존 CRUD)
+// =============================================
+function ManualTab() {
     const [payables, setPayables] = useState([]);
     const [stats, setStats] = useState({ totalAmount: 0, totalPaid: 0, totalUnpaid: 0, overdueAmount: 0, count: 0 });
     const [loading, setLoading] = useState(true);
@@ -71,33 +459,15 @@ function PayablesManagement() {
     const categories = ['사무용품', '소프트웨어', '서비스', '시설', '장비', '외주', '기타'];
 
     const initialFormState = {
-        vendorName: '',
-        invoiceNo: '',
-        issueDate: new Date().toISOString().split('T')[0],
-        dueDate: '',
-        amount: '',
-        paidAmount: 0,
-        status: 'unpaid',
-        category: '사무용품',
-        description: '',
-        memo: '',
-        taxInvoiceIssued: false
+        vendorName: '', invoiceNo: '', issueDate: new Date().toISOString().split('T')[0],
+        dueDate: '', amount: '', paidAmount: 0, status: 'unpaid', category: '사무용품',
+        description: '', memo: '', taxInvoiceIssued: false
     };
     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));
+        const diff = Math.floor((new Date() - new Date(dueDate)) / (1000 * 60 * 60 * 24));
         return diff > 0 ? diff : 0;
     };
 
@@ -106,15 +476,9 @@ function PayablesManagement() {
         try {
             const res = await fetch('/finance/payables/list');
             const data = await res.json();
-            if (data.success) {
-                setPayables(data.data);
-                setStats(data.stats);
-            }
-        } catch (err) {
-            console.error('미지급금 조회 실패:', err);
-        } finally {
-            setLoading(false);
-        }
+            if (data.success) { setPayables(data.data); setStats(data.stats); }
+        } catch (err) { console.error('미지급금 조회 실패:', err); }
+        finally { setLoading(false); }
     };
 
     useEffect(() => { fetchPayables(); }, []);
@@ -128,12 +492,10 @@ function PayablesManagement() {
 
     const handleAdd = () => { setModalMode('add'); setFormData(initialFormState); setShowModal(true); };
     const handleEdit = (item) => {
-        setModalMode('edit');
-        setEditingItem(item);
+        setModalMode('edit'); setEditingItem(item);
         const safeItem = {};
         Object.keys(initialFormState).forEach(key => { safeItem[key] = item[key] ?? (key === 'taxInvoiceIssued' ? false : ''); });
-        setFormData(safeItem);
-        setShowModal(true);
+        setFormData(safeItem); setShowModal(true);
     };
     const handleSave = async () => {
         if (!formData.vendorName || !formData.amount) { alert('필수 항목을 입력해주세요.'); return; }
@@ -141,158 +503,97 @@ function PayablesManagement() {
         try {
             const url = modalMode === 'add' ? '/finance/payables/store' : `/finance/payables/${editingItem.id}`;
             const body = { ...formData, amount: parseInt(formData.amount) || 0 };
-            const res = await fetch(url, {
-                method: modalMode === 'add' ? 'POST' : 'PUT',
-                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
-                body: JSON.stringify(body),
-            });
+            const res = await fetch(url, { method: modalMode === 'add' ? 'POST' : 'PUT', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }, body: JSON.stringify(body) });
             const data = await res.json();
-            if (!res.ok) {
-                const errors = data.errors ? Object.values(data.errors).flat().join('\n') : data.message;
-                alert(errors || '저장에 실패했습니다.');
-                return;
-            }
-            setShowModal(false);
-            setEditingItem(null);
-            fetchPayables();
-        } catch (err) {
-            console.error('저장 실패:', err);
-            alert('저장에 실패했습니다.');
-        } finally {
-            setSaving(false);
-        }
+            if (!res.ok) { alert(data.errors ? Object.values(data.errors).flat().join('\n') : data.message || '저장에 실패했습니다.'); return; }
+            setShowModal(false); setEditingItem(null); fetchPayables();
+        } catch (err) { console.error('저장 실패:', err); alert('저장에 실패했습니다.'); }
+        finally { setSaving(false); }
     };
     const handleDelete = async (id) => {
         if (!confirm('정말 삭제하시겠습니까?')) return;
         try {
-            const res = await fetch(`/finance/payables/${id}`, {
-                method: 'DELETE',
-                headers: { 'X-CSRF-TOKEN': csrfToken },
-            });
-            if (res.ok) {
-                setShowModal(false);
-                fetchPayables();
-            }
-        } catch (err) {
-            console.error('삭제 실패:', err);
-            alert('삭제에 실패했습니다.');
-        }
+            const res = await fetch(`/finance/payables/${id}`, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrfToken } });
+            if (res.ok) { setShowModal(false); fetchPayables(); }
+        } catch (err) { console.error('삭제 실패:', err); alert('삭제에 실패했습니다.'); }
     };
-
-    const handlePay = (item) => {
-        setPayingItem(item);
-        setPayAmount('');
-        setPayDate(new Date().toISOString().split('T')[0]);
-        setShowPayModal(true);
-    };
-
+    const handlePay = (item) => { setPayingItem(item); setPayAmount(''); setPayDate(new Date().toISOString().split('T')[0]); setShowPayModal(true); };
     const processPayment = async () => {
         const amount = parseInt(parseInputCurrency(payAmount)) || 0;
         if (amount <= 0) { alert('지급액을 입력해주세요.'); return; }
         const remaining = payingItem.amount - payingItem.paidAmount;
         if (amount > remaining) { alert('지급액이 잔액을 초과합니다.'); return; }
-
         try {
-            const res = await fetch(`/finance/payables/${payingItem.id}/pay`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
-                body: JSON.stringify({ payAmount: amount }),
-            });
+            const res = await fetch(`/finance/payables/${payingItem.id}/pay`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }, body: JSON.stringify({ payAmount: amount }) });
             const data = await res.json();
-            if (!res.ok) {
-                alert(data.message || '지급 처리에 실패했습니다.');
-                return;
-            }
-            setShowPayModal(false);
-            setPayingItem(null);
-            fetchPayables();
-        } catch (err) {
-            console.error('지급 처리 실패:', err);
-            alert('지급 처리에 실패했습니다.');
-        }
+            if (!res.ok) { alert(data.message || '지급 처리에 실패했습니다.'); return; }
+            setShowPayModal(false); setPayingItem(null); fetchPayables();
+        } catch (err) { console.error('지급 처리 실패:', err); alert('지급 처리에 실패했습니다.'); }
     };
 
+    const getStatusLabel = (status) => ({ 'unpaid': '미지급', 'partial': '부분지급', 'paid': '지급완료', 'overdue': '연체' }[status] || status);
+    const getStatusStyle = (status) => ({ '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' }[status] || 'bg-gray-100 text-gray-700');
+
     const handleDownload = () => {
-        const rows = [['미지급금 관리'], [], ['거래처', '거래일자', '결제예정일', '분류', '청구금액', '지급액', '잔액', '상태', '세금계산서'],
+        const rows = [['미지급금 관리(수동)'], [], ['거래처', '거래일자', '결제예정일', '분류', '청구금액', '지급액', '잔액', '상태', '세금계산서'],
             ...filteredPayables.map(item => [item.vendorName, item.issueDate, item.dueDate, item.category, item.amount, item.paidAmount, item.amount - item.paidAmount, getStatusLabel(item.status), item.taxInvoiceIssued ? 'O' : 'X'])];
         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';
+        const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `미지급금관리_수동_${new Date().toISOString().split('T')[0]}.csv`; link.click();
     };
 
     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>
+            {/* 통계 카드 */}
             <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="bg-white rounded-xl border border-gray-200 p-5">
                     <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(stats.totalAmount)}원</p>
                     <p className="text-xs text-gray-400 mt-1">{stats.count}건</p>
                 </div>
-                <div className="bg-white rounded-xl border border-amber-200 p-6 bg-amber-50/30">
+                <div className="bg-white rounded-xl border border-amber-200 p-5">
                     <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(stats.totalUnpaid)}원</p>
                 </div>
-                <div className="bg-white rounded-xl border border-red-200 p-6 bg-red-50/30">
+                <div className="bg-white rounded-xl border border-red-200 p-5">
                     <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(stats.overdueAmount)}원</p>
                 </div>
-                <div className="bg-white rounded-xl border border-emerald-200 p-6 bg-emerald-50/30">
+                <div className="bg-white rounded-xl border border-emerald-200 p-5">
                     <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(stats.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">
+                <div className="flex flex-wrap items-center gap-4">
+                    <div className="relative" style="flex: 1 1 250px; max-width: 400px;">
                         <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">
+                    <select value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg shrink-0">
                         <option value="all">전체 분류</option>
                         {categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
                     </select>
-                    <div className="flex gap-1">
+                    <div className="flex gap-1 shrink-0">
                         {['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'}`}>
+                            <button key={status} onClick={() => setFilterStatus(status)} className={`px-3 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">
+                    <button onClick={() => { setSearchTerm(''); setFilterStatus('all'); setFilterCategory('all'); }} className="flex items-center gap-2 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg shrink-0">
                         <RefreshCw className="w-4 h-4" /><span className="text-sm">초기화</span>
                     </button>
+                    <div className="flex gap-2 ml-auto shrink-0">
+                        <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>
             </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">
@@ -309,7 +610,7 @@ function PayablesManagement() {
                     </thead>
                     <tbody className="divide-y divide-gray-100">
                         {loading ? (
-                            <tr><td colSpan="8" className="px-6 py-12 text-center text-gray-400"><div className="flex items-center justify-center gap-2"><svg className="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>불러오는 중...</div></td></tr>
+                            <tr><td colSpan="8" className="px-6 py-12 text-center text-gray-400"><LoadingSpinner /></td></tr>
                         ) : filteredPayables.length === 0 ? (
                             <tr><td colSpan="8" className="px-6 py-12 text-center text-gray-400">데이터가 없습니다.</td></tr>
                         ) : filteredPayables.map(item => (
@@ -328,6 +629,7 @@ function PayablesManagement() {
                 </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">
@@ -367,6 +669,7 @@ function PayablesManagement() {
                 </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">
@@ -398,6 +701,116 @@ function PayablesManagement() {
     );
 }
 
+// =============================================
+// 공통 컴포넌트
+// =============================================
+function LoadingSpinner() {
+    return (
+        <div className="flex items-center justify-center py-12">
+            <svg className="animate-spin h-5 w-5 text-gray-400 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span className="text-gray-400">불러오는 중...</span>
+        </div>
+    );
+}
+
+function EmptyState({ message }) {
+    return <div className="text-center py-12 text-gray-400">{message}</div>;
+}
+
+// =============================================
+// 메인 컴포넌트
+// =============================================
+function PayablesManagement() {
+    const [activeTab, setActiveTab] = useState('integrated');
+    const currentYear = new Date().getFullYear();
+    const [startDate, setStartDate] = useState(`${currentYear}-01-01`);
+    const [endDate, setEndDate] = useState(`${currentYear}-12-31`);
+    const [account, setAccount] = useState('all');
+    const [vendorSearch, setVendorSearch] = useState('');
+
+    const tabs = [
+        { id: 'integrated', label: '통합 잔액', icon: Layers, color: 'rose' },
+        { id: 'hometax', label: '홈택스 발생', icon: FileText, color: 'blue' },
+        { id: 'journal', label: '일반전표 상계', icon: Banknote, color: 'emerald' },
+        { id: 'manual', label: '수동 관리', icon: Edit, color: 'gray' },
+    ];
+
+    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>
+
+                {/* 탭 네비게이션 */}
+                <div className="px-6 flex gap-1 -mb-px">
+                    {tabs.map(tab => {
+                        const Icon = tab.icon;
+                        const isActive = activeTab === tab.id;
+                        return (
+                            <button key={tab.id} onClick={() => setActiveTab(tab.id)}
+                                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                                    isActive
+                                        ? `border-${tab.color}-600 text-${tab.color}-600`
+                                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                                }`}
+                                style={isActive ? { borderBottomColor: tab.color === 'rose' ? '#e11d48' : tab.color === 'blue' ? '#2563eb' : tab.color === 'emerald' ? '#059669' : '#4b5563', color: tab.color === 'rose' ? '#e11d48' : tab.color === 'blue' ? '#2563eb' : tab.color === 'emerald' ? '#059669' : '#4b5563' } : {}}>
+                                <Icon className="w-4 h-4" />
+                                {tab.label}
+                            </button>
+                        );
+                    })}
+                </div>
+            </header>
+
+            {/* 공통 필터 (통합/홈택스/전표 탭에서만 표시) */}
+            {activeTab !== 'manual' && (
+                <div className="bg-white rounded-xl border border-gray-200 p-4 mb-6">
+                    <div className="flex flex-wrap items-center gap-4">
+                        <div className="flex items-center gap-2 shrink-0">
+                            <label className="text-sm text-gray-600 whitespace-nowrap">기간</label>
+                            <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg text-sm" />
+                            <span className="text-gray-400">~</span>
+                            <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg text-sm" />
+                        </div>
+                        <div className="flex items-center gap-2 shrink-0">
+                            <label className="text-sm text-gray-600 whitespace-nowrap">계정</label>
+                            <select value={account} onChange={(e) => setAccount(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg text-sm">
+                                <option value="all">전체 (204+205)</option>
+                                <option value="204">204 미지급금</option>
+                                <option value="205">205 미지급비용</option>
+                            </select>
+                        </div>
+                        {activeTab === 'integrated' && (
+                            <div className="relative" style={{flex: '1 1 200px', maxWidth: '300px'}}>
+                                <Search className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                                <input type="text" placeholder="거래처 검색..." value={vendorSearch} onChange={(e) => setVendorSearch(e.target.value)} className="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-rose-500" />
+                            </div>
+                        )}
+                        <button onClick={() => { setStartDate(`${currentYear}-01-01`); setEndDate(`${currentYear}-12-31`); setAccount('all'); setVendorSearch(''); }}
+                            className="flex items-center gap-2 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg shrink-0">
+                            <RefreshCw className="w-4 h-4" /><span className="text-sm">초기화</span>
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {/* 탭 컨텐츠 */}
+            {activeTab === 'integrated' && <IntegratedTab startDate={startDate} endDate={endDate} account={account} vendorSearch={vendorSearch} />}
+            {activeTab === 'hometax' && <HometaxTab startDate={startDate} endDate={endDate} account={account} />}
+            {activeTab === 'journal' && <JournalTab startDate={startDate} endDate={endDate} account={account} />}
+            {activeTab === 'manual' && <ManualTab />}
+        </div>
+    );
+}
+
 const rootElement = document.getElementById('payables-root');
 if (rootElement) { ReactDOM.createRoot(rootElement).render(<PayablesManagement />); }
 </script>
diff --git a/routes/web.php b/routes/web.php
index 43ec461a..3a8700df 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1197,6 +1197,9 @@
     // 미지급금 관리 API
     Route::prefix('payables')->name('payables.')->group(function () {
         Route::get('/list', [\App\Http\Controllers\Finance\PayableController::class, 'index'])->name('list');
+        Route::get('/integrated', [\App\Http\Controllers\Finance\PayableController::class, 'integrated'])->name('integrated');
+        Route::get('/hometax', [\App\Http\Controllers\Finance\PayableController::class, 'hometaxPayables'])->name('hometax');
+        Route::get('/journals', [\App\Http\Controllers\Finance\PayableController::class, 'journalPayables'])->name('journals');
         Route::post('/store', [\App\Http\Controllers\Finance\PayableController::class, 'store'])->name('store');
         Route::put('/{id}', [\App\Http\Controllers\Finance\PayableController::class, 'update'])->name('update');
         Route::post('/{id}/pay', [\App\Http\Controllers\Finance\PayableController::class, 'pay'])->name('pay');