// ─── Mock Data for pages-b ────────────────────────────────────────
const MOCK_TRANSFERS = [
  {id:'DB001',code:'DB-2026-0423',from:'省级综合应急物资储备库',to:'西安市应急物资储备库',summary:'救援帐篷×20顶、救生衣×200件',status:'调拨中',creator:'李强',time:'2026-04-23 08:00',reason:'防汛备勤'},
  {id:'DB002',code:'DB-2026-0420',from:'省级综合应急物资储备库',to:'宝鸡市应急物资储备库',summary:'发电机×5台、照明灯×30套',status:'已完成',creator:'张华',time:'2026-04-20 10:30',reason:'电网维修保障'},
  {id:'DB003',code:'DB-2026-0418',from:'西安市应急物资储备库',to:'咸阳市应急物资储备库',summary:'矿泉水×200箱',status:'待审核',creator:'王磊',time:'2026-04-18 16:00',reason:'驻地物资补充'},
  {id:'DB004',code:'DB-2026-0410',from:'省级综合应急物资储备库',to:'铜川市应急物资储备库',summary:'医疗急救包×30套、救生衣×100件',status:'已完成',creator:'赵军',time:'2026-04-10 09:15',reason:'应急队伍保障'},
];

const MOCK_DEMANDS = [
  {id:'XQ001',code:'XQ-2026-0424',type:'防汛抗旱',materials:'橡皮艇×5艘、救生衣×300件',area:'渭南市华州区',urgency:'紧急',submitter:'张海明',time:'2026-04-24 06:30',status:'已审核'},
  {id:'XQ002',code:'XQ-2026-0423',type:'生活保障',materials:'帐篷×50顶、矿泉水×500箱',area:'咸阳市泾阳县',urgency:'一般',submitter:'李建军',time:'2026-04-23 14:00',status:'待审核'},
  {id:'XQ003',code:'XQ-2026-0420',type:'医疗保障',materials:'医疗急救包×50套',area:'宝鸡市凤翔区',urgency:'较急',submitter:'王芳',time:'2026-04-20 09:00',status:'已处理'},
];

const MOCK_SUPPLIERS = [
  {id:'SP001',name:'陕西防汛物资有限公司',contact:'陈伟',phone:'029-88320001',category:'防汛抗旱',agreement:'有效',expire:'2027-03-31',status:'正常'},
  {id:'SP002',name:'西安帐篷制造厂',contact:'刘明',phone:'029-85670012',category:'生活保障',agreement:'有效',expire:'2026-12-31',status:'正常'},
  {id:'SP003',name:'宝鸡工业设备有限公司',contact:'赵磊',phone:'0917-3221033',category:'应急装备',agreement:'有效',expire:'2027-06-30',status:'正常'},
  {id:'SP004',name:'陕西医疗器械有限公司',contact:'孙慧',phone:'029-86781234',category:'医疗保障',agreement:'即将到期',expire:'2026-05-30',status:'预警'},
  {id:'SP005',name:'西安通信技术公司',contact:'周建国',phone:'029-83471122',category:'通讯资源',agreement:'有效',expire:'2027-09-30',status:'正常'},
];

const MOCK_WARNINGS = [
  {id:'YJ001',type:'库存预警',material:'橡皮艇',warehouse:'省级综合应急物资储备库',current:'12 艘',threshold:'20 艘',time:'2026-04-24 07:00',status:'未处理',level:'error'},
  {id:'YJ002',type:'近效期预警',material:'医疗急救包',warehouse:'省级综合应急物资储备库',current:'效期至2026-08-01',threshold:'180天预警',time:'2026-04-23 06:00',status:'处理中',level:'warning'},
  {id:'YJ003',type:'近效期预警',material:'矿泉水',warehouse:'西安市应急物资储备库',current:'效期至2026-06-15',threshold:'90天预警',time:'2026-04-22 06:00',status:'未处理',level:'error'},
  {id:'YJ004',type:'库存预警',material:'冲锋舟',warehouse:'宝鸡市应急物资储备库',current:'3 艘',threshold:'5 艘',time:'2026-04-21 07:00',status:'已处理',level:'default'},
];

