654 lines
33 KiB
Plaintext
654 lines
33 KiB
Plaintext
import React, { useState, useEffect } from 'react';
|
||
import {
|
||
Upload, FileText, Database, CheckCircle, XCircle,
|
||
AlertTriangle, BarChart2, PieChart, Activity,
|
||
ArrowRight, Search, Filter, Download, RefreshCw, FileSpreadsheet,
|
||
Info
|
||
} from 'lucide-react';
|
||
import {
|
||
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, Legend, ResponsiveContainer,
|
||
PieChart as RePieChart, Pie, Cell
|
||
} from 'recharts';
|
||
|
||
// --- 真實模擬資料 (源自使用者上傳檔案) ---
|
||
|
||
// 1. DIT Report (模擬解析後的結構)
|
||
// 來源: DIT report (by Focus Item)_app_樣本.xlsx
|
||
const PARSED_DIT_DATA = [
|
||
{ id: 'OP0000012868', customer: '光寶科技股份有限公司', pn: 'GBU610', eau: 20000, stage: 'Design Win', date: '2025-02-04' },
|
||
{ id: 'OP0000012869', customer: 'LITEON (PMS)', pn: 'PMSM808LL_R2', eau: 55000, stage: 'Design-In', date: '2025-07-28' },
|
||
{ id: 'OP0000012870', customer: '台達電子', pn: 'PEC3205ES-AU', eau: 100000, stage: 'Sample Provide', date: '2025-08-15' }, // 故意用簡稱測試模糊比對
|
||
{ id: 'OP0000012871', customer: '合美企業', pn: 'PJT7828', eau: 5000, stage: 'Negotiation', date: '2025-08-10' },
|
||
{ id: 'OP0000012872', customer: '申浦电子', pn: 'ER1604FCT', eau: 30000, stage: 'Design Win', date: '2025-07-30' },
|
||
];
|
||
|
||
// 2. Sample Data (模擬解析後的結構)
|
||
// 來源: 樣品申請紀錄_樣本.xlsx
|
||
const PARSED_SAMPLE_DATA = [
|
||
{ id: 'S202512490-02', order_no: 'S202512490', customer: '台達電子工業股份有限公司', pn: 'PEC3205ES-AU', qty: 20, date: '2025-12-19' },
|
||
{ id: 'S202512490-03', order_no: 'S202512490', customer: '台達電子工業股份有限公司', pn: 'PDZ9.1B-AU', qty: 20, date: '2025-12-19' },
|
||
];
|
||
|
||
// 3. Order Data (模擬解析後的結構)
|
||
// 來源: 訂單樣本_20251217.xlsx
|
||
const PARSED_ORDER_DATA = [
|
||
{ id: '1125025312-1', order_no: '1125025312', customer: '合美企業有限公司', pn: 'PJT7828', qty: 1200, status: 'Shipped', amount: 10800 },
|
||
{ id: '1125062105-1', order_no: '1125062105', customer: '申浦电子', pn: 'ER1604FCT', qty: 800, status: 'Backlog', amount: 3200 },
|
||
];
|
||
|
||
// --- 模糊比對模擬結果 ---
|
||
const SIMULATED_REVIEWS = [
|
||
{
|
||
id: 101,
|
||
score: 88,
|
||
dit: { id: 'OP0000012870', cust: '台達電子', pn: 'PEC3205ES-AU' },
|
||
match_target: { id: 'S202512490', cust: '台達電子工業股份有限公司', pn: 'PEC3205ES-AU', type: 'SAMPLE' },
|
||
type: 'SAMPLE',
|
||
reason: 'Customer Name Partial Match (88%)'
|
||
},
|
||
{
|
||
id: 102,
|
||
score: 92,
|
||
dit: { id: 'OP0000012871', cust: '合美企業', pn: 'PJT7828' },
|
||
match_target: { id: '1125025312', cust: '合美企業有限公司', pn: 'PJT7828', type: 'ORDER' },
|
||
type: 'ORDER',
|
||
reason: 'Corporate Suffix Mismatch'
|
||
}
|
||
];
|
||
|
||
// --- 輔助元件 ---
|
||
|
||
const Card = ({ children, className = "" }) => (
|
||
<div className={`bg-white rounded-lg border border-slate-200 shadow-sm ${className}`}>
|
||
{children}
|
||
</div>
|
||
);
|
||
|
||
const Badge = ({ children, type = "neutral" }) => {
|
||
const styles = {
|
||
neutral: "bg-slate-100 text-slate-600",
|
||
success: "bg-emerald-100 text-emerald-700",
|
||
warning: "bg-amber-100 text-amber-700",
|
||
danger: "bg-rose-100 text-rose-700",
|
||
info: "bg-blue-100 text-blue-700"
|
||
};
|
||
return (
|
||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${styles[type]}`}>
|
||
{children}
|
||
</span>
|
||
);
|
||
};
|
||
|
||
// --- 主應用程式 ---
|
||
|
||
export default function App() {
|
||
const [activeTab, setActiveTab] = useState('import');
|
||
const [isProcessing, setIsProcessing] = useState(false);
|
||
const [processingStep, setProcessingStep] = useState('');
|
||
const [filesLoaded, setFilesLoaded] = useState(false);
|
||
|
||
// 狀態管理
|
||
const [reviews, setReviews] = useState([]);
|
||
const [processedCount, setProcessedCount] = useState(0);
|
||
|
||
// Dashboard 數據
|
||
const [dashboardData, setDashboardData] = useState({
|
||
totalDit: 5,
|
||
matchedSample: 0,
|
||
matchedOrder: 1, // '申浦电子' 是 Exact Match
|
||
conversionRate: 20.0
|
||
});
|
||
|
||
// 模擬載入使用者的真實檔案
|
||
const loadUserFiles = () => {
|
||
setFilesLoaded(true);
|
||
};
|
||
|
||
// 模擬 ETL 執行
|
||
const runEtl = () => {
|
||
if (!filesLoaded) {
|
||
alert("請先載入檔案！");
|
||
return;
|
||
}
|
||
setIsProcessing(true);
|
||
|
||
// 模擬後端處理步驟
|
||
const steps = [
|
||
"正在讀取 DIT Report... 偵測到表頭在第 16 行",
|
||
"正在讀取 樣品紀錄... 偵測到表頭在第 9 行",
|
||
"正在讀取 訂單明細... 編碼識別為 CP950",
|
||
"執行資料標準化 (Normalization)...",
|
||
"執行模糊比對 (Fuzzy Matching)...",
|
||
"運算完成！"
|
||
];
|
||
|
||
let stepIndex = 0;
|
||
const interval = setInterval(() => {
|
||
if (stepIndex >= steps.length) {
|
||
clearInterval(interval);
|
||
setIsProcessing(false);
|
||
setReviews(SIMULATED_REVIEWS); // 載入模擬的比對結果
|
||
setActiveTab('review');
|
||
} else {
|
||
setProcessingStep(steps[stepIndex]);
|
||
stepIndex++;
|
||
}
|
||
}, 800);
|
||
};
|
||
|
||
// 處理審核動作
|
||
const handleReviewAction = (id, action) => {
|
||
const reviewItem = reviews.find(r => r.id === id);
|
||
setReviews(prev => prev.filter(r => r.id !== id));
|
||
|
||
if (action === 'accept') {
|
||
setProcessedCount(prev => prev + 1);
|
||
|
||
// 更新 Dashboard 數據 (模擬)
|
||
if (reviewItem.type === 'ORDER') {
|
||
setDashboardData(prev => ({
|
||
...prev,
|
||
matchedOrder: prev.matchedOrder + 1,
|
||
conversionRate: ((prev.matchedOrder + 1) / prev.totalDit * 100).toFixed(1)
|
||
}));
|
||
} else if (reviewItem.type === 'SAMPLE') {
|
||
setDashboardData(prev => ({
|
||
...prev,
|
||
matchedSample: prev.matchedSample + 1
|
||
}));
|
||
}
|
||
}
|
||
};
|
||
|
||
// 漏斗圖資料
|
||
const funnelData = [
|
||
{ name: 'DIT 案件', value: dashboardData.totalDit, fill: '#6366f1' },
|
||
{ name: '成功送樣', value: dashboardData.matchedSample, fill: '#8b5cf6' },
|
||
{ name: '取得訂單', value: dashboardData.matchedOrder, fill: '#10b981' },
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-screen bg-slate-50 font-sans text-slate-800">
|
||
{/* Top Navigation */}
|
||
<header className="bg-white border-b border-slate-200 sticky top-0 z-10">
|
||
<div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white font-bold">
|
||
S
|
||
</div>
|
||
<div>
|
||
<span className="font-bold text-lg text-slate-800 block leading-tight">SalesPipeline</span>
|
||
<span className="text-[10px] text-slate-500 font-medium">On-Premise Simulator</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-1 bg-slate-100 p-1 rounded-lg">
|
||
{[
|
||
{ id: 'import', icon: Database, label: '資料匯入' },
|
||
{ id: 'review', icon: CheckCircle, label: '比對審核', badge: reviews.length },
|
||
{ id: 'dashboard', icon: BarChart2, label: '分析儀表板' }
|
||
].map(tab => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`
|
||
flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all
|
||
${activeTab === tab.id
|
||
? 'bg-white text-indigo-600 shadow-sm'
|
||
: 'text-slate-500 hover:text-slate-700 hover:bg-slate-200/50'}
|
||
`}
|
||
>
|
||
<tab.icon size={16} />
|
||
{tab.label}
|
||
{tab.badge > 0 && (
|
||
<span className="bg-rose-500 text-white text-[10px] px-1.5 py-0.5 rounded-full">
|
||
{tab.badge}
|
||
</span>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="flex items-center gap-2 text-sm text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-100">
|
||
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
|
||
系統運作中
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="max-w-7xl mx-auto px-4 py-8">
|
||
|
||
{/* --- View 1: Import --- */}
|
||
{activeTab === 'import' && (
|
||
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||
<div className="flex justify-between items-end">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-slate-800">原始資料匯入中心</h1>
|
||
<p className="text-slate-500 mt-1">系統將自動偵測 Excel/CSV 檔頭位置並進行智慧欄位對應。</p>
|
||
</div>
|
||
<div className="flex gap-3">
|
||
<button
|
||
onClick={loadUserFiles}
|
||
disabled={filesLoaded || isProcessing}
|
||
className={`flex items-center gap-2 px-4 py-3 rounded-lg font-medium border transition-all ${filesLoaded ? 'bg-slate-100 text-slate-400 border-slate-200' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'}`}
|
||
>
|
||
<FileSpreadsheet size={18} />
|
||
{filesLoaded ? '檔案已就緒' : '載入範本檔案'}
|
||
</button>
|
||
<button
|
||
onClick={runEtl}
|
||
disabled={isProcessing || !filesLoaded}
|
||
className={`flex items-center gap-2 px-6 py-3 rounded-lg text-white font-bold shadow-lg transition-all ${isProcessing || !filesLoaded ? 'bg-slate-400 cursor-not-allowed shadow-none' : 'bg-indigo-600 hover:bg-indigo-700 hover:scale-105 shadow-indigo-200'}`}
|
||
>
|
||
{isProcessing ? (
|
||
<>
|
||
<RefreshCw size={18} className="animate-spin" />
|
||
運算中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Activity size={18} />
|
||
開始 ETL 運算
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Progress Log */}
|
||
{isProcessing && (
|
||
<div className="bg-slate-800 text-green-400 font-mono p-4 rounded-lg text-sm shadow-inner">
|
||
<p className="flex items-center gap-2">
|
||
<span className="animate-pulse">▶</span> {processingStep}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{[
|
||
{ type: 'dit', title: '1. DIT Report', file: 'DIT report_app_樣本.xlsx', desc: '含 Metadata (前16行)', count: '5 筆 (測試)' },
|
||
{ type: 'sample', title: '2. 樣品紀錄', file: '樣品申請紀錄_樣本.xlsx', desc: '含檔頭 (前9行)', count: '2 筆 (測試)' },
|
||
{ type: 'order', title: '3. 訂單明細', file: '訂單樣本_20251217.xlsx', desc: '標準格式', count: '2 筆 (測試)' },
|
||
].map(file => (
|
||
<Card key={file.type} className={`p-6 border-dashed border-2 transition-colors ${filesLoaded ? 'border-emerald-300 bg-emerald-50/30' : 'border-slate-300'}`}>
|
||
<div className="flex justify-between items-start mb-4">
|
||
<div className={`p-3 rounded-lg ${filesLoaded ? 'bg-emerald-100 text-emerald-600' : 'bg-slate-100 text-slate-500'}`}>
|
||
{filesLoaded ? <CheckCircle size={24} /> : <FileText size={24} />}
|
||
</div>
|
||
{filesLoaded && <Badge type="success">Ready</Badge>}
|
||
</div>
|
||
<h3 className="text-lg font-bold text-slate-800">{file.title}</h3>
|
||
<p className="text-xs text-slate-500 font-mono mt-1 mb-3 truncate">{filesLoaded ? file.file : "等待上傳..."}</p>
|
||
<p className="text-sm text-slate-600">{file.desc}</p>
|
||
|
||
{filesLoaded && (
|
||
<div className="mt-4 pt-3 border-t border-slate-200/60 flex justify-between text-sm">
|
||
<span className="text-slate-500">預覽筆數</span>
|
||
<span className="font-bold font-mono text-slate-700">{file.count}</span>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
{/* Data Preview (Mocked from User Files) */}
|
||
{filesLoaded && (
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-in fade-in slide-in-from-bottom-2 duration-500">
|
||
<Card className="overflow-hidden">
|
||
<div className="bg-slate-50 px-4 py-3 border-b border-slate-200 flex justify-between items-center">
|
||
<h3 className="font-bold text-slate-700 text-sm flex items-center gap-2">
|
||
<Database size={16} />
|
||
DIT 解析結果 (預覽)
|
||
</h3>
|
||
<Badge type="info">Auto-Skipped Header</Badge>
|
||
</div>
|
||
<table className="w-full text-xs text-left">
|
||
<thead className="bg-white text-slate-500 border-b border-slate-200">
|
||
<tr>
|
||
<th className="px-4 py-2">Customer</th>
|
||
<th className="px-4 py-2">Part No</th>
|
||
<th className="px-4 py-2">Stage</th>
|
||
<th className="px-4 py-2 text-right">EAU</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-100">
|
||
{PARSED_DIT_DATA.map((row, i) => (
|
||
<tr key={i} className="hover:bg-slate-50">
|
||
<td className="px-4 py-2 font-medium text-slate-700">{row.customer}</td>
|
||
<td className="px-4 py-2 font-mono text-slate-500">{row.pn}</td>
|
||
<td className="px-4 py-2 text-slate-600">{row.stage}</td>
|
||
<td className="px-4 py-2 text-right font-mono">{row.eau.toLocaleString()}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</Card>
|
||
|
||
<Card className="overflow-hidden">
|
||
<div className="bg-slate-50 px-4 py-3 border-b border-slate-200 flex justify-between items-center">
|
||
<h3 className="font-bold text-slate-700 text-sm flex items-center gap-2">
|
||
<Database size={16} />
|
||
訂單解析結果 (預覽)
|
||
</h3>
|
||
<Badge type="info">Detected CP950</Badge>
|
||
</div>
|
||
<table className="w-full text-xs text-left">
|
||
<thead className="bg-white text-slate-500 border-b border-slate-200">
|
||
<tr>
|
||
<th className="px-4 py-2">Customer</th>
|
||
<th className="px-4 py-2">Part No</th>
|
||
<th className="px-4 py-2">Status</th>
|
||
<th className="px-4 py-2 text-right">Qty</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-100">
|
||
{PARSED_ORDER_DATA.map((row, i) => (
|
||
<tr key={i} className="hover:bg-slate-50">
|
||
<td className="px-4 py-2 font-medium text-slate-700">{row.customer}</td>
|
||
<td className="px-4 py-2 font-mono text-slate-500">{row.pn}</td>
|
||
<td className="px-4 py-2">
|
||
<span className={`px-1.5 py-0.5 rounded text-[10px] ${row.status === 'Shipped' ? 'bg-green-100 text-green-700' : 'bg-pink-100 text-pink-700'}`}>
|
||
{row.status}
|
||
</span>
|
||
</td>
|
||
<td className="px-4 py-2 text-right font-mono">{row.qty.toLocaleString()}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</Card>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* --- View 2: Review --- */}
|
||
{activeTab === 'review' && (
|
||
<div className="space-y-6 animate-in fade-in zoom-in-95 duration-300">
|
||
<div className="flex justify-between items-center">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
|
||
模糊比對審核工作台
|
||
<span className="text-sm bg-indigo-100 text-indigo-700 px-2 py-1 rounded-full font-normal">待審核: {reviews.length}</span>
|
||
</h1>
|
||
<p className="text-slate-500 mt-1">系統發現以下案件名稱相似，請人工確認關聯性。</p>
|
||
</div>
|
||
</div>
|
||
|
||
{reviews.length === 0 ? (
|
||
<div className="flex flex-col items-center justify-center py-20 bg-white rounded-lg border border-dashed border-slate-300">
|
||
<div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mb-4">
|
||
<CheckCircle size={32} />
|
||
</div>
|
||
<h3 className="text-xl font-bold text-slate-800">所有案件已審核完畢！</h3>
|
||
<p className="text-slate-500 mt-2">您的資料比對已完成，請查看分析儀表板。</p>
|
||
<button
|
||
onClick={() => setActiveTab('dashboard')}
|
||
className="mt-6 px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
|
||
>
|
||
前往儀表板
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="grid gap-4">
|
||
{reviews.map(item => (
|
||
<Card key={item.id} className="p-0 overflow-hidden group hover:shadow-md transition-all border-l-4 border-l-amber-400">
|
||
<div className="flex flex-col md:flex-row">
|
||
{/* Left: DIT */}
|
||
<div className="flex-1 p-5 border-b md:border-b-0 md:border-r border-slate-100 bg-slate-50/50">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<Badge type="info">DIT (設計導入)</Badge>
|
||
<span className="text-xs text-slate-400">OP編號: {item.dit.id}</span>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="text-xs text-slate-400 uppercase">Customer Name</div>
|
||
<div className="font-bold text-slate-800 text-lg">{item.dit.cust}</div>
|
||
<div className="text-xs text-slate-400 uppercase mt-2">Part Number</div>
|
||
<div className="font-mono text-slate-700 bg-white border border-slate-200 px-2 py-1 rounded inline-block text-sm">
|
||
{item.dit.pn}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Middle: Score & Reason */}
|
||
<div className="w-full md:w-48 p-4 flex flex-col items-center justify-center bg-white z-10">
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-amber-500 mb-1">{item.score}%</div>
|
||
<div className="text-[10px] font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full mb-2">
|
||
相似度
|
||
</div>
|
||
<div className="text-xs text-slate-400 text-center px-2 leading-tight">
|
||
{item.reason}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right: Target (Sample/Order) */}
|
||
<div className="flex-1 p-5 border-t md:border-t-0 md:border-l border-slate-100 bg-indigo-50/30">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<Badge type={item.type === 'ORDER' ? 'warning' : 'success'}>
|
||
{item.type === 'ORDER' ? 'Order (訂單)' : 'Sample (樣品)'}
|
||
</Badge>
|
||
<span className="text-xs text-slate-400">來源單號: {item.match_target.id}</span>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="text-xs text-slate-400 uppercase">Customer Name</div>
|
||
<div className="font-bold text-slate-800 text-lg">{item.match_target.cust}</div>
|
||
<div className="text-xs text-slate-400 uppercase mt-2">Part Number</div>
|
||
<div className="font-mono text-slate-700 bg-white border border-slate-200 px-2 py-1 rounded inline-block text-sm">
|
||
{item.match_target.pn}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="w-full md:w-40 p-4 bg-slate-50 flex flex-row md:flex-col gap-3 justify-center items-center border-t md:border-t-0 md:border-l border-slate-200">
|
||
<button
|
||
onClick={() => handleReviewAction(item.id, 'accept')}
|
||
className="flex-1 md:flex-none w-full py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-medium flex items-center justify-center gap-2 transition-colors shadow-sm"
|
||
>
|
||
<CheckCircle size={16} /> 確認關聯
|
||
</button>
|
||
<button
|
||
onClick={() => handleReviewAction(item.id, 'reject')}
|
||
className="flex-1 md:flex-none w-full py-2 bg-white border border-slate-300 text-slate-600 hover:bg-slate-50 rounded-lg text-sm font-medium flex items-center justify-center gap-2 transition-colors"
|
||
>
|
||
<XCircle size={16} /> 駁回
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* --- View 3: Dashboard --- */}
|
||
{activeTab === 'dashboard' && (
|
||
<div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
|
||
<div className="flex justify-between items-center">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-slate-800">業務轉換率戰情室</h1>
|
||
<p className="text-slate-500 mt-1">數據來源：DIT Report, 樣品紀錄, 訂單明細 (2025-12-17)</p>
|
||
</div>
|
||
<button className="flex items-center gap-2 px-4 py-2 border border-slate-300 rounded-lg text-slate-600 hover:bg-slate-50 text-sm font-medium">
|
||
<Download size={16} />
|
||
匯出報表
|
||
</button>
|
||
</div>
|
||
|
||
{/* KPI Cards */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||
<Card className="p-5 border-l-4 border-l-indigo-500">
|
||
<div className="text-sm text-slate-500 mb-1">DIT 總案件數</div>
|
||
<div className="text-3xl font-bold text-slate-800">{dashboardData.totalDit}</div>
|
||
<div className="text-xs text-slate-400 mt-2">Raw Data Count</div>
|
||
</Card>
|
||
<Card className="p-5 border-l-4 border-l-purple-500">
|
||
<div className="text-sm text-slate-500 mb-1">成功送樣數</div>
|
||
<div className="text-3xl font-bold text-slate-800">{dashboardData.matchedSample}</div>
|
||
<div className="text-xs text-emerald-600 mt-2">
|
||
{processedCount > 0 ? `(含人工審核 +1)` : ''}
|
||
</div>
|
||
</Card>
|
||
<Card className="p-5 border-l-4 border-l-pink-500">
|
||
<div className="text-sm text-slate-500 mb-1">取得訂單 (Backlog)</div>
|
||
<div className="text-3xl font-bold text-slate-800">{dashboardData.matchedOrder}</div>
|
||
<div className="text-xs text-emerald-600 mt-2">
|
||
Match Rate: {dashboardData.conversionRate}%
|
||
</div>
|
||
</Card>
|
||
<Card className="p-5 border-l-4 border-l-emerald-500">
|
||
<div className="text-sm text-slate-500 mb-1">預估營收 (Revenue)</div>
|
||
<div className="text-3xl font-bold text-emerald-600">$14,000</div>
|
||
<div className="text-xs text-slate-400 mt-2">Based on matched orders</div>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
{/* Funnel Chart */}
|
||
<Card className="lg:col-span-2 p-6">
|
||
<h3 className="font-bold text-slate-700 mb-6 flex items-center gap-2">
|
||
<Filter size={18} />
|
||
DIT 轉換漏斗 (Funnel Analysis)
|
||
</h3>
|
||
<div className="h-64 w-full">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<BarChart
|
||
layout="vertical"
|
||
data={funnelData}
|
||
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
||
>
|
||
<CartesianGrid strokeDasharray="3 3" horizontal={false} />
|
||
<XAxis type="number" />
|
||
<YAxis dataKey="name" type="category" width={100} />
|
||
<RechartsTooltip cursor={{fill: '#f1f5f9'}} />
|
||
<Bar dataKey="value" barSize={30} radius={[0, 4, 4, 0]} label={{ position: 'right' }}>
|
||
{funnelData.map((entry, index) => (
|
||
<Cell key={`cell-${index}`} fill={entry.fill} />
|
||
))}
|
||
</Bar>
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
</Card>
|
||
|
||
{/* Status Pie Chart */}
|
||
<Card className="p-6">
|
||
<h3 className="font-bold text-slate-700 mb-6 flex items-center gap-2">
|
||
<PieChart size={18} />
|
||
訂單狀態佔比
|
||
</h3>
|
||
<div className="h-64 w-full flex justify-center">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<RePieChart>
|
||
<Pie
|
||
data={[
|
||
{ name: 'Backlog', value: 800 },
|
||
{ name: 'Shipped', value: 1200 },
|
||
]}
|
||
cx="50%"
|
||
cy="50%"
|
||
innerRadius={60}
|
||
outerRadius={80}
|
||
paddingAngle={5}
|
||
dataKey="value"
|
||
>
|
||
<Cell fill="#ec4899" />
|
||
<Cell fill="#10b981" />
|
||
</Pie>
|
||
<RechartsTooltip />
|
||
<Legend verticalAlign="bottom" height={36}/>
|
||
</RePieChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Attribution Table Preview */}
|
||
<Card className="overflow-hidden">
|
||
<div className="bg-slate-50 px-6 py-4 border-b border-slate-200 flex justify-between items-center">
|
||
<h3 className="font-bold text-slate-700 flex items-center gap-2">
|
||
<Activity size={18} />
|
||
DIT 歸因明細表 (LIFO 邏輯)
|
||
</h3>
|
||
<div className="text-xs text-slate-500">
|
||
<span className="flex items-center gap-1">
|
||
<Info size={12} />
|
||
Hover to see order details
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<table className="w-full text-sm text-left">
|
||
<thead className="bg-white text-slate-500 border-b border-slate-200">
|
||
<tr>
|
||
<th className="px-6 py-3 w-32">OP編號</th>
|
||
<th className="px-6 py-3">Customer</th>
|
||
<th className="px-6 py-3">Part No.</th>
|
||
<th className="px-6 py-3 text-right">EAU</th>
|
||
<th className="px-6 py-3 text-center">Sample Order</th>
|
||
<th className="px-6 py-3 text-center">Order Status</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-100">
|
||
{PARSED_DIT_DATA.map((row, i) => {
|
||
// 簡單模擬關聯邏輯 (Find exact matches or partial matches)
|
||
const matchedOrder = PARSED_ORDER_DATA.find(o => o.customer.includes(row.customer) || row.customer.includes(o.customer.substring(0, 2)));
|
||
const matchedSample = PARSED_SAMPLE_DATA.find(s => s.customer.includes(row.customer) || row.customer.includes(s.customer.substring(0, 2)));
|
||
|
||
// 人工審核修正 (台達電子 & 合美)
|
||
const isReviewedSample = (row.customer === '台達電子' && processedCount > 0) ? {order_no: 'S202512490'} : null;
|
||
const isReviewedOrder = (row.customer === '合美企業' && processedCount > 1) ? {order_no: '1125025312'} : null;
|
||
|
||
// 決定顯示內容
|
||
const finalSample = matchedSample || isReviewedSample;
|
||
const finalOrder = matchedOrder || isReviewedOrder;
|
||
|
||
return (
|
||
<tr key={i} className="hover:bg-slate-50 group transition-colors">
|
||
<td className="px-6 py-3 font-mono text-xs text-slate-500 font-bold">
|
||
{row.id}
|
||
</td>
|
||
<td className="px-6 py-3 font-medium text-slate-800">
|
||
{row.customer}
|
||
<div className="text-[10px] text-slate-400 font-light">{row.stage}</div>
|
||
</td>
|
||
<td className="px-6 py-3 font-mono text-slate-600 text-xs">{row.pn}</td>
|
||
<td className="px-6 py-3 text-right font-mono text-slate-600">{row.eau.toLocaleString()}</td>
|
||
|
||
{/* Sample Column */}
|
||
<td className="px-6 py-3 text-center">
|
||
{finalSample ? (
|
||
<div className="inline-flex items-center gap-1 px-2 py-1 bg-purple-50 text-purple-700 rounded-md text-xs font-mono border border-purple-100 cursor-help" title={`送樣單號: ${finalSample.order_no}`}>
|
||
<CheckCircle size={12} />
|
||
{finalSample.order_no}
|
||
</div>
|
||
) : (
|
||
<span className="text-slate-300">-</span>
|
||
)}
|
||
</td>
|
||
|
||
{/* Order Column */}
|
||
<td className="px-6 py-3 text-center">
|
||
{finalOrder ? (
|
||
<div className="inline-flex items-center gap-1 px-2 py-1 bg-emerald-50 text-emerald-700 rounded-md text-xs font-mono border border-emerald-100 cursor-help" title={`訂單單號: ${finalOrder.order_no}`}>
|
||
<CheckCircle size={12} />
|
||
{finalOrder.order_no}
|
||
</div>
|
||
) : (
|
||
<span className="text-slate-300">-</span>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
)
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</Card>
|
||
|
||
</div>
|
||
)}
|
||
|
||
</main>
|
||
</div>
|
||
);
|
||
} |