<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>법인카드 사용내역 조회 - 바로빌 연동</title>
    
    <!-- Fonts: Pretendard -->
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Pretendard', 'sans-serif'],
                    },
                    colors: {
                        background: 'rgb(250, 250, 250)',
                        primary: {
                            DEFAULT: '#059669',
                            foreground: '#ffffff',
                        },
                        accent: {
                            DEFAULT: '#10b981',
                            light: '#d1fae5',
                        }
                    },
                    borderRadius: {
                        'card': '12px',
                    }
                }
            }
        }
    </script>

    <!-- React & ReactDOM -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    
    <!-- Babel for JSX -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
</head>
<body class="bg-background text-slate-800 antialiased">
    <div id="root"></div>

    <script type="text/babel">
        const { useState, useEffect } = React;

        // SVG Icon Components (React-safe)
        const Icons = {
            wallet: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/>
                    <path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/>
                    <path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/>
                </svg>
            ),
            receipt: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/>
                    <path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/>
                    <path d="M12 17.5v-11"/>
                </svg>
            ),
            creditCard: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <rect width="20" height="14" x="2" y="5" rx="2"/>
                    <line x1="2" x2="22" y1="10" y2="10"/>
                </svg>
            ),
            xCircle: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="m15 9-6 6"/>
                    <path d="m9 9 6 6"/>
                </svg>
            ),
            filter: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
                </svg>
            ),
            search: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="11" cy="11" r="8"/>
                    <path d="m21 21-4.3-4.3"/>
                </svg>
            ),
            fileText: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/>
                    <path d="M14 2v4a2 2 0 0 0 2 2h4"/>
                    <path d="M10 9H8"/>
                    <path d="M16 13H8"/>
                    <path d="M16 17H8"/>
                </svg>
            ),
            home: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                    <polyline points="9 22 9 12 15 12 15 22"/>
                </svg>
            ),
            bank: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M3 21h18"/>
                    <path d="M5 21v-7"/>
                    <path d="M19 21v-7"/>
                    <path d="M10 9L3 21"/>
                    <path d="M14 9l7 12"/>
                    <rect x="2" y="3" width="20" height="5"/>
                    <line x1="12" x2="12" y1="21" y2="8"/>
                </svg>
            ),
            building: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <rect width="16" height="20" x="4" y="2" rx="2" ry="2"/>
                    <path d="M9 22v-4h6v4"/>
                    <path d="M8 6h.01"/>
                    <path d="M16 6h.01"/>
                    <path d="M12 6h.01"/>
                    <path d="M12 10h.01"/>
                    <path d="M12 14h.01"/>
                    <path d="M16 10h.01"/>
                    <path d="M16 14h.01"/>
                    <path d="M8 10h.01"/>
                    <path d="M8 14h.01"/>
                </svg>
            ),
            alertCircle: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="12" x2="12" y1="8" y2="12"/>
                    <line x1="12" x2="12.01" y1="16" y2="16"/>
                </svg>
            ),
            chevronsLeft: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="m11 17-5-5 5-5"/>
                    <path d="m18 17-5-5 5-5"/>
                </svg>
            ),
            chevronLeft: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="m15 18-6-6 6-6"/>
                </svg>
            ),
            chevronRight: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="m9 18 6-6-6-6"/>
                </svg>
            ),
            chevronsRight: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="m6 17 5-5-5-5"/>
                    <path d="m13 17 5-5-5-5"/>
                </svg>
            ),
            creditCardLarge: () => (
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="opacity-50">
                    <rect width="20" height="14" x="2" y="5" rx="2"/>
                    <line x1="2" x2="22" y1="10" y2="10"/>
                </svg>
            ),
            download: ({ className }) => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                    <polyline points="7 10 12 15 17 10"/>
                    <line x1="12" x2="12" y1="15" y2="3"/>
                </svg>
            ),
            info: ({ className }) => (
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 16v-4"/>
                    <path d="M12 8h.01"/>
                </svg>
            ),
            x: ({ className }) => (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
                    <path d="M18 6 6 18"/>
                    <path d="m6 6 12 12"/>
                </svg>
            )
        };

        // Header Component
        const Header = () => (
            <header className="bg-white border-b border-gray-100 sticky top-0 z-50">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <div className="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center text-emerald-600 font-bold">
                            💳
                        </div>
                        <h1 className="text-lg font-semibold text-slate-900">법인카드 사용내역 조회</h1>
                    </div>
                    <div className="flex items-center gap-4">
                        <a href="../eaccount/index.php" className="text-sm text-slate-500 hover:text-slate-900 flex items-center gap-1 bg-slate-100 hover:bg-slate-200 px-3 py-1.5 rounded-lg transition-colors">
                            <Icons.wallet />
                            계좌내역 조회
                        </a>
                        <a href="../tenant/index.php" className="text-sm text-slate-500 hover:text-slate-900 flex items-center gap-1 bg-slate-100 hover:bg-slate-200 px-3 py-1.5 rounded-lg transition-colors">
                            <Icons.bank />
                            바로빌 테넌트 관리
                        </a>
                        <a href="../etax/index.php" className="text-sm text-slate-500 hover:text-slate-900 flex items-center gap-1 bg-slate-100 hover:bg-slate-200 px-3 py-1.5 rounded-lg transition-colors">
                            <Icons.receipt />
                            전자세금계산서
                        </a>
                        <a href="../index.php" className="text-sm text-slate-500 hover:text-slate-900 flex items-center gap-1">
                            <Icons.home />
                            홈으로
                        </a>
                    </div>
                </div>
            </header>
        );

        // StatCard Component
        const StatCard = ({ title, value, subtext, icon, color = 'emerald' }) => (
            <div className="bg-white rounded-card p-6 shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
                <div className="flex items-start justify-between mb-4">
                    <h3 className="text-sm font-medium text-slate-500">{title}</h3>
                    <div className={`p-2 bg-${color}-50 rounded-lg text-${color}-600`}>
                        {icon}
                    </div>
                </div>
                <div className="text-2xl font-bold text-slate-900 mb-1">{value}</div>
                {subtext && <div className="text-xs text-slate-400">{subtext}</div>}
            </div>
        );

        // Card Selector Component
        const CardSelector = ({ cards, selectedCard, onSelect }) => (
            <div className="flex flex-wrap gap-2">
                <button
                    onClick={() => onSelect('')}
                    className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                        selectedCard === '' 
                            ? 'bg-emerald-600 text-white' 
                            : 'bg-white border border-slate-200 text-slate-700 hover:bg-slate-50'
                    }`}
                >
                    전체 카드
                </button>
                {cards.map(card => (
                    <button
                        key={card.cardNum}
                        onClick={() => onSelect(card.cardNum)}
                        className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                            selectedCard === card.cardNum 
                                ? 'bg-emerald-600 text-white' 
                                : 'bg-white border border-slate-200 text-slate-700 hover:bg-slate-50'
                        }`}
                    >
                        {card.cardBrand}[{card.alias}({card.cardNum.slice(-4)})]
                    </button>
                ))}
            </div>
        );

        // TXT Export Modal Component
        const TxtExportModal = ({ isOpen, onClose, logs }) => {
            const [copied, setCopied] = React.useState(false);
            const textareaRef = React.useRef(null);
            
            if (!isOpen) return null;
            
            // TSV 형식으로 변환 (엑셀 붙여넣기 가능)
            const generateTSV = () => {
                const headers = ['승인일시', '카드번호', '가맹점명', '가맹점사업자번호', '금액', '부가세', '봉사료', '할부', '구분', '승인번호', '통화', '메모'];
                const headerRow = headers.join('\t');
                
                const dataRows = logs.map(log => [
                    log.approvalDateTime,
                    log.cardNumFull,
                    log.merchantName,
                    log.merchantBizNum,
                    log.amount,
                    log.vat,
                    log.serviceCharge,
                    log.installmentName,
                    log.approvalTypeName,
                    log.approvalNum,
                    log.currencyCode,
                    log.memo
                ].join('\t'));
                
                return headerRow + '\n' + dataRows.join('\n');
            };
            
            const tsvData = generateTSV();
            
            const handleCopy = async () => {
                try {
                    await navigator.clipboard.writeText(tsvData);
                    setCopied(true);
                    setTimeout(() => setCopied(false), 2000);
                } catch (err) {
                    // 복사 실패 시 textarea 선택
                    if (textareaRef.current) {
                        textareaRef.current.select();
                        document.execCommand('copy');
                        setCopied(true);
                        setTimeout(() => setCopied(false), 2000);
                    }
                }
            };
            
            return (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" onClick={onClose}>
                    <div className="bg-white rounded-lg shadow-xl w-full max-w-6xl max-h-[90vh] flex flex-col" onClick={e => e.stopPropagation()}>
                        {/* 모달 헤더 */}
                        <div className="p-6 border-b border-slate-200 flex justify-between items-center">
                            <div>
                                <h3 className="text-xl font-bold text-slate-900">내역 추출</h3>
                                <p className="text-sm text-slate-500 mt-1">엑셀에 붙여넣기 가능한 형식입니다</p>
                            </div>
                            <div className="flex gap-2">
                                <button
                                    onClick={handleCopy}
                                    className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                                        copied 
                                            ? 'bg-green-600 text-white' 
                                            : 'bg-emerald-600 text-white hover:bg-emerald-700'
                                    }`}
                                >
                                    {copied ? '✓ 복사됨' : '전체 복사'}
                                </button>
                                <button
                                    onClick={onClose}
                                    className="p-2 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100"
                                >
                                    <Icons.x className="w-5 h-5" />
                                </button>
                            </div>
                        </div>
                        
                        {/* 모달 본문 */}
                        <div className="flex-1 overflow-auto p-6">
                            <textarea
                                ref={textareaRef}
                                value={tsvData}
                                readOnly
                                className="w-full h-full min-h-[400px] font-mono text-xs border border-slate-300 rounded-lg p-4 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                style={{ resize: 'none' }}
                            />
                        </div>
                        
                        {/* 모달 푸터 */}
                        <div className="p-4 border-t border-slate-200 bg-slate-50 text-sm text-slate-600">
                            <div className="flex items-center gap-2">
                                <Icons.info className="w-4 h-4" />
                                <span>총 {logs.length}건의 내역 | Ctrl+A로 전체 선택 후 Ctrl+C로 복사하거나 '전체 복사' 버튼을 사용하세요</span>
                            </div>
                        </div>
                    </div>
                </div>
            );
        };

        // Field Export Modal Component (Input Grid)
        const FieldExportModal = ({ isOpen, onClose, logs }) => {
            const [copied, setCopied] = React.useState(false);
            
            if (!isOpen) return null;
            
            const fields = [
                { key: 'approvalDateTime', label: '승인일시' },
                { key: 'cardNumFull', label: '카드번호' },
                { key: 'merchantName', label: '가맹점명' },
                { key: 'merchantBizNum', label: '가맹점사업자번호' },
                { key: 'amount', label: '금액' },
                { key: 'vat', label: '부가세' },
                { key: 'serviceCharge', label: '봉사료' },
                { key: 'installmentName', label: '할부' },
                { key: 'approvalTypeName', label: '구분' },
                { key: 'approvalNum', label: '승인번호' },
                { key: 'currencyCode', label: '통화' },
                { key: 'memo', label: '메모' }
            ];
            
            // TSV 형식으로 변환 (복사용)
            const generateTSV = () => {
                const headers = fields.map(f => f.label).join('\t');
                const dataRows = logs.map(log => 
                    fields.map(f => log[f.key] ?? '').join('\t')
                );
                return headers + '\n' + dataRows.join('\n');
            };
            
            const handleCopyAll = async () => {
                try {
                    await navigator.clipboard.writeText(generateTSV());
                    setCopied(true);
                    setTimeout(() => setCopied(false), 2000);
                } catch (err) {
                    alert('복사 실패: ' + err.message);
                }
            };
            
            return (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" onClick={onClose}>
                    <div className="bg-white rounded-lg shadow-xl w-full max-w-7xl max-h-[90vh] flex flex-col" onClick={e => e.stopPropagation()}>
                        {/* 모달 헤더 */}
                        <div className="p-6 border-b border-slate-200 flex justify-between items-center">
                            <div>
                                <h3 className="text-xl font-bold text-slate-900">필드 추출</h3>
                                <p className="text-sm text-slate-500 mt-1">각 필드별로 데이터를 확인하고 복사할 수 있습니다</p>
                            </div>
                            <div className="flex gap-2">
                                <button
                                    onClick={handleCopyAll}
                                    className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                                        copied 
                                            ? 'bg-green-600 text-white' 
                                            : 'bg-emerald-600 text-white hover:bg-emerald-700'
                                    }`}
                                >
                                    {copied ? '✓ 복사됨' : '전체 복사'}
                                </button>
                                <button
                                    onClick={onClose}
                                    className="p-2 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100"
                                >
                                    <Icons.x className="w-5 h-5" />
                                </button>
                            </div>
                        </div>
                        
                        {/* 모달 본문 - Input Grid */}
                        <div className="flex-1 overflow-auto p-6">
                            <div className="border border-slate-300 rounded-lg overflow-hidden">
                                {/* 헤더 행 */}
                                <div className="grid grid-cols-12 bg-slate-100 border-b border-slate-300">
                                    {fields.map((field, idx) => (
                                        <div 
                                            key={field.key}
                                            className="px-2 py-3 text-xs font-bold text-slate-700 border-r border-slate-300 last:border-r-0 text-center"
                                        >
                                            {field.label}
                                        </div>
                                    ))}
                                </div>
                                
                                {/* 데이터 행들 */}
                                {logs.map((log, rowIdx) => (
                                    <div 
                                        key={rowIdx}
                                        className="grid grid-cols-12 border-b border-slate-200 last:border-b-0 hover:bg-slate-50"
                                    >
                                        {fields.map((field, colIdx) => (
                                            <div 
                                                key={field.key}
                                                className="border-r border-slate-200 last:border-r-0"
                                            >
                                                <input
                                                    type="text"
                                                    value={log[field.key] ?? ''}
                                                    readOnly
                                                    className="w-full px-2 py-2 text-xs border-0 focus:outline-none focus:ring-2 focus:ring-emerald-500 bg-transparent"
                                                    onFocus={e => e.target.select()}
                                                />
                                            </div>
                                        ))}
                                    </div>
                                ))}
                            </div>
                        </div>
                        
                        {/* 모달 푸터 */}
                        <div className="p-4 border-t border-slate-200 bg-slate-50 text-sm text-slate-600">
                            <div className="flex items-center gap-2">
                                <Icons.info className="w-4 h-4" />
                                <span>총 {logs.length}건의 내역 | 각 필드를 클릭하면 자동 선택됩니다 | '전체 복사' 버튼으로 엑셀 붙여넣기 가능</span>
                            </div>
                        </div>
                    </div>
                </div>
            );
        };

        // Date Range Selector Component
        const DateRangeSelector = ({ startDate, endDate, onStartChange, onEndChange, onSearch }) => (
            <div className="flex flex-wrap items-center gap-3">
                <div className="flex items-center gap-2">
                    <label className="text-sm text-slate-600">시작일</label>
                    <input
                        type="date"
                        value={startDate}
                        onChange={(e) => onStartChange(e.target.value)}
                        className="rounded-lg border border-slate-200 px-3 py-2 text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none"
                    />
                </div>
                <span className="text-slate-400">~</span>
                <div className="flex items-center gap-2">
                    <label className="text-sm text-slate-600">종료일</label>
                    <input
                        type="date"
                        value={endDate}
                        onChange={(e) => onEndChange(e.target.value)}
                        className="rounded-lg border border-slate-200 px-3 py-2 text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none"
                    />
                </div>
                <button
                    onClick={onSearch}
                    className="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium transition-colors flex items-center gap-2"
                >
                    <Icons.search />
                    조회
                </button>
            </div>
        );

        // Quick Date Buttons Component
        const QuickDateButtons = ({ onSelect }) => {
            const buttons = [
                { label: '오늘', days: 0 },
                { label: '7일', days: 7 },
                { label: '30일', days: 30 },
                { label: '3개월', days: 90 },
                { label: '6개월', days: 180 },
            ];
            
            return (
                <div className="flex gap-2">
                    {buttons.map(btn => (
                        <button
                            key={btn.days}
                            onClick={() => onSelect(btn.days)}
                            className="px-3 py-1.5 text-xs bg-slate-100 hover:bg-slate-200 rounded-md text-slate-600 transition-colors"
                        >
                            {btn.label}
                        </button>
                    ))}
                </div>
            );
        };

        // Usage Table Component
        const UsageTable = ({ logs, loading }) => {
            if (loading) {
                return (
                    <div className="flex items-center justify-center py-20">
                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-600"></div>
                    </div>
                );
            }

            if (logs.length === 0) {
                return (
                    <div className="text-center py-20 text-slate-400">
                        <div className="flex justify-center mb-4"><Icons.creditCardLarge /></div>
                        <p>조회된 사용내역이 없습니다.</p>
                    </div>
                );
            }

            return (
                <div className="overflow-x-auto">
                    <table className="w-full text-left text-sm text-slate-600">
                        <thead className="bg-slate-50 text-xs uppercase font-medium text-slate-500">
                            <tr>
                                <th className="px-4 py-3">승인일시</th>
                                <th className="px-4 py-3">카드번호</th>
                                <th className="px-4 py-3">가맹점명</th>
                                <th className="px-4 py-3 text-right">금액</th>
                                <th className="px-4 py-3 text-center">할부</th>
                                <th className="px-4 py-3 text-center">구분</th>
                                <th className="px-4 py-3">승인번호</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100">
                            {logs.map((log, index) => (
                                <tr key={index} className="hover:bg-slate-50 transition-colors">
                                    <td className="px-4 py-3 whitespace-nowrap">
                                        <div className="font-medium text-slate-900">{log.approvalDate}</div>
                                        <div className="text-xs text-slate-400">{log.approvalTime}</div>
                                    </td>
                                    <td className="px-4 py-3">
                                        <span className="font-mono text-xs">{log.cardNum}</span>
                                    </td>
                                    <td className="px-4 py-3">
                                        <div className="font-medium text-slate-900">{log.merchantName}</div>
                                        {log.merchantBizNum && (
                                            <div className="text-xs text-slate-400">{log.merchantBizNum}</div>
                                        )}
                                    </td>
                                    <td className="px-4 py-3 text-right">
                                        <span className={`font-bold ${log.approvalType === '2' ? 'text-red-600' : 'text-slate-900'}`}>
                                            {log.approvalType === '2' ? '-' : ''}{log.totalAmountFormatted}원
                                        </span>
                                    </td>
                                    <td className="px-4 py-3 text-center">
                                        <span className="text-xs">{log.installmentName}</span>
                                    </td>
                                    <td className="px-4 py-3 text-center">
                                        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                                            log.approvalType === '2' 
                                                ? 'bg-red-100 text-red-800' 
                                                : 'bg-emerald-100 text-emerald-800'
                                        }`}>
                                            {log.approvalTypeName}
                                        </span>
                                    </td>
                                    <td className="px-4 py-3">
                                        <span className="font-mono text-xs text-slate-500">{log.approvalNum}</span>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            );
        };

        // Pagination Component
        const Pagination = ({ currentPage, maxPageNum, onPageChange }) => {
            if (maxPageNum <= 1) return null;
            
            const pages = [];
            const start = Math.max(1, currentPage - 2);
            const end = Math.min(maxPageNum, currentPage + 2);
            
            for (let i = start; i <= end; i++) {
                pages.push(i);
            }
            
            return (
                <div className="flex items-center justify-center gap-2 mt-6">
                    <button
                        onClick={() => onPageChange(1)}
                        disabled={currentPage === 1}
                        className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <Icons.chevronsLeft />
                    </button>
                    <button
                        onClick={() => onPageChange(currentPage - 1)}
                        disabled={currentPage === 1}
                        className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <Icons.chevronLeft />
                    </button>
                    
                    {pages.map(page => (
                        <button
                            key={page}
                            onClick={() => onPageChange(page)}
                            className={`w-10 h-10 rounded-lg font-medium transition-colors ${
                                page === currentPage 
                                    ? 'bg-emerald-600 text-white' 
                                    : 'hover:bg-slate-100 text-slate-600'
                            }`}
                        >
                            {page}
                        </button>
                    ))}
                    
                    <button
                        onClick={() => onPageChange(currentPage + 1)}
                        disabled={currentPage === maxPageNum}
                        className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <Icons.chevronRight />
                    </button>
                    <button
                        onClick={() => onPageChange(maxPageNum)}
                        disabled={currentPage === maxPageNum}
                        className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <Icons.chevronsRight />
                    </button>
                </div>
            );
        };

        // Main App Component
        const App = () => {
            const [loading, setLoading] = useState(true);
            const [cards, setCards] = useState([]);
            const [selectedCard, setSelectedCard] = useState('');
            const [logs, setLogs] = useState([]);
            const [pagination, setPagination] = useState({});
            const [summary, setSummary] = useState({});
            const [startDate, setStartDate] = useState('');
            const [endDate, setEndDate] = useState('');
            const [error, setError] = useState(null);
            const [txtExportModalOpen, setTxtExportModalOpen] = useState(false);
            const [fieldExportModalOpen, setFieldExportModalOpen] = useState(false);

            // 날짜 초기화
            useEffect(() => {
                const today = new Date();
                const thirtyDaysAgo = new Date(today);
                thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
                
                setEndDate(today.toISOString().split('T')[0]);
                setStartDate(thirtyDaysAgo.toISOString().split('T')[0]);
            }, []);

            // 카드 목록 로드
            useEffect(() => {
                loadCards();
            }, []);

            // 사용내역 로드 (날짜 설정 후)
            useEffect(() => {
                if (startDate && endDate) {
                    loadUsage();
                }
            }, [startDate, endDate, selectedCard]);

            const loadCards = async () => {
                try {
                    const response = await fetch('api/cards.php');
                    const data = await response.json();
                    if (data.success) {
                        setCards(data.cards || []);
                    } else {
                        console.error('카드 목록 조회 실패:', data.error);
                    }
                } catch (err) {
                    console.error('카드 목록 로드 오류:', err);
                }
            };

            const loadUsage = async (page = 1) => {
                setLoading(true);
                setError(null);
                
                try {
                    const params = new URLSearchParams({
                        type: 'period',
                        startDate: startDate.replace(/-/g, ''),
                        endDate: endDate.replace(/-/g, ''),
                        cardNum: selectedCard,
                        page: page,
                        limit: 50
                    });
                    
                    const response = await fetch(`api/usage.php?${params}`);
                    const data = await response.json();
                    
                    if (data.success) {
                        setLogs(data.data.logs || []);
                        setPagination(data.data.pagination || {});
                        setSummary(data.data.summary || {});
                    } else {
                        setError(data.error);
                        setLogs([]);
                    }
                } catch (err) {
                    setError('서버 통신 오류: ' + err.message);
                    setLogs([]);
                } finally {
                    setLoading(false);
                }
            };

            const handleQuickDateSelect = (days) => {
                const today = new Date();
                const startDateObj = new Date(today);
                startDateObj.setDate(startDateObj.getDate() - days);
                
                setEndDate(today.toISOString().split('T')[0]);
                setStartDate(startDateObj.toISOString().split('T')[0]);
            };

            const formatCurrency = (val) => new Intl.NumberFormat('ko-KR').format(val || 0) + '원';

            return (
                <div className="min-h-screen pb-20">
                    <Header />
                    
                    <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
                        {/* 통계 카드 */}
                        <section>
                            <h2 className="text-xl font-bold text-slate-900 mb-6">사용 현황</h2>
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                                <StatCard 
                                    title="총 사용금액" 
                                    value={formatCurrency(summary.totalAmount)} 
                                    subtext={`조회기간 합계`}
                                    icon={<Icons.wallet />}
                                />
                                <StatCard 
                                    title="사용건수" 
                                    value={`${(summary.count || 0).toLocaleString()}건`} 
                                    subtext={`승인 ${summary.approvalCount || 0}건`}
                                    icon={<Icons.receipt />}
                                />
                                <StatCard 
                                    title="등록된 카드" 
                                    value={`${cards.length}장`} 
                                    subtext="사용 가능한 카드"
                                    icon={<Icons.creditCard />}
                                />
                                <StatCard 
                                    title="취소건수" 
                                    value={`${(summary.cancelCount || 0).toLocaleString()}건`} 
                                    subtext="취소된 거래"
                                    icon={<Icons.xCircle />}
                                    color="red"
                                />
                            </div>
                        </section>

                        {/* 필터 섹션 */}
                        <section className="bg-white rounded-card shadow-sm border border-slate-100 p-6 space-y-4">
                            <div className="flex justify-between items-start">
                                <h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
                                    <span className="text-emerald-600"><Icons.filter /></span>
                                    조회 조건
                                </h2>
                                <QuickDateButtons onSelect={handleQuickDateSelect} />
                            </div>
                            
                            {cards.length > 0 && (
                                <div>
                                    <label className="block text-sm font-medium text-slate-700 mb-2">카드 선택</label>
                                    <CardSelector 
                                        cards={cards} 
                                        selectedCard={selectedCard} 
                                        onSelect={setSelectedCard} 
                                    />
                                </div>
                            )}
                            
                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-2">조회 기간</label>
                                <DateRangeSelector
                                    startDate={startDate}
                                    endDate={endDate}
                                    onStartChange={setStartDate}
                                    onEndChange={setEndDate}
                                    onSearch={() => loadUsage(1)}
                                />
                            </div>
                        </section>

                        {/* 에러 표시 */}
                        {error && (
                            <div className="bg-red-50 border border-red-200 rounded-card p-4 text-red-800">
                                <div className="flex items-center gap-2">
                                    <Icons.alertCircle />
                                    <span className="font-medium">오류 발생</span>
                                </div>
                                <p className="mt-1 text-sm">{error}</p>
                            </div>
                        )}

                        {/* 사용내역 테이블 */}
                        <section className="bg-white rounded-card shadow-sm border border-slate-100 overflow-hidden">
                            <div className="p-6 border-b border-slate-100 flex justify-between items-center">
                                <h2 className="text-lg font-bold text-slate-900">사용내역</h2>
                                <div className="flex items-center gap-3">
                                    <span className="text-sm text-slate-500">
                                        총 {(pagination.totalCount || 0).toLocaleString()}건
                                    </span>
                                    {logs.length > 0 && (
                                        <>
                                            <button
                                                onClick={() => setTxtExportModalOpen(true)}
                                                className="flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors"
                                            >
                                                <Icons.download className="w-4 h-4" />
                                                txt추출
                                            </button>
                                            <button
                                                onClick={() => setFieldExportModalOpen(true)}
                                                className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
                                            >
                                                <Icons.fileText />
                                                필드 추출
                                            </button>
                                        </>
                                    )}
                                </div>
                            </div>
                            
                            <UsageTable logs={logs} loading={loading} />
                            
                            <div className="p-4 border-t border-slate-100">
                                <Pagination 
                                    currentPage={pagination.currentPage || 1}
                                    maxPageNum={pagination.maxPageNum || 1}
                                    onPageChange={loadUsage}
                                />
                            </div>
                        </section>
                    </main>
                    
                    {/* txt추출 모달 */}
                    <TxtExportModal 
                        isOpen={txtExportModalOpen} 
                        onClose={() => setTxtExportModalOpen(false)} 
                        logs={logs} 
                    />
                    
                    {/* 필드 추출 모달 */}
                    <FieldExportModal 
                        isOpen={fieldExportModalOpen} 
                        onClose={() => setFieldExportModalOpen(false)} 
                        logs={logs} 
                    />
                </div>
            );
        };

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
    </script>
</body>
</html>