// ─── 9. Transfer List ─────────────────────────────────────────────
function TransferPage({ nav }) {
  const [tab, setTab] = React.useState('全部');
  const tabs = ['全部','待审核','调拨中','已完成'];
  const statusType = s=>s==='已完成'?'success':s==='调拨中'?'info':s==='待审核'?'warning':'default';
  const filtered = tab==='全部'?MOCK_TRANSFERS:MOCK_TRANSFERS.filter(d=>d.status===tab);
  return (
    <div>
      <PageHeader title="调拨管理" crumb="调拨管理 › 调拨列表"
        extra={<Btn onClick={()=>nav('create-transfer')}>＋ 发起调拨</Btn>}/>
      <Card noPad>
        <div style={{padding:'12px 16px 0',borderBottom:`1px solid ${T.gray100}`}}>
          <Tabs tabs={tabs} active={tab} onChange={setTab}/>
        </div>
        <Table columns={[
          {key:'code',title:'调拨单号',width:160},
          {key:'from',title:'调出仓库'},
          {key:'to',title:'调入仓库'},
          {key:'summary',title:'物资明细'},
          {key:'reason',title:'调拨原因',width:120},
          {key:'creator',title:'创建人',width:80},
          {key:'time',title:'创建时间',width:140},
          {key:'status',title:'状态',width:90,align:'center',render:v=><Badge type={statusType(v)}>{v}</Badge>},
          {key:'_op',title:'操作',width:80,render:(_,r)=><Btn size="sm" variant="text">{r.status==='待审核'?'审核':'查看'}</Btn>},
        ]} data={filtered}/>
        <div style={{padding:'0 16px 12px'}}><Pagination total={filtered.length} page={1} onChange={()=>{}}/></div>
      </Card>
    </div>
  );
}

// ─── 10. Create Transfer ─────────────────────────────────────────
function CreateTransferPage({ nav }) {
  const [form, setForm] = React.useState({from:'',to:'',reason:'',urgency:'一般',note:''});
  const [items, setItems] = React.useState([{id:1,material:'',qty:'',unit:''}]);
  const addItem = () => setItems([...items,{id:Date.now(),material:'',qty:'',unit:''}]);
  const removeItem = id => setItems(items.filter(x=>x.id!==id));
  const updateItem = (id,field,val) => setItems(items.map(x=>x.id===id?{...x,[field]:val}:x));
  const wNames = MOCK_WAREHOUSES.map(w=>w.name);
  const mNames = MOCK_MATERIALS.map(m=>m.name);
  return (
    <div>
      <PageHeader title="发起调拨" crumb="调拨管理 › 发起调拨"/>
      <div style={{display:'grid',gridTemplateColumns:'1fr 360px',gap:12,alignItems:'start'}}>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          <Card title="基本信息">
            <FormRow label="调出仓库" required>
              <Select value={form.from} onChange={e=>setForm({...form,from:e.target.value})} options={['请选择',...wNames]}/>
            </FormRow>
            <FormRow label="调入仓库" required>
              <Select value={form.to} onChange={e=>setForm({...form,to:e.target.value})} options={['请选择',...wNames]}/>
            </FormRow>
            <FormRow label="调拨原因" required>
              <Input value={form.reason} onChange={e=>setForm({...form,reason:e.target.value})} placeholder="如：防汛备勤、灾区救助"/>
            </FormRow>
            <FormRow label="紧急程度">
              <Select value={form.urgency} onChange={e=>setForm({...form,urgency:e.target.value})} options={['一般','较急','紧急']}/>
            </FormRow>
          </Card>
          <Card title="物资明细" extra={<Btn size="sm" variant="ghost" onClick={addItem}>＋ 添加物资</Btn>}>
            <div style={{display:'grid',gridTemplateColumns:'1fr 120px 100px 40px',gap:8,marginBottom:8}}>
              {['物资名称','数量','单位',''].map(h=><div key={h} style={{fontSize:12,color:T.gray400,fontWeight:500}}>{h}</div>)}
            </div>
            {items.map(item=>(
              <div key={item.id} style={{display:'grid',gridTemplateColumns:'1fr 120px 100px 40px',gap:8,marginBottom:8,alignItems:'center'}}>
                <Select value={item.material} onChange={e=>updateItem(item.id,'material',e.target.value)} options={['请选择',...mNames]}/>
                <Input value={item.qty} onChange={e=>updateItem(item.id,'qty',e.target.value)} placeholder="数量" type="number"/>
                <Input value={item.unit} onChange={e=>updateItem(item.id,'unit',e.target.value)} placeholder="单位"/>
                <button onClick={()=>removeItem(item.id)} style={{background:'none',border:'none',cursor:'pointer',color:T.gray400,fontSize:18,padding:0}}>×</button>
              </div>
            ))}
          </Card>
          <Card title="备注">
            <textarea value={form.note} onChange={e=>setForm({...form,note:e.target.value})} placeholder="补充说明（选填）"
              style={{width:'100%',border:`1px solid ${T.gray200}`,borderRadius:4,padding:'8px 10px',fontSize:14,resize:'vertical',minHeight:80,fontFamily:'inherit',outline:'none'}}/>
          </Card>
        </div>
        <Card title="提交说明" style={{position:'sticky',top:16}}>
          <div style={{fontSize:13,color:T.gray600,lineHeight:1.8}}>
            <p style={{marginBottom:8}}>◆ 调拨申请提交后将进入审核流程</p>
            <p style={{marginBottom:8}}>◆ 审核通过后仓库管理员执行出入库</p>
            <p style={{marginBottom:8}}>◆ 请确认调出仓库有足够库存</p>
            <p>◆ 紧急调拨请同时电话通知仓库负责人</p>
          </div>
          <div style={{marginTop:20,display:'flex',flexDirection:'column',gap:8}}>
            <Btn onClick={()=>nav('transfer')}>提交调拨申请</Btn>
            <Btn variant="default" onClick={()=>nav('transfer')}>取消</Btn>
          </div>
        </Card>
      </div>
    </div>
  );
}

