11 lines
1.8 KiB
TypeScript
11 lines
1.8 KiB
TypeScript
|
import React from "react"; import { Page } from "../lib/types"; import { sampleWorkOrders } from "../lib/sample-data";
|
||
|
|
export function HomePage({ onNavigate }: { onNavigate: (p: Page) => void }) {
|
||
|
|
const t = sampleWorkOrders.length, c = sampleWorkOrders.filter(w => w.status === "completed").length, a = sampleWorkOrders.filter(w => w.status === "planned").length;
|
||
|
|
return <div>
|
||
|
|
<h1 className="page-title">📋 任务首页</h1>
|
||
|
|
<div className="stats"><div className="stat-card"><div className="stat-value">{t}</div><div className="stat-label">全部工单</div></div><div className="stat-card"><div className="stat-value">{a}</div><div className="stat-label">进行中</div></div><div className="stat-card"><div className="stat-value">{c}</div><div className="stat-label">已完成</div></div><div className="stat-card"><div className="stat-value">—</div><div className="stat-label">待处理</div></div></div>
|
||
|
|
<h2 style={{fontSize:"1.1rem",marginBottom:"1rem"}}>最近工单</h2>
|
||
|
|
{sampleWorkOrders.map(wo => <div className="card" key={wo.id}><div className="card-header"><div><div className="card-title">{wo.summary}</div><div className="card-subtitle">{wo.id} · {wo.createdBy}</div></div><span className={`badge ${wo.status==="completed"?"badge-success":wo.status==="planned"?"badge-info":"badge-draft"}`}>{wo.status==="completed"?"已完成":wo.status==="planned"?"计划中":wo.status}</span></div><div style={{fontSize:"0.85rem",color:"#666",marginBottom:"0.75rem"}}>🎯 {wo.target}</div><div style={{display:"flex",gap:"0.5rem"}}><button className="btn" onClick={()=>onNavigate("plan")}>查看计划 →</button>{wo.status!=="completed"&&<button className="btn btn-primary" onClick={()=>onNavigate("authorize")}>授权执行 →</button>}<button className="btn" onClick={()=>onNavigate("receipt")}>查看回执 →</button></div></div>)}
|
||
|
|
</div>;
|
||
|
|
}
|