/* MaiAgent Partner Portal — Orders & License Management */ const OrdersPage = ({ t, lang }) => { const [tab, setTab] = React.useState('orders'); const [statusFilter, setStatusFilter] = React.useState('all'); const [showForm, setShowForm] = React.useState(false); const [certTarget, setCertTarget] = React.useState(null); const [invoiceTarget, setInvoiceTarget] = React.useState(null); const STATUS_META = { pending: { zh: '審核中', en: 'In review', tone: 'amber' }, approved: { zh: '已通過', en: 'Approved', tone: 'blue' }, fulfilled: { zh: '已交付', en: 'Fulfilled', tone: 'green' }, rejected: { zh: '未通過', en: 'Rejected', tone: 'red' }, }; const LIC_META = { active: { zh: '使用中', en: 'Active', tone: 'green' }, expiring: { zh: '即將到期', en: 'Expiring soon', tone: 'amber' }, expired: { zh: '已到期', en: 'Expired', tone: 'red' }, }; const TONE_STYLE = { green: { bg: '#DCFCE7', color: '#15803D', dot: '#22C55E' }, amber: { bg: '#FEF9C3', color: '#A16207', dot: '#EAB308' }, blue: { bg: '#DBEAFE', color: '#1D4ED8', dot: '#3B82F6' }, red: { bg: '#FEE2E2', color: '#B91C1C', dot: '#EF4444' }, }; const StatusPill = ({ status, meta }) => { const s = meta[status]; if (!s) return null; const c = TONE_STYLE[s.tone]; return ( {lang === 'zh' ? s.zh : s.en} ); }; const filteredOrders = statusFilter === 'all' ? ORDERS : ORDERS.filter(o => o.status === statusFilter); const statsOrders = { total: ORDERS.length, pending: ORDERS.filter(o => o.status === 'pending').length, fulfilled: ORDERS.filter(o => o.status === 'fulfilled').length, }; const statsLic = { active: LICENSES.filter(l => l.status === 'active').length, expiring: LICENSES.filter(l => l.status === 'expiring').length, total: LICENSES.length, }; return (
{lang === 'zh' ? '帳務' : 'Account'}

{t('orders.title')}

{t('orders.sub')}
setShowForm(true)}>{t('orders.new')}
{/* KPI row */}
{[ { icon: 'inbox', label: lang === 'zh' ? '全部訂單' : 'Total orders', value: statsOrders.total }, { icon: 'clock', label: lang === 'zh' ? '審核中' : 'Pending review', value: statsOrders.pending, warn: statsOrders.pending > 0 }, { icon: 'check-circle', label: lang === 'zh' ? '已交付' : 'Fulfilled', value: statsOrders.fulfilled }, { icon: 'shield', label: lang === 'zh' ? '有效授權' : 'Active licenses', value: `${statsLic.active} / ${statsLic.total}`, sub: statsLic.expiring > 0 ? (lang === 'zh' ? `${statsLic.expiring} 件即將到期` : `${statsLic.expiring} expiring soon`) : '' }, ].map((k, i) => (
{k.label}
{k.value}
{k.sub &&
{k.sub}
}
))}
{/* Tabs */}
{[{ id: 'orders', label: t('orders.tab.orders') }, { id: 'licenses', label: t('orders.tab.licenses') }].map(tb => ( ))}
{tab === 'orders' && (
{/* Filter bar */}
{['all', 'pending', 'approved', 'fulfilled', 'rejected'].map(s => ( ))}
{[t('orders.col.id'), t('orders.col.customer'), t('orders.col.product'), lang === 'zh' ? '組織 ID' : 'Org ID', t('orders.col.amount'), lang === 'zh' ? '授權期間' : 'License Period', t('orders.col.status'), ''].map((h, i) => ( ))} {filteredOrders.map((o) => ( e.currentTarget.style.background = '#FAFBFF'} onMouseLeave={e => e.currentTarget.style.background = ''}> ))}
{h}
{o.id}
{o.endUser[lang]}
{o.rep[lang]}
 {o.product} {o.orgId || '—'} NT$ {(o.amount / 10000).toFixed(0)}萬 {o.startDate ? `${o.startDate} ~ ${o.endDate}` : '—'} {o.status === 'fulfilled' && (
setCertTarget(o)}> {lang === 'zh' ? '授權書' : 'License Cert'} {o.invoice && ( setInvoiceTarget(o)}> {lang === 'zh' ? '發票' : 'Invoice'} )}
)} {o.note && (
⚠ {o.note[lang]}
)}
{filteredOrders.length === 0 && (
{lang === 'zh' ? '目前沒有符合條件的訂單' : 'No orders match the selected filter'}
)}
)} {tab === 'licenses' && (
{statsLic.expiring > 0 && (
{lang === 'zh' ? `${statsLic.expiring} 份授權即將在 30 天內到期，請盡早聯繫客戶洽談續約。` : `${statsLic.expiring} license(s) expiring within 30 days — contact customers to arrange renewal.`}
)}
{[t('orders.lic.col.customer'), t('orders.lic.col.product'), 'Org ID', t('orders.lic.col.usage'), t('orders.lic.col.start'), t('orders.lic.col.expiry'), ''].map((h, i) => ( ))} {LICENSES.map((lic) => { const m = LIC_META[lic.status]; const c = TONE_STYLE[m.tone]; const daysLeft = Math.max(0, Math.round((new Date(lic.expiry) - new Date()) / 86400000)); return ( e.currentTarget.style.background = '#FAFBFF'} onMouseLeave={e => e.currentTarget.style.background = ''}> ); })}
{h}
{lic.customer[lang]}
{lic.isNfr && NFR} 		{lic.product} {lic.orgId}
= 90 ? '#EF4444' : lic.usageRate >= 70 ? '#F59E0B' : '#22C55E' }} />
{lic.usageRate}%
{lic.start}
{lic.expiry}
{lic.status !== 'expired' &&
{lang === 'zh' ? `剩 ${daysLeft} 天` : `${daysLeft}d left`}
} 		{lang === 'zh' ? m.zh : m.en}
)} {showForm && setShowForm(false)} />} {certTarget && setCertTarget(null)} />} {invoiceTarget && setInvoiceTarget(null)} />}
); }; /* ── New Order Modal ── */ const NewOrderModal = ({ t, lang, onClose }) => { const [form, setForm] = React.useState({ dealId: '', orgId: '', endUser: '', rep: '', address: '', product: '', startDate: '', endDate: '', amount: '', note: '', }); const set = k => e => setForm(f => ({ ...f, [k]: e.target.value })); const PRODUCTS = [ 'MaiAgent SaaS 輕量版', 'MaiAgent SaaS 標準版', 'MaiAgent SaaS 商業版', 'MaiAgent SaaS 旗艦企業版', 'MaiAgent SaaS POC（Pro 方案）', 'MaiAgent SaaS POC（Enterprise 方案）', 'MaiAgent 私有部署訂閱版', 'MaiAgent 私有部署買斷授權', 'MaiAgent GB10（MaiGPT）', 'MaiAgent GB10（Agent Builder）', 'MaiAgent Web Chat', ]; const Field = ({ label, children, required }) => (
{children}
); return (
{t('orders.form.title')}
{/* Section: 案件資訊 */}
{lang === 'zh' ? '案件資訊' : 'Deal Info'}
{/* Section: 終端使用者 */}
{lang === 'zh' ? '終端使用者資訊' : 'End User Info'}
{/* Section: 授權內容 */}
{lang === 'zh' ? '授權內容' : 'License Details'}