// ─── 11. Demand ──────────────────────────────────────────────────
function DemandPage() {
  const [modal, setModal] = React.useState(false);
  const [form, setForm] = React.useState({type:'防汛抗旱',materials:'',area:'',urgency:'一般',submitter:'',note:''});
  const urgencyType = u=>u==='紧急'?'error':u==='较急'?'warning':'default';
  const statusType = s=>s==='已审核'||s==='已处理'?'success':s==='待审核'?'warning':'info';
  return (
    <div>
      <PageHeader title="需求登记" crumb="调拨管理 › 需求登记" extra={<Btn onClick={()=>setModal(true)}>＋ 登记需求</Btn>}/>
      <Card noPad>
        <Table columns={[
          {key:'code',title:'需求单号',width:160},
          {key:'type',title:'灾害类型',width:100},
          {key:'materials',title:'需求物资'},
          {key:'area',title:'需求地区',width:130},
          {key:'urgency',title:'紧急程度',width:90,align:'center',render:v=><Badge type={urgencyType(v)}>{v}</Badge>},
          {key:'submitter',title:'申请人',width:80},
          {key:'time',title:'申请时间',width:140},
          {key:'status',title:'状态',width:90,align:'center',render:v=><Badge type={statusType(v)}>{v}</Badge>},
          {key:'_op',title:'操作',width:80,render:()=><Btn size="sm" variant="text">查看</Btn>},
        ]} data={MOCK_DEMANDS}/>
        <div style={{padding:'0 16px 12px'}}><Pagination total={MOCK_DEMANDS.length} page={1} onChange={()=>{}}/></div>
      </Card>
      <Modal open={modal} title="登记物资需求" onClose={()=>setModal(false)}
        footer={<><Btn variant="default" onClick={()=>setModal(false)}>取消</Btn><Btn onClick={()=>setModal(false)}>提交需求</Btn></>}>
        <FormRow label="灾害类型" required><Select value={form.type} onChange={e=>setForm({...form,type:e.target.value})} options={['防汛抗旱','生活保障','医疗保障','森林防火','地震救援','安全生产']}/></FormRow>
        <FormRow label="需求物资" required><textarea value={form.materials} onChange={e=>setForm({...form,materials:e.target.value})} placeholder="如：帐篷×50顶、救生衣×200件" style={{width:'100%',border:`1px solid ${T.gray200}`,borderRadius:4,padding:'6px 10px',fontSize:14,resize:'vertical',minHeight:60,fontFamily:'inherit',outline:'none'}}/></FormRow>
        <FormRow label="需求地区" required><Input value={form.area} onChange={e=>setForm({...form,area:e.target.value})} placeholder="如：渭南市华州区"/></FormRow>
        <FormRow label="紧急程度"><Select value={form.urgency} onChange={e=>setForm({...form,urgency:e.target.value})} options={['一般','较急','紧急']}/></FormRow>
        <FormRow label="申请人" required><Input value={form.submitter} onChange={e=>setForm({...form,submitter:e.target.value})} placeholder="姓名及联系方式"/></FormRow>
      </Modal>
    </div>
  );
}

// ─── 12. Supplier ─────────────────────────────────────────────────
function SupplierPage() {
  const [modal, setModal] = React.useState(false);
  const [detail, setDetail] = React.useState(null);
  const [form, setForm] = React.useState({name:'',contact:'',phone:'',category:'防汛抗旱',expire:''});
  const statusType = s=>s==='正常'?'success':s==='预警'?'warning':'default';
  return (
    <div>
      <PageHeader title="供应商管理" crumb="基础信息 › 供应商管理" extra={<Btn onClick={()=>setModal(true)}>＋ 新增供应商</Btn>}/>
      <Card noPad>
        <Table columns={[
          {key:'name',title:'供应商名称'},
          {key:'contact',title:'联系人',width:90},
          {key:'phone',title:'联系电话',width:140},
          {key:'category',title:'供货类别',width:110},
          {key:'agreement',title:'协议状态',width:100,align:'center',render:(v,r)=><Badge type={r.status==='预警'?'warning':'success'}>{v}</Badge>},
          {key:'expire',title:'协议到期',width:120},
          {key:'status',title:'状态',width:80,align:'center',render:v=><Badge type={statusType(v)}>{v}</Badge>},
          {key:'_op',title:'操作',width:130,render:(_,r)=>(
            <div style={{display:'flex',gap:6}}>
              <Btn size="sm" variant="text" onClick={()=>setDetail(r)}>详情</Btn>
              <Btn size="sm" variant="text">编辑</Btn>
            </div>
          )},
        ]} data={MOCK_SUPPLIERS}/>
        <div style={{padding:'0 16px 12px'}}><Pagination total={MOCK_SUPPLIERS.length} page={1} onChange={()=>{}}/></div>
      </Card>
      <Modal open={modal} title="新增供应商" onClose={()=>setModal(false)}
        footer={<><Btn variant="default" onClick={()=>setModal(false)}>取消</Btn><Btn onClick={()=>setModal(false)}>确定</Btn></>}>
        <FormRow label="供应商名称" required><Input value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder="供应商全称"/></FormRow>
        <FormRow label="联系人" required><Input value={form.contact} onChange={e=>setForm({...form,contact:e.target.value})} placeholder="联系人姓名"/></FormRow>
        <FormRow label="联系电话" required><Input value={form.phone} onChange={e=>setForm({...form,phone:e.target.value})} placeholder="联系电话"/></FormRow>
        <FormRow label="供货类别" required><Select value={form.category} onChange={e=>setForm({...form,category:e.target.value})} options={['防汛抗旱','生活保障','应急装备','医疗保障','通讯资源']}/></FormRow>
        <FormRow label="协议到期日"><Input type="date" value={form.expire} onChange={e=>setForm({...form,expire:e.target.value})} style={{width:180}}/></FormRow>
      </Modal>
      <Modal open={!!detail} title="供应商详情" onClose={()=>setDetail(null)} footer={<Btn variant="default" onClick={()=>setDetail(null)}>关闭</Btn>}>
        {detail&&(
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            {[['供应商名称',detail.name],['联系人',detail.contact],['联系电话',detail.phone],['供货类别',detail.category],['协议状态',detail.agreement],['协议到期',detail.expire]].map(([l,v])=>(
              <div key={l} style={{padding:'8px 12px',background:T.gray50,borderRadius:4}}>
                <div style={{fontSize:12,color:T.gray400,marginBottom:3}}>{l}</div>
                <div style={{fontSize:14,fontWeight:500,color:T.gray900}}>{v}</div>
              </div>
            ))}
          </div>
        )}
      </Modal>
    </div>
  );
}

// ─── 13. Warning ─────────────────────────────────────────────────
function WarningPage() {
  const [filter, setFilter] = React.useState('全部');
  const filters = ['全部','未处理','处理中','已处理'];
  const statusType = s=>s==='未处理'?'error':s==='处理中'?'warning':'success';
  const filtered = filter==='全部'?MOCK_WARNINGS:MOCK_WARNINGS.filter(w=>w.status===filter);
  return (
    <div>
      <PageHeader title="预警管理" crumb="基础信息 › 预警管理"/>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12,marginBottom:16}}>
        <StatCard label="未处理预警" value={MOCK_WARNINGS.filter(w=>w.status==='未处理').length} unit="条" color={T.red600}/>
        <StatCard label="处理中" value={MOCK_WARNINGS.filter(w=>w.status==='处理中').length} unit="条" color={T.warning}/>
        <StatCard label="本月已处理" value={8} unit="条" color={T.success}/>
      </div>
      <Card noPad>
        <div style={{padding:'8px 16px',display:'flex',gap:6,borderBottom:`1px solid ${T.gray100}`}}>
          {filters.map(f=>(
            <button key={f} onClick={()=>setFilter(f)} style={{padding:'3px 12px',borderRadius:2,border:`1px solid ${filter===f?T.blue600:T.gray200}`,background:filter===f?T.blue50:'white',color:filter===f?T.blue600:T.gray600,cursor:'pointer',fontSize:13}}>
              {f}
            </button>
          ))}
        </div>
        <Table columns={[
          {key:'type',title:'预警类型',width:110},
          {key:'material',title:'物资名称'},
          {key:'warehouse',title:'所在仓库'},
          {key:'current',title:'当前状态'},
          {key:'threshold',title:'预警阈值',width:120},
          {key:'time',title:'触发时间',width:140},
          {key:'status',title:'处理状态',width:90,align:'center',render:v=><Badge type={statusType(v)}>{v}</Badge>},
          {key:'_op',title:'操作',width:100,render:(_,r)=>r.status!=='已处理'&&<Btn size="sm" variant="ghost">标记处理</Btn>},
        ]} data={filtered}/>
        <div style={{padding:'0 16px 12px'}}><Pagination total={filtered.length} page={1} onChange={()=>{}}/></div>
      </Card>
    </div>
  );
}

// ─── 14. Statistics ───────────────────────────────────────────────
function StatisticsPage() {
  const [tab, setTab] = React.useState('储备分析');
  const tabs = ['储备分析','出入库分析','调拨分析'];
  const catData = [
    {name:'防汛抗旱',value:5,pct:78,color:T.blue600},
    {name:'生活保障',value:4,pct:62,color:'#2E6BCC'},
    {name:'应急装备',value:4,pct:55,color:'#4A7FD4'},
    {name:'医疗保障',value:3,pct:38,color:'#00A8CC'},
    {name:'通讯资源',value:2,pct:25,color:'#6B4FA8'},
    {name:'森林防火',value:2,pct:20,color:'#2E8B57'},
  ];
  const monthIO = [
    {month:'11月',in:32,out:18},{month:'12月',in:28,out:22},
    {month:'1月',in:15,out:12},{month:'2月',in:20,out:8},
    {month:'3月',in:35,out:25},{month:'4月',in:28,out:19},
  ];
  const maxIO = Math.max(...monthIO.map(m=>Math.max(m.in,m.out)));
  const transferReasons = [
    {name:'防汛备勤',value:12,pct:48},{name:'灾区救助',value:7,pct:28},
    {name:'队伍保障',value:4,pct:16},{name:'物资补充',value:2,pct:8},
  ];
  return (
    <div>
      <PageHeader title="统计分析" crumb="统计分析"/>
      <Tabs tabs={tabs} active={tab} onChange={setTab}/>
      {tab==='储备分析'&&(
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <Card title="物资类别占比">
            {catData.map(c=>(
              <div key={c.name} style={{display:'flex',alignItems:'center',gap:10,marginBottom:12}}>
                <div style={{width:68,fontSize:13,color:T.gray600,textAlign:'right',flexShrink:0}}>{c.name}</div>
                <div style={{flex:1,height:22,background:T.gray100,borderRadius:2,overflow:'hidden',position:'relative'}}>
                  <div style={{height:'100%',width:`${c.pct}%`,background:c.color,transition:'width .6s',display:'flex',alignItems:'center',justifyContent:'flex-end',paddingRight:6}}>
                    <span style={{fontSize:11,color:'white',fontWeight:600}}>{c.value}种</span>
                  </div>
                </div>
                <div style={{width:36,fontSize:12,color:T.gray400,textAlign:'right'}}>{c.pct}%</div>
              </div>
            ))}
          </Card>
          <Card title="仓库储量分布">
            {MOCK_WAREHOUSES.map((w,i)=>{
              const pct = [85,65,55,45,38][i];
              return (
                <div key={w.id} style={{display:'flex',alignItems:'center',gap:10,marginBottom:10}}>
                  <div style={{width:90,fontSize:12,color:T.gray600,textAlign:'right',flexShrink:0,lineHeight:1.3}}>{w.name.replace('应急物资储备库','').trim()}</div>
                  <div style={{flex:1,height:20,background:T.gray100,borderRadius:2,overflow:'hidden'}}>
                    <div style={{height:'100%',width:`${pct}%`,background:T.blue600,opacity:.7+i*.05}}/>
                  </div>
                  <div style={{width:32,fontSize:12,color:T.gray400}}>{pct}%</div>
                </div>
              );
            })}
          </Card>
        </div>
      )}
      {tab==='出入库分析'&&(
        <Card title="近6个月出入库趋势">
          <div style={{display:'flex',alignItems:'flex-end',gap:12,height:200,padding:'8px 0 0'}}>
            {monthIO.map(m=>(
              <div key={m.month} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:4}}>
                <div style={{display:'flex',gap:3,alignItems:'flex-end',height:160}}>
                  <div style={{width:20,background:T.blue600,borderRadius:'2px 2px 0 0',height:`${m.in/maxIO*150}px`,transition:'height .5s'}}/>
                  <div style={{width:20,background:T.warning,borderRadius:'2px 2px 0 0',height:`${m.out/maxIO*150}px`,transition:'height .5s'}}/>
                </div>
                <div style={{fontSize:12,color:T.gray500}}>{m.month}</div>
              </div>
            ))}
          </div>
          <div style={{display:'flex',gap:16,justifyContent:'center',marginTop:12}}>
            {[['入库',T.blue600],['出库',T.warning]].map(([l,c])=>(
              <div key={l} style={{display:'flex',alignItems:'center',gap:6,fontSize:12,color:T.gray600}}>
                <div style={{width:12,height:12,background:c,borderRadius:2}}/>{l}
              </div>
            ))}
          </div>
        </Card>
      )}
      {tab==='调拨分析'&&(
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <Card title="调拨原因分布">
            {transferReasons.map(r=>(
              <div key={r.name} style={{display:'flex',alignItems:'center',gap:10,marginBottom:12}}>
                <div style={{width:68,fontSize:13,color:T.gray600,textAlign:'right',flexShrink:0}}>{r.name}</div>
                <div style={{flex:1,height:20,background:T.gray100,borderRadius:2,overflow:'hidden'}}>
                  <div style={{height:'100%',width:`${r.pct}%`,background:T.blue600,display:'flex',alignItems:'center',paddingLeft:6}}>
                    <span style={{fontSize:11,color:'white',fontWeight:600}}>{r.value}次</span>
                  </div>
                </div>
                <div style={{width:32,fontSize:12,color:T.gray400}}>{r.pct}%</div>
              </div>
            ))}
          </Card>
          <Card title="调拨状态汇总">
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
              {[['本年调拨',25,'次',T.blue600],['已完成',20,'次',T.success],['处理中',3,'次',T.warning],['待审核',2,'次',T.gray400]].map(([l,v,u,c])=>(
                <div key={l} style={{padding:'12px 16px',background:T.gray50,borderRadius:4,borderTop:`3px solid ${c}`}}>
                  <div style={{fontSize:12,color:T.gray400,marginBottom:6}}>{l}</div>
                  <div style={{fontSize:24,fontWeight:700,color:c}}>{v}<span style={{fontSize:12,marginLeft:4,color:T.gray400}}>{u}</span></div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      )}
    </div>
  );
}

// ─── 15. System ───────────────────────────────────────────────────
function SystemPage() {
  const [tab, setTab] = React.useState('物资分类');
  const tabs = ['物资分类','预警阈值','组织机构'];
  const categories = [
    {id:'C001',code:'FS',name:'防汛抗旱',desc:'防汛抗旱类物资装备',count:5,status:'启用'},
    {id:'C002',code:'JY',name:'生活保障',desc:'灾区生活保障物资',count:4,status:'启用'},
    {id:'C003',code:'ZB',name:'应急装备',desc:'应急救援专用装备',count:4,status:'启用'},
    {id:'C004',code:'YL',name:'医疗保障',desc:'医疗救治保障物资',count:3,status:'启用'},
    {id:'C005',code:'TX',name:'通讯资源',desc:'通信保障类装备',count:2,status:'启用'},
    {id:'C006',code:'SL',name:'森林防火',desc:'森林防火专用物资',count:2,status:'启用'},
  ];
  const thresholds = [
    {id:'T001',material:'橡皮艇',type:'库存下限',value:20,unit:'艘',warehouse:'省级综合应急物资储备库'},
    {id:'T002',material:'冲锋舟',type:'库存下限',value:5,unit:'艘',warehouse:'宝鸡市应急物资储备库'},
    {id:'T003',material:'医疗急救包',type:'近效期预警',value:180,unit:'天',warehouse:'全部仓库'},
    {id:'T004',material:'矿泉水',type:'近效期预警',value:90,unit:'天',warehouse:'全部仓库'},
    {id:'T005',material:'救援帐篷',type:'库存下限',value:100,unit:'顶',warehouse:'省级综合应急物资储备库'},
  ];
  const orgs = [
    {id:'O001',name:'陕西省应急管理厅',level:'省级',parent:'—',contact:'029-12345678'},
    {id:'O002',name:'西安市应急管理局',level:'市级',parent:'陕西省应急管理厅',contact:'029-87654321'},
    {id:'O003',name:'宝鸡市应急管理局',level:'市级',parent:'陕西省应急管理厅',contact:'0917-1234567'},
    {id:'O004',name:'咸阳市应急管理局',level:'市级',parent:'陕西省应急管理厅',contact:'029-33214567'},
    {id:'O005',name:'铜川市应急管理局',level:'市级',parent:'陕西省应急管理厅',contact:'0919-4321234'},
  ];
  return (
    <div>
      <PageHeader title="系统管理" crumb="基础信息 › 系统管理"/>
      <Tabs tabs={tabs} active={tab} onChange={setTab}/>
      {tab==='物资分类'&&(
        <Card noPad extra={<Btn size="sm" style={{margin:'8px 12px 0 0'}}>＋ 新增分类</Btn>}>
          <Table columns={[
            {key:'code',title:'分类代码',width:90},
            {key:'name',title:'分类名称',width:110},
            {key:'desc',title:'说明'},
            {key:'count',title:'物资种数',width:90,align:'center'},
            {key:'status',title:'状态',width:80,align:'center',render:v=><Badge type="success">{v}</Badge>},
            {key:'_op',title:'操作',width:100,render:()=><div style={{display:'flex',gap:6}}><Btn size="sm" variant="text">编辑</Btn></div>},
          ]} data={categories}/>
        </Card>
      )}
      {tab==='预警阈值'&&(
        <Card noPad extra={<Btn size="sm" style={{margin:'8px 12px 0 0'}}>＋ 新增规则</Btn>}>
          <Table columns={[
            {key:'material',title:'物资名称'},
            {key:'type',title:'预警类型',width:110},
            {key:'value',title:'阈值',width:80,align:'right'},
            {key:'unit',title:'单位',width:60},
            {key:'warehouse',title:'适用仓库'},
            {key:'_op',title:'操作',width:100,render:()=><div style={{display:'flex',gap:6}}><Btn size="sm" variant="text">修改</Btn><Btn size="sm" variant="text">删除</Btn></div>},
          ]} data={thresholds}/>
        </Card>
      )}
      {tab==='组织机构'&&(
        <Card noPad>
          <Table columns={[
            {key:'name',title:'机构名称'},
            {key:'level',title:'级别',width:70,align:'center'},
            {key:'parent',title:'上级机构',width:160},
            {key:'contact',title:'联系电话',width:140},
            {key:'_op',title:'操作',width:100,render:()=><div style={{display:'flex',gap:6}}><Btn size="sm" variant="text">编辑</Btn></div>},
          ]} data={orgs}/>
        </Card>
      )}
    </div>
  );
}

Object.assign(window, { TransferPage, CreateTransferPage, DemandPage, SupplierPage, WarningPage, StatisticsPage, SystemPage });